vue响应式原理源码分析

vue2.x响应式

基本概念介绍：
Vue框架是如何实现变量的变化侦测的呢？

Object 利用了 Object.defineProperty 进行变量的getter与setter拦截，但数组的实现与 Object 有所不同，下面会从源码层面具体讨论这两种类型的变量如何实现变化侦测。

首先我们需要先了解Vue源码中的三个类：

一、Observer
Observer类负责将复杂类型的变量转化成响应式数据，转化为响应式数据的变量都会带有 '__ob__'  属性，所以 '__ob__' 属性可以作为判断响应式数据的标识。

举个例子：

...   data() {     return {       list: [1, 2, 3],       obj:{         a: 1,         b: 2,         c: 3       },       num: 1     };   },   created() {     console.log(this);   } ...

输出台得到的结果：

因为list 和 obj 是复杂类型，被Observer处理成了响应式数据，带有'__ob__' 属性，而num是简单数据类型，所以没有被Observer处理。

 

二、Watcher
当我们侦测到数据发生变化时，需要通知给谁呢? 

需要用到这个数据的地方有很多，可能是我们自定义的，也有可能是模板上的，我们把这些地方统称为watcher，可以理解成依赖。

 

三、Dep
dep的作用在于收集依赖，当侦测到数据发生变化时，dep会通知他收集的所有watch。

dep 与 watch是多对多的关系，一个dep可以收集多个watch，一个watch可以订阅多个依赖。

 

知道了这三个类，我们就能理解这张流程图：

 

数据data进过observer处理变成影响式数据，数据的getter与setter被拦截。

每当有watcher到data读取数据时，会被getter拦截，watcher被当做依赖被dep收集。

每当Data的数据发生变化时会被setter拦截，setter会通知Dep,Dep再通知它收集的所有watcher, watcher再调用它的回调函数。

但我们前面讲过数组的变化侦测实现原理有所不同，当我们通过key读取数组时，一样会被getter拦截。

但是由于Object.defineProperty的setter只能做到对每个key进行拦截，当数组调用原生方法如push或pop时，数组值发生变化，

Object.defineProperty却拦截不到，所以数组值的变化侦测只能通过重写数组的原生方法实现拦截。

接下来我们进一步分析源码：

重写Array原生方法

// 拷贝数组的原型到原型链上 const arrayProto = Array.prototype export const arrayMethods = Object.create(arrayProto)    // 需要重写的方法名 const methodsToPatch = [   'push',   'pop',   'shift',   'unshift',   'splice',   'sort',   'reverse' ]    def (obj: Object, key: string, val: any, enumerable?: boolean) {   Object.defineProperty(obj, key, {     value: val,     enumerable: !!enumerable,     writable: true,     configurable: true   }) }    methodsToPatch.forEach(function (method) {   // 保存数组原有方法   const original = arrayProto[method]   // 重写方法   def(arrayMethods, method, function mutator (...args) {     // 调用数组原有方法     const result = original.apply(this, args)     // 取出__ob__属性上的observer实例     const ob = this.__ob__     let inserted     switch (method) {       case 'push':       case 'unshift':         inserted = args         break       case 'splice':         inserted = args.slice(2)         break     }     // inserted 代表新增的数据，将这部分数据也处理成响应式数据     if (inserted) ob.observeArray(inserted)     // 通知dep收集的所有watcher，数组值发生了改变     ob.dep.notify()     return result   }) })

 

Dep类

let uid = 0 export default class Dep {   static target: ?Watcher; //当前正在处理的watcher   id: number; // 唯一标识   subs: Array<Watcher>; // 收集的watcher      constructor () {     this.id = uid++     this.subs = []   }   // 收集watcher   addSub (sub: Watcher) {     this.subs.push(sub)   }   // 移除watcher   removeSub (sub: Watcher) {     remove(this.subs, sub)   }   // 使watcher订阅当前dep   depend () {     if (Dep.target) {       Dep.target.addDep(this)     }   }   // 通知收集的所有watcher   notify () {     const subs = this.subs.slice()     if (process.env.NODE_ENV !== 'production' && !config.async) {       subs.sort((a, b) => a.id - b.id)     }     for (let i = 0, l = subs.length; i < l; i++) {       subs[i].update()     }   } } // 初始化数据 Dep.target = null const targetStack = []    // 重点！当外部调用pushTarget传入一个watcher时 // 该watcher置于栈顶，Dep.target赋值为该watcher // 此时如果调用Dep实例的depend方法，该Dep实例会被watcher订阅 export function pushTarget (target: ?Watcher) {   targetStack.push(target)   Dep.target = target } // 弹出最顶层的watcher，Dep.target赋值为下一个watcher export function popTarget () {   targetStack.pop()   Dep.target = targetStack[targetStack.length - 1] }

 

watcher

let uid = 0 export default class Watcher {   vm: Component; // 组件实例   expression: string;   cb: Function; // 回调函数   id: number; // 唯一标识   deep: boolean; // 是否深度监听   user: boolean; // 是否用户自定义的watcher   lazy: boolean; // 是否马上监听变量   sync: boolean; // 是否马上执行   dirty: boolean;   active: boolean;   deps: Array<Dep>; // 目前订阅当前watcher的dep数组   newDeps: Array<Dep>; // 新订阅当前watcher的dep数组   depIds: SimpleSet; // 目前订阅当前watcher的dep的id数组   newDepIds: SimpleSet; // 新订阅当前watcher的dep的id数组   before: ?Function;   getter: Function; // 调用可获取监听对象的最新值   value: any; // 监听对象的值      constructor (     vm: Component,     expOrFn: string | Function, // 监听对象，可能是字符串 a.b.c的形式或者一个函数     cb: Function,     options?: ?Object, // 配置参数     isRenderWatcher?: boolean   ) {     this.vm = vm     if (isRenderWatcher) {       vm._watcher = this     }     vm._watchers.push(this)     // 初始化参数     if (options) {       this.deep = !!options.deep       this.user = !!options.user       this.lazy = !!options.lazy       this.sync = !!options.sync       this.before = options.before     } else {       this.deep = this.user = this.lazy = this.sync = false     }     this.cb = cb     this.id = ++uid // id递增     this.active = true     this.dirty = this.lazy // for lazy watchers     this.deps = []     this.newDeps = []     this.depIds = new Set()     this.newDepIds = new Set()     this.expression = process.env.NODE_ENV !== 'production'       ? expOrFn.toString()       : ''     if (typeof expOrFn === 'function') {       this.getter = expOrFn     } else {       // parsePath函数用于解析a.b.c字符串，返回值为a[b][c]       this.getter = parsePath(expOrFn)       if (!this.getter) {         this.getter = noop // noop 是一个返回空值的函数         process.env.NODE_ENV !== 'production' && warn(           `Failed watching path: "${expOrFn}" ` +           'Watcher only accepts simple dot-delimited paths. ' +           'For full control, use a function instead.',           vm         )       }     }     // 只要不是lazy watcher,在watcher构造函数中就会调用get方法     this.value = this.lazy       ? undefined       : this.get()   }      get () {     // 调用pushTarget方法，使Dep.target赋值为当前watcher，开始订阅dep     pushTarget(this)     let value     const vm = this.vm     try {       // 调用getter读取当前监听对象的值，此时会被getter拦截       // watcher作为依赖被收集，同时订阅监听对象的dep       value = this.getter.call(vm, vm)     } catch (e) {       if (this.user) {         handleError(e, vm, `getter for watcher "${this.expression}"`)       } else {         throw e       }     } finally {       // 如果是深度监听，则遍历读取每个子属性,原理同上       if (this.deep) {         traverse(value)       }       popTarget() // 取消监听       this.cleanupDeps()     }     return value   }      // 订阅dep   addDep (dep: Dep) {     const id = dep.id     if (!this.newDepIds.has(id)) {       this.newDepIds.add(id)       this.newDeps.push(dep)       if (!this.depIds.has(id)) {         dep.addSub(this)       }     }   }      // 将deps清空，newDeps赋值给deps   cleanupDeps () {     let i = this.deps.length     while (i--) {       const dep = this.deps[i]       if (!this.newDepIds.has(dep.id)) {         dep.removeSub(this)       }     }     let tmp = this.depIds     this.depIds = this.newDepIds     this.newDepIds = tmp     this.newDepIds.clear()     tmp = this.deps     this.deps = this.newDeps     this.newDeps = tmp     this.newDeps.length = 0   }      // 收到通知，调用run()   update () {     /* istanbul ignore else */     if (this.lazy) {       this.dirty = true     } else if (this.sync) { // 同步马上调用       this.run()     } else { // queueWatcher会在下一次事件循环中调用 run()       queueWatcher(this)     }   }      // 调用回调函数   run () {     if (this.active) {       const value = this.get()       if (         value !== this.value ||         // Deep watchers and watchers on Object/Arrays should fire even         // when the value is the same, because the value may         // have mutated.         isObject(value) ||         this.deep       ) {         // set new value         const oldValue = this.value         this.value = value         if (this.user) {           try {             this.cb.call(this.vm, value, oldValue)           } catch (e) {             handleError(e, this.vm, `callback for watcher "${this.expression}"`)           }         } else {           this.cb.call(this.vm, value, oldValue)         }       }     }   }   ... }

Observer

// arrayMethods是重写了数组方法的对象 const arrayKeys = Object.getOwnPropertyNames(arrayMethods)    // 监听开关 export let shouldObserve: boolean = true    export class Observer {   value: any; // 需要被转化成响应式数据的对象   dep: Dep; // 重点！用于收集数组的依赖，只有数组会通过这个Dep通过watcher。   vmCount: number; // number of vms that have this object as root $data      constructor (value: any) {     this.value = value     this.dep = new Dep()     this.vmCount = 0     // 当前Observer实例被挂到数据的'__ob__'，也标识了这个数据成为响应式数据     def(value, '__ob__', this)     if (Array.isArray(value)) {       if (hasProto) { // 如果浏览器支持__proto__，直接将arrayMethods挂到value.__proto__上         protoAugment(value, arrayMethods)       } else { // 不支持__proto__，则将arrayMethods的方法直接加到value上         copyAugment(value, arrayMethods, arrayKeys)       }       // 进一步将数组中元素也变成响应式数据       this.observeArray(value)     } else {       // 非数组，则是Object       this.walk(value)     }   }      walk (obj: Object) {     const keys = Object.keys(obj)     for (let i = 0; i < keys.length; i++) {       defineReactive(obj, keys[i])     }   }      observeArray (items: Array<any>) {     for (let i = 0, l = items.length; i < l; i++) {       observe(items[i])     }   } }       function protoAugment (target, src: Object) {   /* eslint-disable no-proto */   target.__proto__ = src   /* eslint-enable no-proto */ }    function copyAugment (target: Object, src: Object, keys: Array<string>) {   for (let i = 0, l = keys.length; i < l; i++) {     const key = keys[i]     def(target, key, src[key])   } }    // 如果value有__ob__，说明已经是响应式数据，无需处理，否则需要通过Observer类进行处理 export function observe (value: any, asRootData: ?boolean): Observer | void {   if (!isObject(value) || value instanceof VNode) {     return   }   let ob: Observer | void   if (hasOwn(value, '__ob__') && value.__ob__ instanceof Observer) {     ob = value.__ob__   } else if (     shouldObserve &&     !isServerRendering() &&     (Array.isArray(value) || isPlainObject(value)) &&     Object.isExtensible(value) &&     !value._isVue   ) {     ob = new Observer(value)   }   if (asRootData && ob) {     ob.vmCount++   }   return ob }    // 封装Object.defineProperty export function defineReactive (   obj: Object,   key: string,   val: any,   customSetter?: ?Function,   shallow?: boolean ) {   // defineReactive方法内部的dep，用于收集当前Key的依赖   const dep = new Dep()      const property = Object.getOwnPropertyDescriptor(obj, key)   if (property && property.configurable === false) {     return   }      // 保存原有getter setter   const getter = property && property.get   const setter = property && property.set   if ((!getter || setter) && arguments.length === 2) {     val = obj[key]   }      // 如果val是复杂对象，则转为响应式数据并取出他的'__ob__'上的Observer实例   let childOb = !shallow && observe(val)   Object.defineProperty(obj, key, {     enumerable: true,     configurable: true,     get: function reactiveGetter () {       const value = getter ? getter.call(obj) : val          // 如果有正在处理的watcher       if (Dep.target) {         // 当前key的dep收集watcher         dep.depend()         // val的dep收集watcher         if (childOb) {           childOb.dep.depend()           // 最新值如果是数组，数组中的复杂对象也需要收集watcher           if (Array.isArray(value)) {             dependArray(value)           }         }       }          return value     },     set: function reactiveSetter (newVal) {       // 读取旧值       const value = getter ? getter.call(obj) : val       // 对比新旧值，无变化则return，无需通知       if (newVal === value || (newVal !== newVal && value !== value)) {         return       }       if (process.env.NODE_ENV !== 'production' && customSetter) {         customSetter()       }       if (getter && !setter) return       if (setter) {         setter.call(obj, newVal)       } else {         val = newVal       }       // 将新值处理成响应式数据       childOb = !shallow && observe(newVal)       // 值发生变化，通知当前key的dep，dep再通知收集的所有watcher       dep.notify()     }   }) }    // 递归，使每层每个复杂对象都能被当前watcher订阅 function dependArray (value: Array<any>) {   for (let e, i = 0, l = value.length; i < l; i++) {     e = value[i]     e && e.__ob__ && e.__ob__.dep.depend()     if (Array.isArray(e)) {       dependArray(e)     }   } }

 

小结：
一、复杂类型的变量会转化成响应式数据，转化为响应式数据的变量都会带有 '__ob__'  属性，所以 '__ob__' 属性可以作为判断响应式数据的标识。

二、变量侦测原理是利用了Object.defineProperty的getter与setter。Object的在getter中收集依赖，在setter中触发依赖。Array在getter中收集依赖，通过重写Array原型方法触发依赖。

三、目前vue这种侦测方案存在缺陷

（1）由于setter方法只能监听的每个key对应的值变化，如果Object新增或者删除一个key, setter是侦测不到，所以不会触发依赖。

... data() {   return {     obj: {       a: 1;     }   } } ...   this.obj.a = 2; // 触发依赖 this.obj.b = 2; // 不会触发依赖 delete this.obj[a] // 不会触发依赖

（2）由于Array是通过重写Array原型方法触发依赖，所以如果直接修改数组下的元素，是不会触发依赖的。

... data() {   return {     array: [1, 2, 3]   } } ...   this.array.push(4); // 触发依赖 this.array[0] = 0; // 不会触发依赖

针对vue侦测方案的缺陷，vue提供了vm.$set与vm.$del, 这两个API会在方法内调用dep.notify，所以通过API进行赋值可以触发依赖。

 

vue3.x响应式

在线demo:  http://gavincat.cn:8081/

/**  * @file fake-vue-next  * @author Gavin Wu  */   (global => {     // targetMap可以理解为vue2.x的 Dep, 负责记录所有target的依赖     const targetMap = new WeakMap();     // Symbol创建一个唯一值ITERATE_KEY，作为target一个特殊的key，我们去循环我们的代理对象时，     // ITERATE_KEY 会收集依赖，当我们的代理对象有新增Key或删除Key时触发依赖     const ITERATE_KEY = Symbol('iterate');     // 当前正在处理的依赖     let activeEffect = null;       // getter触发时收集依赖     const track = (target, type, key) => {         if (!activeEffect) {             return;         }         let depsMap = targetMap.get(target);         if (!depsMap) {             depsMap = new Map();             targetMap.set(target, depsMap);         }         let dep = depsMap.get(key);         if (!dep) {             deps = new Set();             depsMap.set(key, deps);             console.log(targetMap)         }         deps.add(activeEffect);         activeEffect.deps.push(deps);         activeEffect.options.onTrack({             effect: activeEffect,             target,             type,             key         });     };       // setter触发时触发依赖     const trigger = (target, type, key) => {         const depsMap = targetMap.get(target);         if (depsMap) {             if (type === 'add' || type === 'delete') {                 key = ITERATE_KEY;             }             const deps = depsMap.get(key);             if (deps) {                 deps.forEach(effect => {                     effect.options.onTrigger(effect, target, type, key);                     effect();                 });             }         }     };       // key被读取时触发     function get(target, key, receiver) {         const res = Reflect.get(target, key);         track(target, 'get', key);         return typeof res === 'object' ? reactive(res) : res;            }       // key被设置时触发     function set(target, key, value, receiver) {         const hadKey = Object.prototype.hasOwnProperty.call(target, key);         const res = Reflect.set(target, key, value);         trigger(target, hadKey ? 'set': 'add', key);         return res;          }       // key被删除时触发     function deleteProperty(target, key) {         const hadKey = Object.prototype.hasOwnProperty.call(target, key);         let result = Reflect.deleteProperty(target, key);         if (result && hadKey) {             trigger(target, 'delele', key);         }         return result;     }       // key被循环时触发     function ownKeys(target) {         // 收集ITERATE_KEY的依赖         track(target, 'iterate', ITERATE_KEY);         return Object.keys(target);     }       // reactive可以理解为vue2.x的Observer，负责将复杂对象转换成响应式数据     const reactive = (target) => {         // Proxy实现target的代理         return new Proxy(target, {             get,             set,             deleteProperty,             ownKeys         });     };       // effect可以理解为vue2.x的Watcher, 即依赖     const effect = (fn, options) => {         const effect = () => {             activeEffect = effect;             const res = fn();             activeEffect = null;             return res;         };         effect.deps = [];         effect.options = options;         effect();         return effect;     };       global.fakevue = {         reactive,         effect     };   })(window);

 

 

vue3.x响应式 对比 2.x：

1. 3.0采用proxy实现代码侦测, 2.x用Object.defineProperty, proxy不兼容ie, Object.defineProperty可兼容至ie8。

2. 3.0解决了2.x删除、新增属性无法被侦测的局限，所以3.0不需$del, $set来触发依赖了。

3. 3.0用weakMap收集依赖，2.x用数组收集依赖，weakMap能及时释放引用，不占内存。