Vue2.x 源码阅读思路笔记

小灰灰 2022-03-21 12:22 268阅读 0赞

目前公司主要技术栈是Vue，为了更好的使用，完成的了解Vue的原理是很有必要的。刚开始直接阅读Vue源码时，发现自己阅读的效率很低。偶然间（其实不偶然）  
在Github中发现了这份笔记 [如何学习Vue2源码][Vue2]，完整的记录了实现Vue框架的完整过程。

我fork了作者的项目，跟着作者的思路[如何学习Vue2源码][Vue2]，完整走了一遍如何实现一个2.X版本的Vue。阅读过程中我拉了一个新分支[如何学习Vue2源码（带注释）][Vue2 1]，添加了详细的注释，方便自己记忆。通过阅读作者的github，节省自己大量时间~

下面内容为自己的笔记，自己整理思路用。  
建议阅读这位大神的github：[如何学习Vue2源码][Vue2]。  
我的阅读记录： [如何学习Vue2源码（带注释）][Vue2 1]

# Virtual DOM #

> 参考：[https://mp.weixin.qq.com/s/QXQAPEXojB9Zvri6GdXcJg][https_mp.weixin.qq.com_s_QXQAPEXojB9Zvri6GdXcJg]

*  生成virtual DOM
    
     *  用js对象模拟DOM树（html语法树？）
 *  render真实DOM
    
     *  virtual对象的render函数
 *  生成新的virtual DOM
 *  render新的真实DOM
 *  diff新旧真实DOM，保存变更的patches
    
     *  diff算法复杂度问题
     *  深度优先遍历，每遍历一个node同时跟新的树比较，记录差异
     *  差异类型，不同类型处理方式不一致
     *  列表对比算法，调换顺序最优解？
 *  在旧的真实DOM上应该patches
    
     *  不同的patch类型，不同的处理方式

# HTML parser #

*  Token解析
    
     *  HTML字符串 --> Token数组
 *  语法树解析
    
     *  Token数组 --> HTML AST
 *  VNode树
 *  Dom树

> 首先有2个重要的概念要留意，将会贯穿后续的文章：静态、动态(runtime)。  
> 我们给一下以下简单的定义：  
> 静态: 任何时刻运行转换函数，同一个输入得到的数据结构都是一致的  
> 动态: 存在某一时刻运行转换函数，同一个输入得到的数据结构是不一致的  
> 所以上边所有涉及到的数据结构可以归为：  
> 字符串 是 静态 的  
> HTMLElment Token 流 是 静态 的  
> AST 树 是 静态 的  
> VNode 树 是 动态 的  
> DOM 树 是 动态 的

# 构建一个最简单的数据绑定的Vue #

AST树、VNode render、VNode三者之间的渐进关系  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2FhYWFhYWxpYW5n_size_16_color_FFFFFF_t_70]

# VNode 的属性 attrs 和 props #

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2FhYWFhYWxpYW5n_size_16_color_FFFFFF_t_70 1]

# 控制语句 #

v-if v-else-if v-else v-for  
新增语法步骤同上及几章：

*  parse阶段增加解析v-for v-if部分的代码，在AST上添加这部分语法的属性
 *  生成render函数阶段，同样要增加将AST转换成render函数的fn，
 *  生成Vnode阶段，在单用render函数的时候，需要将v-if语法转换为实际的VNode对象
 *  path阶段 将VNode树转换成DOM树

# 响应式原理 #

基于Object.defineProperty实现data的数据监听，set 写操作的时候，我们要调用 vm.\_update() 进行视图更新。

[深入理解Vue的computed实现原理及其实现方式][Vue_computed]

# 深度追踪依赖变化 #

obsever、dep、watch之间的关系：[https://github.com/coderzzp/vue-come-true/tree/master/vue-come-true-First][https_github.com_coderzzp_vue-come-true_tree_master_vue-come-true-First]

[深入浅出 - vue变化侦测原理 ][- vue_]

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2FhYWFhYWxpYW5n_size_16_color_FFFFFF_t_70 2]  
详细源码分析：[https://segmentfault.com/a/1190000014360080][https_segmentfault.com_a_1190000014360080]

*  收集依赖流程：

observe -> 
    walk -> 
    defineReactive -> 
    get -> 
    dep.depend() -> 
    watcher.addDep(new Dep()) -> 
    watcher.newDeps.push(dep) -> 
    dep.addSub(new Watcher()) -> 
    dep.subs.push(watcher)

*  视图更新流程：

set -> 
    dep.notify() -> 
    subs[i].update() -> 
    watcher.run() || queueWatcher(this) -> 
    watcher.get() || watcher.cb -> 
    watcher.getter() -> 
    vm._update() -> 
    vm.__patch__()

# 事件处理 #

时间的处理与之前属性的处理基本一致：

**a. 以下 HTML:**

<button v-on:click="clickme">click me</button>

**b. 解析后得到的 AST 节点:**

evtAstElm = { 
      type: 1,
      tag: 'button',
      events: { 
        'click': {  value: 'clickme' }
      },
      children: [ /* blabla.. */ ]
    }

**c. 生成的 render code:**

_c('button', {  
      on: {  "click": clickme } 
    }, [ _v("click me")] )

**d. 得到一个带属性的 VNode 节点:**

VNode { 
      tag: 'button',
      data: { 
        on: {  "click": clickme } 
      },
      children: [ /* blabla.. */ ]
    }

**c. 生成的 render code ( clickme 函数需要代理到当前的 vm 对象上，同时绑上 vm 这个运行时 context):**

_c('button', {  
      on: {  "click": clickme } 
    }, [ _v("click me")] )

**e. 最后渲染在 dom 上的时候:**

buttonDom.addEventListener('click', clickme)

> 源码的事例 [https://github.com/raphealguo/how-to-learn-vue2-blob/blob/master/articles/2.4.1.md][https_github.com_raphealguo_how-to-learn-vue2-blob_blob_master_articles_2.4.1.md]

# 生命周期 #

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2FhYWFhYWxpYW5n_size_16_color_FFFFFF_t_70 3]

1.  new Vue()
2.  初始化生命周期、往vue实例上绑事件、方法  
    这里只的事件、方法，并不是用户自己绑定的method、data之类的数据，而是Vue实例本身的一些内部方法。
3.  执行钩子：`beforeCreate()`  
    `beforeCreate()`钩子中无法访问到，data、method、$el等数据  
    $el挂载点，也就是vue生成的dom挂载的地方
4.  初始化状态  
    简单来说就是初始化method、data，监听数据之类的操作
5.  执行钩子：`created()`  
    data、method方法已经能访问了，但是还没有挂载点信息
6.  是否有挂载点？  
    有：获取模板信息(有无template，两种情况)，`编译 -> vnode -> render函数 -> Dom -> diff -> patch`  
    无：暂停执行，知道使用`.$mount()`手动挂载后，继续执行
7.  执行钩子：`beforeMount()`  
    `.$el`中已经有挂载点了，但是dom资源还没有渲染
8.  将VNode渲染成Dom，并挂载到挂载点上。  
    `$el`得到更新。
9.  执行钩子`mounted()`  
    挂载完成。
10. data改变时，触发监听。
11. 执行`beforeUpdate()`  
    此时仅监听到了data改变，还未做出操作
12. `diff VNode -> patch`  
    对比VNode变化，更新dom
13. 检测到页面销毁（`.$destroy()`被执行）
14. 执行钩子`beforeDestroy()`
15. 移除data、mothod、watcher、components、event listener等
16. 执行钩子`destroyed()`

[Vue2]: https://github.com/raphealguo/how-to-learn-vue2-blob
[Vue2 1]: https://github.com/yuliangGit/how-to-learn-vue2/tree/add-notes
[https_mp.weixin.qq.com_s_QXQAPEXojB9Zvri6GdXcJg]: https://mp.weixin.qq.com/s/QXQAPEXojB9Zvri6GdXcJg
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2FhYWFhYWxpYW5n_size_16_color_FFFFFF_t_70]: /images/20220321/9242b871446b4e0aa9a7c19a00dcf03c.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2FhYWFhYWxpYW5n_size_16_color_FFFFFF_t_70 1]: /images/20220321/67215d96d71f4d41bdffa8f1ce057fb5.png
[Vue_computed]: https://blog.seosiwei.com/detail/37
[https_github.com_coderzzp_vue-come-true_tree_master_vue-come-true-First]: https://github.com/coderzzp/vue-come-true/tree/master/vue-come-true-First
[- vue_]: https://github.com/berwin/Blog/issues/17
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2FhYWFhYWxpYW5n_size_16_color_FFFFFF_t_70 2]: /images/20220321/82b5fc34068641868759afd94358fb83.png
[https_segmentfault.com_a_1190000014360080]: https://segmentfault.com/a/1190000014360080
[https_github.com_raphealguo_how-to-learn-vue2-blob_blob_master_articles_2.4.1.md]: https://github.com/raphealguo/how-to-learn-vue2-blob/blob/master/articles/2.4.1.md
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2FhYWFhYWxpYW5n_size_16_color_FFFFFF_t_70 3]: /images/20220321/4a5b0c07e00e49278b7831ac58da9777.png