- 创建Vue实例对象,记录传入的选项,并注入到Vue实例当中
- 创建observer
- observer数据劫持,通过
Object.defineProperty
把data中属性中添加getter和setter,每个属性都还会创建一个dep对象,而此时getter和setter不会执行。 - 创建dep对象时,会创建一个subs数组,用来存储所有观察者,就是后面要说的watcher
- observer数据劫持,通过
- 创建compiler
- 解析指令,解析差值表达式。
- 页面首次加载,会分别判断是文本节点还是元素节点,做不同处理后,渲染视图。
- 渲染视图前,会触发observer里的getter方法,getter方法里会判断Dep里是否有target属性,现在还没有这个属性。
- 所有依赖数据的地方,都会实例化watcher,当数据变化,都会再更新这块数据
- 实例化watcher时,会把watcher本身记录到刚才说到的,Dep的target属性中。
- 存储初始化的值,而存储的时候,会触发observer的getter方法,在getter里,会调用dep的addSubs,把watcher存到subs数组中。
- 实例化watcher时,还要传入回调函数,为后续更新视图做准备。
- 更新视图
- 触发observer里的setter方法,setter里调用dep的notify通知,遍历watcher调用watcher里的update方法
- 这个方法先判断前后两个值是否发生了变化,如果发生变化,就会执行实例化时,传入的回调函数,进行修改视图
- 页面首次加载,通过compiler渲染视图,数据变化时通过watcher渲染视图