Vue.js-Render函数

学习笔记：Render函数

Render函数

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

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

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

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

虚拟DOM

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

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

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

VNodeData节点解析：

• children 子节点，数组，也是VNode类型。
• text 当前节点的文本，一般文本节点或注释节点会有该属性。
• elm 当前虚拟节点对应的真实的DOM节点。
• ns 节点的namespace
• content 编译作用域
• functionalContext 函数化组件的作用域
• key 节点的key属性，用于作为节点的标识，有利于patch的优化
• componentOptions 创建组件实例时会用到的选项信息。
• child 当前节点对应的组件实例。
• parent 组件的占位节点。
• raw 原始html
• isStatic 静态节点的标识
• isRootInset 是否作为根节点插入，被<transition>包裹的节点，该属性的值为false。
• isConment 当前节点是否是注释节点。
• isCloned 当前节点是否为克隆节点。
• isOnce 当前节点是否有v-once指令。

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

• TextVNode 文本节点。
• ElementVNode 普通元素节点。
• ComponentVNode 组件节点。
• EmptyVNode 没有内容的注释节点。
• CloneVNode 克隆节点，可以是以上任意类型的节点，唯一的区别在于isCloned属性为true。

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

<p data-height="265" data-theme-id="0" data-slug-hash="wXozpg" data-default-tab="html,result" data-user="whjin" data-embed-version="2" data-pen-title="Vue-render函数" class="codepen">See the Pen Vue-render函数 by whjin (@whjin) on CodePen.</p>
<script async src="https://static.codepen.io/ass...;></script>

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:class、v-bind:style、v-on:click这样的指令，在Render函数都将其写在了数据对象中。

约束

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

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

使用JavaScript代替模板功能

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

<p data-height="265" data-theme-id="0" data-slug-hash="eKgVgQ" data-default-tab="html,result" data-user="whjin" data-embed-version="2" data-pen-title="render--v-for" class="codepen">See the Pen render--v-for by whjin (@whjin) on CodePen.</p>
<script async src="https://static.codepen.io/ass...;></script>

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

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

<p data-height="265" data-theme-id="0" data-slug-hash="BVpYdd" data-default-tab="html,result" data-user="whjin" data-embed-version="2" data-pen-title="Vue-render-API" class="codepen">See the Pen Vue-render-API by whjin (@whjin) on CodePen.</p>
<script async src="https://static.codepen.io/ass...;></script>

v-model就是prop:value和event: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根据需要替换ctrlKey位altKey、shiftKey或metaKey

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

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

写法如下：

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

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

<p data-height="265" data-theme-id="0" data-slug-hash="ZRLrPN" data-default-tab="html,result" data-user="whjin" data-embed-version="2" data-pen-title="Vue-模拟聊天发送内容" class="codepen">See the Pen Vue-模拟聊天发送内容 by whjin (@whjin) on CodePen.</p>
<script async src="https://static.codepen.io/ass...;></script>

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

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