Vue源码解析：数据双向绑定(响应式)原理

灰太狼 2022-11-04 01:00 237阅读 0赞

vue的双向数据绑定（响应式）原理到底是什么呢？这还是得从vue的源码说起：

我们知道vue的一大特点是`数据驱动视图`，如何理解数据驱动视图这六个字呢？

数据：state；

驱动：render函数；

视图：页面的UI；

这样说来，其实我们可以得到这样一个公式：UI = render(state)，state的变化直接导致UI的变化，而始终不变的是render，vue就是扮演了render的角色。那么vue是如何知道state变化的呢？有个词叫`变化侦测`，因为在当前的主流技术栈，vue，react，angular中都有提到，也就是`状态追宗`，一旦数据变化，就去更新视图。我们先从对象的变化侦测说起。

所谓变化侦测，就是我们能够知道数据什么时候被读取了或数据什么时候被改写了。

### 数据的侦测 ###

### 1、实现对象的侦测（可观察） ###

对象的侦测是借助`Object.defineProperty()`这个方法。

首先定义一个对象animal:

let animal = {
        name: 'dog',
        age: 3

那么这个animal的对象的属性被修改的时候，我们是如何知道的呢，且看下面的操作：

let name = 'cat'
    Object.defineProperty(animal, 'name', {
        configrable: true,    //    描述属性是否配置，以及可否删除
        enumerable: true,     //    描述属性是否会出现在for in 或者 Object.keys()的遍历中
        writable: true,       //    属性的值是否可以被重写
        get () {
            //    这里读取了name的值
            return name
        },
        set (value) {
            //    这里设置了name的值
            name = value
        }

这样一来，当name的值被改成cat的时候，就会变的可观测，可被侦测。但是这只是做到了对象的某一个属性被侦测，但是对象的属性往往不是一个，多个的时候又该怎么办呢？其实也很简单，对，没错，就是你想说的递归。直接上代码：

//    源码位置：src/core/observer/index.js
    export class Observer {
        constructor (value) {
            this.value = value
            def(value,'__ob__',this)
            if (Array.isArray(value)) {
                  // 当value为数组时的逻辑
            } else {
                  this.walk(value)
            }
        }
     
        walk (obj: Object) {
            const keys = Object.keys(obj)
            for (let i = 0; i < keys.length; i++) {
                  defineReactive(obj, keys[i])
            }
        }
    }
    function defineReactive (obj,key,val) {
          if (arguments.length === 2) {
                val = obj[key]
          }
          if(typeof val === 'object'){
              new Observer(val)
          }
          Object.defineProperty(obj, key, {
              enumerable: true,
              configurable: true,
              get(){
                  console.log(`${key}属性被读取了`);
                  return val;
              },
              set(newVal){
                  if(val === newVal){
                      return
                  }
                  console.log(`${key}属性被修改了`);
                  val = newVal;
              }
          })
    }

我们声明一个Observer类，用于将对象的所有属性都转变为可侦测，并且，我们要给每一个可侦测的对象添加一个\_\_ob\_\_属性，值为value的Observer的实例，这就相当于给每一个value设置了标识，表示这个value是响应式的了。那么当value是一个对象的时候，我们拿到他的所有的key,循环遍历调用Object.defineProperty()的方法，调用get/set方法来侦测，当发现传入的是一个Object的时候，通过递归的方式，再次通过Observer类去实例这个Object。这样我们就实现了对象的侦测。

#### 2、实现数组的侦测（可观察） ####

上面我们讲了对象的侦测，现在来聊聊数组的侦测。

数组的可观测与对象的可观测有所不同，因为数组不能用Object.defineProperty()去观测。那么数组如何做到可观测呢，其实大同小异，数组是通过`拦截器`来做到的，那么这个拦截器是何方神圣？

我们知道，JavaScript中操作数组的原生方法，其实就是那么几个，push/pop/shift/unshift/splice/sort/reverse。这些方法都是通过`Array.prototype`来访问，那么我们如果在Array.prototype上重新定义一个方法，去实现原生的方法，如newPush去实现与push同样的作用，是不是很完美。既没有修改原生方法，又可以在调用原生方法之前做了相应的操作。

let arr = [1,2,3]
    //    arr.push(4) 原生方法调用
    Array.prototype.newPush = function(val){
          console.log('arr被修改了')
          this.push(val)
    }
    arr.newPush(4)

所以，`数组的拦截器就是在数组实例和Array.prototype之间重写了操作数组的方法`。这样在调用处理的方法的时候，就是调用的重写之后的方法，而不是原生方法。来看拦截器的实现：

// 源码位置：/src/core/observer/array.js
    const arrayProto = Array.prototype
    export const arrayMethods = Object.create(arrayProto)
    const methodsToPatch = [
      'push',
      'pop',
      'shift',
      'unshift',
      'splice',
      'sort',
      'reverse'
    ]
    methodsToPatch.forEach(function (method) {
      const original = arrayProto[method]
      Object.defineProperty(arrayMethods, method, {
        enumerable: false,
        configurable: true,
        writable: true,
        value:function mutator(...args){
          const result = original.apply(this, args)
          return result
        }
      })
    })

这就是拦截器的实现，当调用数组的方法时，实际调用的是`mutator函数`，所以，我们可以在这个函数中做一些操作。但是这么做还不够，`只有将拦截器挂载在数组实例和Array.prototype之间才能生效，也就是将数据的__proto__属性设置为拦截器arrayMethods即可`。

augment(value, `arrayMethods`, arrayKeys)

// 源码位置：/src/core/observer/index.js
    export class Observer {
      constructor (value) {
        this.value = value
        if (Array.isArray(value)) {
          const augment = hasProto
            ? protoAugment
            : copyAugment
          augment(value, arrayMethods, arrayKeys)
        } else {
          this.walk(value)
        }
      }
    }
    // 能力检测：判断__proto__是否可用，因为有的浏览器不支持该属性
    export const hasProto = '__proto__' in {}
     
    const arrayKeys = Object.getOwnPropertyNames(arrayMethods)
     
    /**
     * Augment an target Object or Array by intercepting
     * the prototype chain using __proto__
     */
    function protoAugment (target, src: Object, keys: any) {
      target.__proto__ = src
    }
     
    /**
     * Augment an target Object or Array by defining
     * hidden properties.
     */
    /* istanbul ignore next */
    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])
      }
    }

当拦截器生效后，如果数组发生变化，就可以被侦测到了。

以上就是如何让对象，和数组的变化可被侦测。数据仅仅被侦测还远远不够，下面来讲依赖的搜集。

#### 数据的依赖收集 ####

#### 1、对象的依赖收集 ####

**依赖收集**：视图中用到了哪个数据，视图就依赖哪个数据，把变化的数据收集起来，这个过程就是依赖的收集。

**在哪里收集依赖**：可观测的数据在`getter`中被获取，所以getter是收集依赖的场所。

**何时通知依赖更新**：数据变化在`setter`中可被观测，自然，通知依赖更新是在setter中。

依赖应该被搜集在哪里？且往下看：

因为更新的数据大小，我们无法控制，所以，对于依赖的收集，我们需要一个依赖管理器：

// 源码位置：src/core/observer/dep.js
    export default class Dep {
       constructor () {
           this.subs = []
       }
    
       addSub (sub) {
           this.subs.push(sub)
       }
       // 删除一个依赖
       removeSub (sub) {
           remove(this.subs, sub)
       }
       // 添加一个依赖
       depend () {
           if (window.target) {
               this.addSub(window.target)
           }
       }
       // 通知所有依赖更新
       notify () {
           const subs = this.subs.slice()
           for (let i = 0, l = subs.length; i < l; i++) {
               subs[i].update()
           }
       }
    }
    
    /**
    * Remove an item from an array
    */
    export function remove (arr, item) {
       if (arr.length) {
           const index = arr.indexOf(item)
           if (index > -1) {
               return arr.splice(index, 1)
           }
       }
    }

有了依赖管理器，我们就可以在getter中收集依赖，在setter中通知依赖更新了。

function defineReactive (obj,key,val) {
        if (arguments.length === 2) {
             val = obj[key]
        }
        if(typeof val === 'object'){
            new Observer(val)
        }
        const dep = new Dep()  //实例化一个依赖管理器，生成一个依赖管理数组dep
        Object.defineProperty(obj, key, {
            enumerable: true,
            configurable: true,
            get(){
                dep.depend()    // 在getter中收集依赖
                return val;
            },
            set(newVal){
                if(val === newVal){
                return
            }
            val = newVal;
            dep.notify()   // 在setter中通知依赖更新
         }
      })
    }

getter中调用了dep.depend()方法收集依赖，在setter中调用dep.notify()方法通知所有依赖更新。

其实在vue中实现了一个为每一个变化的依赖数据的watcher类，在之后数据变化时，我们不直接去通知依赖更新，而是通知依赖对应的Watch实例，由Watcher实例去通知真正的视图。

export default class Watcher {
      constructor (vm,expOrFn,cb) {
        this.vm = vm;
        this.cb = cb;
        this.getter = parsePath(expOrFn)
        this.value = this.get()
      }
      get () {
        window.target = this;
        const vm = this.vm
        let value = this.getter.call(vm, vm)
        window.target = undefined;
        return value
      }
      update () {
        const oldValue = this.value
        this.value = this.get()
        this.cb.call(this.vm, this.value, oldValue)
      }
    }
     
    /**
     * Parse simple path.
     * 把一个形如'data.a.b.c'的字符串路径所表示的值，从真实的data对象中取出来
     * 例如：
     * data = {a:{b:{c:2}}}
     * parsePath('a.b.c')(data)  // 2
     */
    const bailRE = /[^\w.$]/
    export function parsePath (path) {
      if (bailRE.test(path)) {
        return
      }
      const segments = path.split('.')
      return function (obj) {
        for (let i = 0; i < segments.length; i++) {
          if (!obj) return
          obj = obj[segments[i]]
        }
        return obj
      }
    }

分析：

*  当实例化watch的时候，先执行构造函数；
 *  在构造函数中调用this.get()实例方法；
 *  在get()方法中，先通过通过window.target = this 把实例自身赋给全局的一个唯一对象window.target上，然后通过let value = this.getter.call(vm, vm)获取一下被依赖的数据，获取被依赖数据的目的是触发该数据上面的getter，上文我们说过，在getter里会调用dep.depend()收集依赖，而在dep.depend()中取到挂载window.target上的值并将其存入依赖数组中，在get()方法最后将window.target释放掉。
 *  而当数据变化时，会触发数据的setter，在setter中调用了dep.notify()方法，在dep.notify()方法中，遍历所有依赖(即watcher实例)，执行依赖的update()方法，也就是Watcher类中的update()实例方法，在update()方法中调用数据变化的更新回调函数，从而更新视图。

#### 简单总结一下就是： ####

Watcher先把自己设置到全局唯一的指定位置（window.target），然后读取数据。因为读取了数据，所以会触发这个数据的getter。接着，在getter中就会从全局唯一的那个位置读取当前正在读取数据的Watcher，并把这个watcher收集到Dep中去。收集好之后，当数据发生变化时，会向Dep中的每个Watcher发送通知。通过这样的方式，Watcher可以主动去订阅任意一个数据的变化。为了便于理解，我们画出了其关系流程图，如下图：

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDQzMzQ5OQ_size_16_color_FFFFFF_t_70]  
以上，就彻底完成了对Object数据的侦测，依赖收集，依赖的更新等所有操作。

#### 2、数组的依赖收集 ####

对于数组，其实在依赖收集有个和对象大同小异的方法。

数组的依赖的收集是在observer类中：

// 源码位置：/src/core/observer/index.js
    export class Observer {
      constructor (value) {
        this.value = value
        this.dep = new Dep()    // 实例化一个依赖管理器，用来收集数组依赖
        if (Array.isArray(value)) {
          const augment = hasProto
            ? protoAugment
            : copyAugment
          augment(value, arrayMethods, arrayKeys)
        } else {
          this.walk(value)
        }
      }
    }

这样我们也在observer中实现了一个依赖管理器。

所以我们可以看看数组的依赖到底是如何收集的，直接上代码：

function defineReactive (obj,key,val) {
      let childOb = observe(val)
      Object.defineProperty(obj, key, {
        enumerable: true,
        configurable: true,
        get(){
          if (childOb) {
            childOb.dep.depend()
          }
          return val;
        },
        set(newVal){
          if(val === newVal){
            return
          }
          val = newVal;
          dep.notify()   // 在setter中通知依赖更新
        }
      })
    }
     
    /**
     * Attempt to create an observer instance for a value,
     * returns the new observer if successfully observed,
     * or the existing observer if the value already has one.
     * 尝试为value创建一个0bserver实例，如果创建成功，直接返回新创建的Observer实例。
     * 如果 Value 已经存在一个Observer实例，则直接返回它
     */
    export function observe (value, asRootData){
      if (!isObject(value) || value instanceof VNode) {
        return
      }
      let ob
      if (hasOwn(value, '__ob__') && value.__ob__ instanceof Observer) {
        ob = value.__ob__
      } else {
        ob = new Observer(value)
      }
      return ob
    }

在observe函数内部，先判断当前传入的数据上是否有\_\_ob\_\_属性，因为在上篇文章中说了，如果数据有\_\_ob\_\_属性，表示它已经被转化成响应式的了，如果没有则表示该数据还不是响应式的，那么就调用new Observer(value)将其转化成响应式的，并把数据对应的Observer实例返回。而在defineReactive函数中，首先获取数据对应的Observer实例childOb，然后在getter中调用Observer实例上依赖管理器，从而将依赖收集起来。

这样依赖通知依赖更新就显的非常容易了。

methodsToPatch.forEach(function (method) {
     const original = arrayProto[method]
     def(arrayMethods, method, function mutator (...args) {
       const result = original.apply(this, args)
       const ob = this.__ob__
       // notify change
       ob.dep.notify()
       return result
     })
    })

到此，基本实现了数组的依赖的收集，但是这还没有完。数组不是一层，也许是多层，所以需要一个深度侦测：

export class Observer {
      value: any;
      dep: Dep;
     
      constructor (value: any) {
        this.value = value
        this.dep = new Dep()
        def(value, '__ob__', this)
        if (Array.isArray(value)) {
          const augment = hasProto
            ? protoAugment
            : copyAugment
          augment(value, arrayMethods, arrayKeys)
          this.observeArray(value)   // 将数组中的所有元素都转化为可被侦测的响应式
        } else {
          this.walk(value)
        }
      }
     
      /**
       * Observe a list of Array items.
       */
      observeArray (items: Array<any>) {
        for (let i = 0, l = items.length; i < l; i++) {
          observe(items[i])
        }
      }
    }
     
    export function observe (value, asRootData){
      if (!isObject(value) || value instanceof VNode) {
        return
      }
      let ob
      if (hasOwn(value, '__ob__') && value.__ob__ instanceof Observer) {
        ob = value.__ob__
      } else {
        ob = new Observer(value)
      }
      return ob
    }

#### 数组新增元素的侦测 ####

methodsToPatch.forEach(function (method) {
      // cache original method
      const original = arrayProto[method]
      def(arrayMethods, method, function mutator (...args) {
        const result = original.apply(this, args)
        const ob = this.__ob__
        let inserted
        switch (method) {
          case 'push':
          case 'unshift':
            inserted = args   // 如果是push或unshift方法，那么传入参数就是新增的元素
            break
          case 'splice':
            inserted = args.slice(2) // 如果是splice方法，那么传入参数列表中下标为2的就是新增的元素
            break
        }
        if (inserted) ob.observeArray(inserted) // 调用observe函数将新增的元素转化成响应式
        // notify change
        ob.dep.notify()
        return result
      })
    })

总体的vue数据的响应式原理就是这样。对象无法监听、对象属性的增加或者减少、数组无法监听数组下标改变，vue中添加了Vue.set()和Vue.delete方法来处理。

以上就是所有的响应式原理，或者是数据双向绑定的原理。

仅作为学习记录，参考文章：[https://blog.csdn.net/leelxp/article/details/106936827][https_blog.csdn.net_leelxp_article_details_106936827]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDQzMzQ5OQ_size_16_color_FFFFFF_t_70]: /images/20221023/ae632b14d8d74768ba8564f037b4c6ff.png
[https_blog.csdn.net_leelxp_article_details_106936827]: https://blog.csdn.net/leelxp/article/details/106936827