Vue.js 运行机制全局概览浅读

前一段时间看了一下笔者写的这个,写的还是很好地,记录一下。

1.总体流程

初始化及挂载 

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

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

编译 

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

parse:用正则解析template模板中的指令、class、style等数据,形成AST(抽象语法树)。

optimize :用来标记静态节点,将来更新视图的时候,通过diff算法会跳过静态节点,达到优化的一个目的。

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

响应式

当 render function 被渲染的时候,因为会读取所需对象的值,所以会触发 getter 函数进行「 依赖收
集」,「 依赖收集」的目的是将观察者 Watcher 对象存放到当前闭包中的订阅者 Dep 的 subs 中。

形成如下所示的这样一个关系。

在修改对象的值的时候,会触发对应的 setter, setter 通知之前「 依赖收集」得到的 Dep 中的每一个
Watcher,告诉它们自己的值改变了,需要重新渲染视图。这时候这些 Watcher 就会开始调用 update 来
更新视图。

Virtual DOM

Virtual DOM 其实就是一棵以 JavaScript 对
象( VNode 节点)作为基础的树,用对象属性来描述节点,实际上它只是一层对真实 DOM 的抽象。

更新视图 

patch()方法对比新VNode和旧VNode,通过diff算法得到差异,进行对应修改。

https://www.666ss.club/blog

原文地址:https://www.cnblogs.com/sxdjy/p/10365548.html