Vue 2.0 源码解读笔记

Vue

概述

Vue 3.0 已经正式作为 Vue 默认版本了,Vue 2.0 估计也逐步要在前端开发的历史长河中慢慢退场。但作为一个前端开发的我,一直没有好好的研究一下 Vue 2.0 的原理,在这里补充一下这方面的知识,以便日后可以更好地理解 Vue 3.0。

本内容是阅读笔记,核心内容并非原创,皆是通过对网络上一些关于 Vue 文章的阅读,在此基础之上进行的个人理解和重点笔录。

Vue 初始化(_init)

new Vue() 中包含着一个 Vue 初始化的过程,这个过程在 Vue.prototype._init 中编写。 过程大致如下:

  1. 初始化生命周期
  2. 初始化事件
  3. 初始化 render
  4. 调用 beforeCreate 钩子函数(所以这时获取不到 vm 的各种 data/props/computed/watch/methods 等等状态)
  5. 初始化 inject
  6. 初始化状态(data/props/computed/watch/methods 等)
  7. 初始化 provide
  8. 调用 created 钩子函数
  9. 执行 $mount 挂在操作

编译(compile)

分为 parse /optimize/generate 三个阶段,目的是为了获得 render fucntion

  1. parse 用正则等方法生成 AST 抽象语法树
  2. optimize 是标记 static 静态节点,方便进行组件更新时的 diff 优化,优化后进行 patch 过程,渲染更改到页面上
  3. generate 是将优化后的 AST 进行转换,生成 render function(我在想这个 render function 和组件中的 render 方法有什么关系)

之后,就得到 VNode 所需要的 render function。

响应式

当 render function 被渲染时,就会读取对象中的值,而对象中是有设置了 Getter 函数的,这样就可以进行依赖收集(注意这是一个从末端到顶端的依赖收集过程),依赖收集起来后,放在 Vue 维护的一个由 Watcher 生成的 Subscriptions 队列中(Watcher 是通过 Setter 函数调用的,这样 Watcher 和 Subscriptions 分别对应着响应式的 Setter 和 Getter 属性)。

这里为什么会有一个依赖收集的过程呢,应该是由于 Vue 组件中有大量的 Setter 和 Getter,这些 Setter 和 Getter 只是监听对象属性的变化,但是要不要进行数据处理,以更改页面,还要通过依赖收集这样一个过程完成。

更新视图

更新视图时,是通过 Setter > Watcher > Update 这样的一个调用链进行的,在更新时,会通过 diff 算法对比新旧 VNode 的差异,对差异部分进行 DOM 修改。

评论

0/500

全部评论 (0)

这里没有评论,要抢沙发吗?