vue的整个实现流程
大体的执行方法如下：
- new Vue
- init (合并配置，初始化生命周期，初始化事件中心，初始化渲染，初始化 data、props、computed、watcher 等等)
- $mount
- compile
- render
- vnode
- patch
- DOM
响应式原理
在render过程的时候，会通过defineReactive为data和props添加getter,setter，同时内部会new 一个Dep实例。
当我们访问到这些数据的时候，就会触发depend来收集依赖，如果修改某些数据的时候，就会触发notify来通知订阅者来做一个updata的逻辑。
对于computed这个属性，内部会创建一个computed watcher，每个computed会new一个Dep实例，当我们去访问computed的时候，也会触发depend收集依赖，当依赖值有变化的时候，会重新计算结果，这里会对结果做处理，当计算属性最终计算的值发生变化才会触发渲染 watcher 重新渲染
对于watch，实际上就是会创建一个user watcher，可去理解为用户自己的watcher，可以去观测data或是computed的变化，当观测到有变化的时候，会遍历所有的user watcher，调用update，如果新旧值对比有变化，就会执行run，就会执行用户自己定义的callback。
每一个组件都会执行$mount方法，在渲染成 vnode的过程中，会定义一个render watcher，会访问定义在data或是computed等这些数据，这render watcher就会作为订阅者订阅这些数据，当数据有变化的时候，就会触发这些数据的Dep.notify，接着就会触发rander watcher的update，最终就会执行updataComputed重新渲染。
- 解析模板成render函数
- 使用with
- 模板中的所有信息都被render函数包含
- 模板中用到的data中的属性，都变成了js变量
- 模板中的v-model v-for v-on都变成了js逻辑
- render函数返回vnode
- 响应式开始监听
- Object.defineProperty
- 将data等的属性代理到vm上
- 首次渲染，显示页面，且绑定依赖
- 初次渲染，执行updateComponent，执行vm._render()
- 执行render函数，会访问到页面js变量
- 会被响应式的get方法监听到
- 执行updateComponent，会走到vdom的patch方法
- patch将vnode渲染成DOM，初次渲染完成
- data属性变化，触发rerender
- data中有很多属性，有些被用到，有些可能不被用到
- 被用到的会走get，不被用到的不会走到get
- 未走到get中的属性，set的时候我们也无需要关心
- 避免不必要的重复渲染
网友评论