Skip to content

01概览

<img src="https://user-gold-cdn.xitu.io/2017/12/19/1606e7eaa2a664e8?imageView2/0/w/1280/h/960/format/webp/ignore-error/1">

初始化及挂载

new Vue() -> init -> $mount

new Vue()之后,Vue会调用_init函数进行初始化,也就是这里的init过程,它会初始化生命周期、事件、props、methods、data、computed与watch等。其中最重要的是通过Object.defineProperty设置gettersetter函数,用来实现[响应式]及[依赖收集],后面会细说。

<img src="https://user-gold-cdn.xitu.io/2017/12/19/1606e8abbababbe6?imageView2/0/w/1280/h/960/format/webp/ignore-error/1">

初始化之后调用$mount会挂载组件,如果是运行时编译,即不存在render function但存在template的情况,需要进行[编译]步骤。

编译

compile 编译可以分成parseoptimizegenerate三个阶段,最终需要得到render function。

<img src="https://user-gold-cdn.xitu.io/2017/12/19/1606ec3d306ab28f?imageView2/0/w/1280/h/960/format/webp/ignore-error/1">

parse

parse会用正则等方式解析template模版中的指令、class、style等数据,形成AST。

optimize

optimize的主要作用是标记static静态节点,这是Vue在编译过程中的一处优化,后面当update更新界面时,会有一个patch过程,diff算法会直接跳过静态节点,从而减少了比较的过程,优化了patch性能。

generate

generate是将AST转化为render function字符串的过程,得到结果是render的字符串以及staticRenderFns字符串。

在经历过parseoptimizegenerate三个阶段后,组件中就会存在渲染VNode所需的render function了。

响应式

接下来就是Vue.js响应式核心部分了

<img src="https://user-gold-cdn.xitu.io/2017/12/19/1606edad5ca9e23d?imageView2/0/w/1280/h/960/format/webp/ignore-error/1">

这里的gettersetter已经介绍过,在_init时通过Object.defineProperty进行了绑定,它使得当被设置的对象被读取时会执行getter函数,而在当被赋值时执行setter函数。

当render function被渲染时,因为会读取所需对象的值,所以会触发getter函数进行[依赖收集],依赖收集的目的是将观察者Watcher对象存放到当前闭包中的订阅者Dep的subs中。形成如下所示的这样一个关系。

<img src="https://user-gold-cdn.xitu.io/2017/12/21/160770b2a77e084e?imageView2/0/w/1280/h/960/format/webp/ignore-error/1">

当修改值的时候,会触发对应的settersetter通知之前依赖收集的Dep中的每一个Watcher,告诉它们自己的值改变了,需要重新渲染视图。这时候这些Watcher就会开始调用update来更新视图,当然这中间还有一个patch的过程以及使用队列来异步更新的策略,这个后面再说。

Virtual DOM

我们知道,render function会被转化为VNode节点。Virtual DOM其实就是一棵以JS对象(VNode节点)为基础的树,用对象属性来描述节点,实际上它只是一层对真实DOM的抽象。最终可以通过一系列操作使这棵树映射到真实环境上。由于Virtual DOM是以JS对象为基础而不依赖真实平台环境,所以它具有跨平台的能力。举个例:

js
{
  tag: 'div',
  children: [
    {
      tag: 'a',
      text: 'click me'
    }
  ]
}

渲染后得到

html
&lt;div>&lt;a>click me&lt;/a>&lt;/div>

实际上,节点还会有更多的属性来对节点进行标志,如isStatic(代表是否为静态节点)、isComponent(代表是否为注释节点)等。

更新视图

<img src="https://user-gold-cdn.xitu.io/2017/12/21/1607715c316d4922?imageView2/0/w/1280/h/960/format/webp/ignore-error/1">

前面我们说到,在修改一个对象值的时候,会通过setter -> Wathcer -> update的流程来修改对应的视图,那么最终是如何更新视图的呢?

当数据变化后,执行render function就可以得到一个新的VNode节点,我们如果想要得到新的视图,最简单粗暴的方法就是直接解析这个新的VNode节点,然后用innerHTML直接全部渲染到真实的DOM中。但其实我们只对其中一小块内容进行了修改,这样做非常浪费。

那么为什么不能只修改那些[改变了的地方]呢?这时就要介绍patch了。我们将新的VNode与旧的VNode一起传入patch进行比较,经过diff算法得出它们的差异。最后我们只需将这些差异的对应DOM进行修改即可。

再看全局

<img src="https://user-gold-cdn.xitu.io/2017/12/19/1606e7eaa2a664e8?imageView2/0/w/1280/h/960/format/webp/ignore-error/1">

大脑中是不是有一个大概的脉络了呢? 那么我们就学习下一模块吧!

共 20 个模块,1301 篇 Markdown 文档。