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进行变化

原文地址:https://www.cnblogs.com/wyongz/p/11446770.html