vue2源码类

在执行 _init() 方法时开始初始化了生命周期、事件和渲染。紧接着就调用了 beforeCreate 钩子函数。此时与数据相关的属性都还没有初始化 ，所以在这个阶段想要用获取到组件的属性是无法成功的。 在调用了 beforeCreate 钩子之后，Vue 调用了 initI…

通过数据的改变去驱动 DOM 视图的变化。 双向绑定除了数据驱动 DOM 之外， DOM 的变化反过来影响数据，是一个双向的关系。 所以说，把 vue 的数据响应原理理解为双向数据绑定，实际上这是不准确的。 针对于 input 的 v-model 双向数据绑定实际上就是通过子组…

因为Vue是异步驱动视图更新数据的，即当我们在事件中修改数据时，视图并不会即时的更新，而是等在同一事件循环的所有数据变化完成后，再进行视图更新。类似于Event Loop事件循环机制。 我们首先找到nextTick这个函数定义的地方，看看它具体做了什么操作；看到它在外层定义了三…

这个函数的作用个就是插入节点，但是插入节点也会分为两种情况。 这个方法处理子节点，必然是用遍历递归的方法逐个处理。以下两种情况。 判断某个新vnode是否在这个旧vnode数组中，并且拿到它的位置。就是拿到新vnode的key，然后去这个map表中去匹配，是否有响应的节点，有的…

render函数可以作为一道分割线，render函数的左边可以称之为编译期，将Vue的模板转换为渲染函数。render函数的右边是Vue的运行时，主要是基于渲染函数生成Virtual DOM树，Diff和Patch。 render渲染函数将结合数据生成Virtual DOM的。…

模板编译的主要作用是将Vue模板编译为渲染函数，首先将模板解析成AST（抽象语法树），然后使用AST生成渲染函数。 在这张图中，我们可以看到 Vue 的模板编译是在 $mount 的过程中进行的，在$mount的时候执行了 compile 这个方法来将 template 里的内…

在不同的构建版本中，vm.$mount的表现都不一样，其差异要体现在完整版本vue.js和只包含运行时版本vue.runtime.js之间。 完整版本与只包含运行时版本之间的差异在于是否有编译器。 在完整的构建版本中，vm.$mount首先会检查template或el选项所提供…