vue核心面试题（vue中如何监测数组变化）

曾经终败给现在 2023-02-20 12:16 20阅读 0赞

### 前言： ###

数组并没有使用Object.defineProperty重新定义数组的每个属性，vue中是怎么检测到数组的变化？

### 数组方法（vue中改写的7个数组方法）： ###

push，pop，shift，unshift，sort，splice，reverse

### 理解： ###

1.数组的方法（以上7个）都可以更改了数组的内容，然后更新就好了

2.vue中对数组的原型方法进行了重写，使用函数劫持的方式，重写了数组的方法

3.vue 将 data 中的数组，进行了原型链重写。通过原型链指向了自己定义的数组原型方法，这样当调用数组 api 时，可以通知依赖更新.如果数组中包含着引用类型。会对数组中的引用类型再次进行监控。

### 原理： ###

vue在数据初始化时调用initData方法，然后通过new Observer对数据进行监测，然后对数据进行判断，如果是数组并且支持原型链就会执行protoAugment让目标原型链指向arrayMethods，arrayMethods用来改写数组的原型方法。内部会采用函数劫持的方式，当用户调用这些方法（push，pop，shift，unshift，sort，splice，reverse）之后，还会调用原数组的方法进行更新数组。拿到原数组的方法，然后重新定义这些方法。

用户调方法时走的就是这个重写的mutator函数，这个函数还是会调用数组原有的方法，重写的mutator函数中会调用原生的方法，对新增数组的方法push，unshift，splice可以帮我们更新数组中的新增一项，对插入的数据使用observeArray再次进行监测，最后通过dep.notify通知视图更新。

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQyMDcyMDg2_size_16_color_FFFFFF_t_70][]

### 源码： ###

1.在observer方法中

if (Array.isArray(value)) { // 如果是数组
      if (hasProto) { // 判断是否支持原型链
         protoAugment(value, arrayMethods) // arrayMethods就是改写数组的原型方法
      } else {
         copyAugment(value, arrayMethods, arrayKeys) // 如果没有原型链会走def方法添加__ob__属性
      }
      this.observeArray(value) // 深度监测数组中的每一个元素，遍历一遍数组，调用observe方法进行监测
    } else {
      this.walk(value)
    }

2.protoAugment

function protoAugment (target, src: Object) {
      target.__proto__ = src // 让目标的原型链指向src
    }

3.arrayMethods

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] // 将原方法拿到
      def(arrayMethods, method, function mutator (...args) { // 然后重新定义这些方法，用户调方法时走的就是这个mutator函数，这个函数还是会调用数组原有的方法
        const result = original.apply(this, args) // 原生的方法
        const ob = this.__ob__
        let inserted
        switch (method) {
          case 'push':
          case 'unshift':
            inserted = args
            break
          case 'splice':
            inserted = args.slice(2)
            break // 新增数组的方法push，unshift，splice可以帮我们更新数组中的新增一项
        }
        if (inserted) ob.observeArray(inserted) // 对插入的数据再次进行监测，新增的数据也可能是对象类型
        // observeArray是将数组遍历一遍
        ob.dep.notify() // 通知视图更新
        return result
      })
    })

4.observeArray

observeArray (items: Array<any>) { // 遍历数组，进行监测
        for (let i = 0, l = items.length; i < l; i++) {
          observe(items[i]) // 必须是对象类型才能被监测，如果不是对象在oberve中会被return
                            // 如果数据已经是观察过的就不会在进行观测，会直接返回，避免进行重复监听
        }
      }

5.def方法其实就是Object.defineProperty

export function def (obj: Object, key: string, val: any, enumerable?: boolean) {
      Object.defineProperty(obj, key, {
        value: val,
        enumerable: !!enumerable,
        writable: true,
        configurable: true
      })
    }

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQyMDcyMDg2_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/20200626203058476.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQyMDcyMDg2,size_16,color_FFFFFF,t_70