解读vue源码系列

前面文章已经 把 created钩子函数触发前，beforeCreate触发后 的initInjections和initProvide讲完了，现在开始讲 initState的props部分。 如代码所示，这一部分，也是created钩子函数触发前，beforeCreate触发后…

即beforeCreate钩子函数触发前对实例 属性和事件的初始化。 这一次来讲解 created钩子函数触发前，beforeCreate触发后 的initInjections和initProvide，可能你会问为什么initState为什么不一起讲呢，因为initState也…

Vue.js生命周期可以分为4个阶段：初始化阶段、模板编译阶段、挂载阶段、卸载阶段。 在Vue.js实例上初始化一些属性、事件以及响应式数据，如props、methods、data、computed、watch、provide和inject等。 这一次，我们就来探究第一阶段：初…

每个Vue.js实例在创建时都要经过一系列初始化，例如设置数据监听、编译模板、将实例挂载到DOM并在数据变化时更新DOM等。 同时，也会运行一些叫作生命周期钩子的函数，给在不同阶段添加自定义代码的机会。 Vue.js生命周期可以分为4个阶段：初始化阶段、模板编译阶段、挂载阶段、…

迫使Vue.js实例重新渲染。注意它仅仅影响实例本身以及插入插槽内容的子组件，而不是所有子组件。 只需要执行watcher的update方法，就可以让实例重新渲染。 Vue.js的每一个实例都有一个watcher。当状态发生改变时，会通知到组件级别，然后组件内部使用虚拟DOM进…

这一节，先对diff进行简单的描述，不会出现任何的源码，只是为了帮助大家建立一种思路，了解下 Diff 的大概内容。 1. Diff 作用 2. Diff 做法 3. Diff 比较逻辑 4. Diff 简单例子 2. 从新建实例到开始diff 这一节不会对源码深入研究，而是跟…

nextTick接收一个回调函数作为参数，它的作用是将回调延迟到下次DOM更新周期之后执行。 它与全局Vue.nextTick的原理时一样的。 在Vue.js中，当状态发生改变时，watcher会得到通知，然后触发虚拟DOM的渲染过程。而watcher触发渲染这个操作并不是同步…

意思就是在改变数据的时候，视图会跟着更新。这意味着你只需要进行数据的管理，给我们搬砖提供了很大的便利。 VUE是利用了Object.defineProperty的方法里面的setter 与getter方法的观察者模式来实现。 Object.defineProperty 与 观察…

我们 之前 谈 学习vue源码（5） 手写Vue.use、Vue.mixin、Vue.compile的时候 谈到了Vue.mixin的源码实现，然后谈到了mergeOptions，那时并没有深入解说 这个函数 的原理。如图所示 这次我们就来深入研究下，因此也就离不开Vue中的一…

update里 有一系列 diff操作。 怎么获取下面继续....... 太简单了，总结跟没总结一样....... 如图所示，是在挂载阶段执行的。 到这里其实基本就已经结束了render的思路，但是源码中有个静态render，这个 对渲染性能的提高有极大的帮助，所以必须看下。 …

前面的学习vue源码（6）熟悉模板编译原理 我们谈到，模板编译分为解析器，优化器，代码生成器。 前面两部分已经实现，现在 就来看看 代码生成器怎么实现吧。 代码生成器的作用是使用 AST 生成 render 函数代码字符串。 生成后的代码字符串中看到了有几个函数调用 _c，_v…

前面的 学习vue源码（6）熟悉模板编译原理我们谈到 模板编译分为解析器，优化器，代码生成器。 在学习vue源码（7）手写解析器里我们已经学会了解析器怎么实现，现在 就来看看 优化器怎么实现吧。 ul 就是静态根节点。 然后在循环 children，如果 children 中出…

的学习，我们知道解析器在整个模板编译中的位置。我们只有将模板解析成AST后，才能基于AST做优化或者生成代码字符串，那么解析器是如何将模板解析成AST的呢？ 这次，我们将详细介绍解析器内部的运行原理。 解析器要实现的功能是将模板解析成AST。 其实AST并不是什么很神奇的东西，…

但是没有谈到具体实现，这一次我们来具体实现。 先大概谈下模板编译原理。 （1）在Vue.js中创建HTML并不是只有模板这一种途径。既可以手动写渲染函数来创建HTML，也可以在Vue.js中使用JSX来创建HTML。 （2）渲染函数是创建HTML最原始的方法。 （3）模板最终会…

安装Vue.js插件。如果插件是一个对象，必须提供install方法。如果插件是一个函数，它会被作为install方法。调用install方法时，会将Vue作为参数传入。install方法被同一个插件多次调用时，插件也只会被安装一次。 注册插件，此时只需要调用install方法…

vm，即实例本身。 1、如果Vue.js实例在实例化时没有收到el选项，则它处于“未挂载”状态，没有关联的DOM元素。 2、可以使用vm.$mount手动挂载一个未挂载的实例。 3、如果没有提供elementOrSelector参数，模板将被渲染为文档之外的元素，并且必须使用原…

注册或获取全局指令。 （3） 除了核心功能默认内置的指令外（v-model和v-show），Vue.js也允许注册自定义指令。虽然代码复用和抽象的主要形式是组件，但是有些情况下，仍然需要对普通DOM元素进行底层操作，这时就会用到自定义指令。 （4）Vue.directive方法…

使用基础Vue构造器创建一个“子类”，其参数是一个包含“组件选项”的对象。data选项是特例，在Vue.extend（）中，它必须是函数。 （3）全局API和示例方法不同，后者是在Vue的原型上挂载方法，也就是在Vue.prototype上挂载方法，而前者是直接在Vue上挂载方…

这5个函数的作用就是向Vue的原型上挂载方法。 当函数initMixin被调用时，会向Vue构造函数的prototype属性添加_init方法，执行new Vue()时，会调用_init方法。 这四个方法实在eventsMixin中挂在到Vue构造函数和prototype属性中…

并初始化用户传入的参数options，我们先假设用户传入的options是只有data属性和el属性的。 到这里我们实现的是new MyVue的时候，通过_init方法来初始化options， 然后通过initData方法将data挂到vm实例的_data上去了，接下来，我们要…