vue2源码-六、根据render函数生成vnode

根据render函数生成vnode

1. 上文介绍

   上面已经将模板编译成了render函数，下面就要使用render函数，从而完成渲染的操作：

   首先，根据render函数生成虚拟节点；然后根据虚拟节点+真实数据生成真实节点。

   实现mountComponent方法，完成渲染

2. 虚拟节点生成

   • 封装vm._render方法。

       Vue.prototype._render = function () {
         // 让with指中的this指向vm
         // 当渲染的时候会去实例取值，就可以将属性和视图绑定在一起
         return this.$options.render.call(this); // 通过ast语法转义后生成的render方法
       };
     

     当_render被调用时，内部会调用_c、_v、_s三个方法

     所以，在vm._render方法中，需要完成以下几件事：

     • 调用render函数
     • 提供_c、_v、s三个方法

       Vue.prototype._c = function () {
         return createElementVNode(this, ...arguments);
       };
     
       Vue.prototype._v = function () {
         return createTextVNode(this, ...arguments);
       };
     
       Vue.prototype._s = function (value) {
           // 不是对象
         if (typeof value !== "object") return value;
           // 是对象，返回字符串
         return JSON.stringify(value);
       };
     

   • _s方法

     如上面所示。

   • 实现_c和_v方法

     观察_c和_v调用了两个方法，因此实现两个方法：

     export function createElement() { 
       // 返回元素虚拟节点
     }
     export function createText() {  
       // 返回文本虚拟节点
     }
     

     这两个方返回虚拟节点。

     实现：

     // h() _c()
     
     export function createElementVNode(vm, tag, data = {}, ...children) {
       if (data == null) {
         data = {}
       }
       let key = data.key
       if (key) {
         delete data.key
       }
       return vnode(vm, tag, key, data, children)
     }
     
     // _v()
     export function createTextVNode(vm, text) {
       return vnode(vm, undefined, undefined, undefined, undefined, text)
     }
     
     // ast一样吗？ast做的是语法层面的转化，他描述的是语法本身
     // 我们的虚拟dom是描述的dom元素，可以增加自定义属性
     function vnode(vm, tag, key, data, children, text) {
       return {
         vm, // 是谁的虚拟节点
         tag, // 标签
         key, // 键
         data, // 数据
         children,  // 孩子
         text, // 文本
       }
     }
     

3. 总结生成虚拟节点

   根据render函数，生成vnode

   • 封装vm._render返回虚拟节点
   • _s，_c，_v的实现