VUE源码笔记之render

418 阅读1分钟

这次开始学习vue源码的知识,并且把学习的内容都写成笔记,方便以后复习。

这几节最后应该合并起来看,串联后是实现数据驱动的代码,写好了会补上链接

一、VUE源码笔记之new Vue
二、VUE源码笔记之$mount实例挂载
三、VUE源码笔记之render
四、VUE源码笔记之createElement

本节的内容是:初步了解render。

render

上一节写到_render方法,我们现在来看看 _render的定义,它的定义在 src/core/instance/render.js文件中。

首先拿到render方法,然后在下面执行render函数,并返回一个vnode。我们在平时的开发工作中手写 render方法的场景比较少,用的基本都是template,之前在$mounted方法中会把template编译成render 方法,现在我们直接写一个render方法举个例子。

<div id="app">
  {{ message }}
</div>

相当于

render: function (createElement) {
  return createElement('div', {
     attrs: {
        id: 'app'
      },
  }, this.message)
}

这个createElement就是vm.$createElement

从代码中查询vm.$createElement的定义,发现还有一个 _c方法,实际上, _c 方法,它是被模板编译成的 render 函数使用,而 vm.$createElement 是用户手写 render 方法使用的, 这俩个方法支持的参数相同,并且内部都调用了 createElement 方法。

所以,vm._render 最终是通过执行 createElement 方法并返回的是 vnode,它是一个虚拟 Node。

参考

Vue.js 技术揭秘