vue2.x源码 数据驱动视图

版本

Vue.js v2.6.14

从生命周期入手

created生命周期执行完之后执行vm.$mount

1. 先执行beforeMount
2. updateComponent更新组件接口
3. vm._update执行diff算法
4. vm._render()执行组件render方法，在编译阶段把组件中的template转化为render()

Watcher

1. new Watcher主要收集依赖是执行get方法
2. getter等于updateComponent pushTarget相当于给全局变量Dep.target赋值为当前Watcher pushTarget是弹出当前Watcher
3. 执行getting相当于执行当前组件render render类似与图二结构
4. 在获取data里面的数据的时候，由于data被劫持 会执行get方法
   
   

Dep.target 是当前组件的Watcher

5. 把当前组件watcher存在对应属性的依赖里面
6. 当数据更新后执行dep.notify()
7. 遍历依赖 通知执行update 执行diff

整体流程