Vue源码流程总结

1. Vue的初始化过程

1. 初始化生命周期

2. 初始化事件系统

3. 初始化state，依次处理props, methods, data, computed ...

export function initState(vm: Component) {
  const opts = vm.$options
  if (opts.props) initProps(vm, opts.props)              
  if (opts.methods) initMethods(vm, opts.methods)        
  if (opts.data) initData(vm)                            
  if (opts.computed) initComputed(vm, opts.computed)     
  if (opts.watch) initWatch(vm, opts.watch)              
  }
}

4. 开始渲染 _mount() => _render() => 返回vdom => _update() => _patch() 更新dom

2. Vue数据响应式原理

initData 初始化用户数据

observe 将数据进行观测

new Observer 定义观测对象

this.walk(value) 循环处理对象的所有key

defineReactive  将对象的指定key定位为响应式

Object.defineProperty 在get和set方法种定义响应式，在get方法种用 Dep.depend 进行依赖收集
在set方法中用 dep.notify 进行依赖更新通知

3. Vue数组变化检测

 

对数组类型的数据，进行方法重写，将原数组方法替换为自定义的同名方法，在自定义方法中调用原方法取值，并进行依赖更新通知。

依然是使用 dep.notify 方法

 

initData 初始化用户数据

 

observe 观测用户数据

 

new Observer 定义观测对象

 

protoAugment 将数组的原型方法指向重写的原型

 

重写数组的原型方法，并添加变更通知

 

深度观测数组中的每一项引用类型

 

4. Vue异步渲染步骤

// src/core/observer/dep.js
let uid = 0            // Dep实例的id，为了方便去重

export default class Dep {
  static target: ?Watcher           // 当前是谁在进行依赖的收集
  id: number
  subs: Array<Watcher>              // 观察者集合
 
  constructor() {
    this.id = uid++                             // Dep实例的id，为了方便去重
    this.subs = []                              // 存储收集器中需要通知的Watcher
  }

  addSub(sub: Watcher) { ... }  /* 添加一个观察者对象 */
  removeSub(sub: Watcher) { ... }  /* 移除一个观察者对象 */
  depend() { ... }  /* 依赖收集，当存在Dep.target的时候把自己添加观察者的依赖中 */
  notify() { ... }  /* 通知所有订阅者 */
}

const targetStack = []           // watcher栈

export function pushTarget(_target: ?Watcher) { ... }  /* 将watcher观察者实例设置给Dep.target，用以依赖收集。同时将该实例存入target栈中 */
export function popTarget() { ... }  /* 将观察者实例从target栈中取出并设置给Dep.target */

pushTaget和popTarget是和Dep类同级的方法，直接暴露给其他类使用

dep.notify() dep通知更新

 

subs[i].update() dep中的watcher调用update方法

 

queueWatcher 将watcher加入到队列中

 

nextTick(flushSchedulerQueue) 在下一个tick，flush队列，执行所有的watcher方法

 

5. nextTick方法实现原理

 

nextTick(cb) nextTick方法传入回调

 

callbacks.push(cb) 数组存储所有回调

 

timerFunc 在timerFunc中调用回调，timerFunc是用microTask模拟的，例如Promise.then, MutationObserver,setImmedate,setTimeout等

 

返回Promise 可以执行then方法

 

6. Vue的computed实现过程

 

initComputed

 

new Watcher

 

defineComputed

 

createComputedGetter 在此方法中进行依赖收集，和依赖计算，即执行watcher.evaluate方法

 

用户取值 dirty = false 使用缓存，返回上次结果，dirty = true watcher.evaluate()，重新计算结果

 

7. Vue的响应式更新过程

 

model更新 set方法 -> 触发Dep.notify -> Dep的subs中的Watcher -> Watcher调用update -> queueWatcher -> nextTick -> flushQueueWatcher -> 生成新的Vnode -> 新VNode 与 老VNode 进行diff -> patch 将差异更新到视图

 

diff是patch过程的核心。diff算法有2个显著特点：

 

1. 只会同级进行比较，不会垮层级比较

2. 在diff列表过程中，循环从两边向中间收拢

 

 

参考：

https://blog.csdn.net/MrWeb/article/details/105781370

https://www.cnblogs.com/kidney/p/8018226.html