零与一

在之前的章节中，我们讲解了Vue的实例化，从模版编译-> ast -> render函数 -> vnode -> 初次渲染。 但是界面初次渲染之后，我们需要使用系统，在使用系统的过程中，我们会修改掉许多数据，在修改的同时，界面会随机发生变化，这就是所谓的数据响应式，也就是界面随…

时创建子节点，这个方法中会递归的调用createElm方法创建dom元素，如果是组件的话会进入createComponent方法中，如何创建子组件会在专门的部分详细讲解。 接下来我们看一下子组件是如何被渲染的。 Ctor就是保存在vnode中的继承自Vue的构造函数。Vue的实…

概述render函数执行以后会生成虚拟节点Vnode，Vnode以参数传入_update方法，此方法的作用就是更新或渲染真实的dom节点我们看一下_update方法的实现，主要是调用了__patch_

这个方法主要作用就是创建Vnode，即虚拟dom，如果是标签元素，就创建标签对应的Vnode，如果是组件那么创建组件的Vnode。 其实虚拟dom就是将render函数执行，render函数中有一系列的方法可以会生成对应的Vnode，如文本节点等，Vnode就是对模版的抽象，将…

parse方法生成ast之后，又调用了generate方法将ast转化为render函数generate(ast,options)generate主要调用了genElement方法，生成render字

ast示例定义模版如下我们debugger调试查看生成的ast如下最外层的div被转化为如下结构，div下有五个子节点，分别是两个p标签，两个文本节点，一个div节点v-for被转化为如下{{item

我们知道newVue(options)最终执行了vm.$mount方法，此方法在具有模版编译的版本中执行会调用entry-runtime-with-compiler.js中定义的$mount方法$mo

updateListeners()方法主要作用就是将绑定在组件上的事件，保存至vm._events属性中，并且如果绑定的事件更新了，那么vm._events中的事件也会更新。 _c() 和 $createElement区别就是 通过内部模板编译生成的render函数会执行_c(…

runtime/index.js执行完以后，执行了entry-runtime-with-compiler.js，此入口文件主要定了Vue.prototype.$mount()方法，我们知道runtim