这次开始学习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。