Render函数

Vue2Vue1最大的区别就在于Vue2使用了虚拟DOM来更新DOM节点,提升渲染性能。

Vue2Vue1最大的区别就在于Vue2使用了虚拟DOM来更新DOM节点,提升渲染性能。

Vue2Vue1最大的区别就在于Vue2使用了虚拟DOM来更新DOM节点,提升渲染性能。

虚拟DOM

React和Vue2都使用了虚拟DOM技术,虚拟DOM并不是真正意义上的DOM,而是一个轻量级的JavaScript对象,在状态发生变化时,虚拟DOM会进行Different运算,来更新只需要被替换的DOM,而不是全部重绘。

与DOM操作相比,虚拟DOM是基于JavaScript计算的,所以开销会小很多。

在Vue2中,虚拟DOM就是通过一种VNode类表达,每个DOM元素或组件对对应一个VNode对象。

VNodeData节点解析:

VNode主要可以分为以下几类:

Render函数通过createElement参数来创建虚拟DOM,结构精简。其中,访问slot的用法,使用场景集中在Render函数

See the Pen Vue-render函数 by whjin (@whjin) on CodePen.

createElement用法

基本参数

createElement构成了Vue虚拟DOM的模板,它有3个参数:

createElement(
    //{String | Object | Function}
    //一个HTML标签,组件选项,或一个函数
    //必须return上面其中一个
    'div',
    //{Object}
    //一个对应属性的数据对象,可选
    //可以在template中使用
    //{String | Array}
    //子节点(VNode),可选
    [
        createElement('h1','hello world'),
        createElement(MyComponent,{
            props:{
                someProp:'foo'
            }
        }),
        'bar'
    ]
);

第一个参数必选,可以是一个HTML标签,也可以是一个组件或函数;第二个是可选参数,数据对象,在template中使用。第三个是子节点,也是可选参数,用法一直。

之前在template中都是在组件的标签上使用v-bind:classv-bind:stylev-on:click这样的指令,在Render函数都将其写在了数据对象中。

约束

所有的组件树中,如果VNode是组件或含有组件的slot,nameVNode必须唯一。

在Render函数里创建了一个cloneVNode的工厂函数,通过递归将slot所有子节点都克隆了一份,并对VNode的关键属性也进行复制。

使用JavaScript代替模板功能

在Render函数中,不再需要Vue内置的指令,比如v-ifv-for。无论要实现什么功能,都可以使用原生JavaScript。

See the Pen render—v-for by whjin (@whjin) on CodePen.

map()方法时快速改变数组结构,返回一个新数组。map常和filtersort等方法一起使用,它们返回的都是新数组。

Render函数里没有与v-model对应的API,需要自己来实现逻辑。

See the Pen Vue-render-API by whjin (@whjin) on CodePen.

v-model就是prop:valueevent:input组合使用的一个语法糖,虽然在Render里写起来比较复杂,但是可以自由控制,深入到更底层。

对于事件修饰符和按键修饰符,基本需要自己实现:

修饰符 对应的句柄
.stop event.stopPropagation()
.prevent event.preventDefault()
.self if(event.target!==event.currentTarget) return
.ente.13 if(event.keyCode!==13) return替换13位需要的keyCode
.ctrl.alt.shift.meta if(!event.ctrlKey) return根据需要替换ctrlKeyaltKeyshiftKeymetaKey

对于事件修饰符.capture.once,Vue提供了特殊的前缀,可以直接写在on的配置里。

修饰符 前缀
.capture !
.once ~
.capture.once.once.capture ~!

写法如下:

on: {
    '!click': this.doThisInCapturingMode,
        '~keyup': this.doThisOnce,
        '~!mouseover': this.doThisOnceInCapturingMode
}

简单模拟聊天发送内容的场景:

See the Pen Vue-模拟聊天发送内容 by whjin (@whjin) on CodePen.

在Render函数中会大量使用slot,在没有使用slot时会显示一个默认的内容,这部分需要自己实现。

this.$slots.default等于undefined,就说明父组件中没有定义slot,这是可以自定义显示的内容。