学习笔记：Render函数Render函数Vue2与Vue1最大的区别就在于Vue2使用了虚拟DOM来更新DOM节点，提升渲染性能。Vue2与Vue1最大的区别就在于Vue2使用了虚拟DOM来更新DOM节点，提升渲染性能。Vue2与Vue1最大的区别就在于Vue2使用了虚拟DOM来更新DOM节点，提升渲染性能。Vue2与Vue1最大的区别就在于Vue2使用了虚拟DOM来更新DOM节点，提升渲染性能。虚拟DOMReact和Vue2都使用了虚拟DOM技术，虚拟DOM并不是真正意义上的DOM，而是一个轻量级的JavaScript对象，在状态发生变化时，虚拟DOM会进行Different运算，来更新只需要被替换的DOM，而不是全部重绘。与DOM操作相比，虚拟DOM是基于JavaScript计算的，所以开销会小很多。在Vue2中，虚拟DOM就是通过一种VNode类表达，每个DOM元素或组件对对应一个VNode对象。VNodeData节点解析：children 子节点，数组，也是VNode类型。text 当前节点的文本，一般文本节点或注释节点会有该属性。elm 当前虚拟节点对应的真实的DOM节点。ns 节点的namespacecontent 编译作用域functionalContext 函数化组件的作用域key 节点的key属性，用于作为节点的标识，有利于patch的优化componentOptions 创建组件实例时会用到的选项信息。child 当前节点对应的组件实例。parent 组件的占位节点。raw 原始htmlisStatic 静态节点的标识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里写起来比较复杂，但是可以自由控制，深入到更底层。对于事件修饰符和按键修饰符，基本需要自己实现：修饰符对应的句柄.stopevent.stopPropagation().preventevent.preventDefault().selfif(event.target!==event.currentTarget) return.ente、.13if(event.keyCode!==13) return替换13位需要的keyCode.ctrl、.alt、.shift、.metaif(!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，这是可以自定义显示的内容。