vue工作原理分析

 

 

初始化

在 new Vue() 时会调⽤用_init()进⾏行行初始化，会初始化各种实例例⽅方法、全局⽅方法、执⾏行行⼀一些⽣生命周期、

初始化props、 data等状态。其中最重要的是data的「响应化」处理理。

初始化之后调⽤用 $mount 挂载组件，主要执⾏行行编译和⾸首次更更新

编译

编译模块分为三个阶段

1. parse：使⽤用正则解析template中的vue的指令(v-xxx) 变量量等等 形成抽象语法树AST

2. optimize：标记⼀一些静态节点，⽤用作后⾯面的性能优化，在diff的时候直接略略过

3. generate：把第⼀一部⽣生成的AST 转化为渲染函数 render function

虚拟dom

Virtual DOM 是react⾸首创， Vue2开始⽀支持，就是⽤用 JavaScript 对象来描述dom结构，数据修改的时

候，我们先修改虚拟dom中的数据，然后数组做diff，最后再汇总所有的diff，⼒力力求做最少的dom操作，

毕竟js⾥里里对⽐比很快，⽽而真实的dom操作太慢

 

 

Vue的工作原理思路分析：

1、 首先使用Object. defineProperty（）的原理来实现劫持监听所有属性

2、 每次在页面中使用一个属性就会产生一个watcher

3、 而watcher是通过dep来管理的，相同的属性的实例在一个dep中统一管理

4、 当其中一个属性变化的时候会通知dep变化，再通知dep中管理的对应的watcher进行变化