浅谈Vue数据响应思路之数组

背景

在Vue中，为了能在数据改变时自动更新视图，采用了数据劫持和观察者模式相结合的方式进行响应式数据的实现。但是针对不同的数据类型，具体的实现方式会有所不同。本篇文章将深入浅出地讲解Vue数据响应思路之数组的实现原理。

数组数据响应的实现原理

Vue中对于数组的数据响应实现依赖于ES6中新增的Proxy方法以及defineProperty方法。首先对于数组数据，Vue会在数组原型上将数组操作方法如push、pop、shift等进行重写，使其在数值发生变化时通知依赖进行更新，这一部分是基于观察者模式的实现。

Vue对于数据劫持则是采用ES6中的Proxy方法，对于数组进行代理，从而实现在修改数组时能够得到通知，从而更新相关依赖。但是在Vue中的Proxy代理并不完全等同于原生的Proxy，因为在Vue的Proxy中，对数组的一些特殊操作需要特殊处理。

我们可以看一段简单的代码来证明Vue的数组数据响应的实现原理：

let arr = [1,2,3]
let reactiveArr = new Proxy(arr, {
  set(target, key, val) {
    console.log('set: ' + key + ' = ' + val)
    target[key] = val
  }
})
reactiveArr.push(4)

代码的输出结果是：set: 3 = 4，这说明我们在执行reactiveArr.push(4)之后，Proxy会拦截到数组的变化，从而触发set方法，通知依赖进行更新。

示例说明

下面结合两个示例说明数组数据响应的实现原理。

示例1：使用Vue重写数组方法

<template>
  <div>
    <ul>
      <li v-for="item in arr" :key="item">{{ item }}</li>
    </ul>
    <button @click="add">add</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      arr: [1, 2, 3]
    }
  },
  created() {
    const arrMethods = ['push', 'pop', 'shift', 'unshift', 'splice', 'sort', 'reverse']
    const arr = this.arr
    arrMethods.forEach(method => {
      arr[method] = function(...args) {
        const result = Array.prototype[method].apply(this, args)
        console.log(`after ${method}: `, this)
        return result
      }
    })
  },
  methods: {
    add() {
      this.arr.push(4)
    }
  }
}
</script>

在上面的示例中，我们对数组的push方法进行了重写，使得在Vue对应的响应式处理器中能够得到通知，并在控制台中打印出更新后的数组。

示例2：使用Object.defineProperty将数组转换为响应式数据

在Vue3中，通过Proxy来实现响应式数据的方式随着支持其它浏览器，华丽而尴尬的退场了。而使用Object.defineProperty将数据转换为响应式数据则成了Vue3中的数据响应实现方式。下面举例说明如何使用Object.defineProperty将原始的数组转换为响应式数据：

function reactiveArray(arr) {
  arr.forEach((item, i) => {
    Object.defineProperty(arr, i, {
      get() {
        console.log('get ' + item)
        return item
      },
      set(val) {
        console.log('set ' + val)
        item = val
      }
    })
  })
  return arr
}

let arr = [1, 2, 3]
let reactiveArr = reactiveArray(arr)

reactiveArr.push(4)

在上面的示例中，我们使用Object.defineProperty对原始的数组进行了代理，并在get和set方法中进行拦截和返回，从而实现了数组数据响应的实现。

总结

在Vue中，数组数据响应的实现需要使用ES6新增的Proxy和defineProperty方法进行组合实现。Vue对于数组数据的响应式还依赖于数组操作方法的重写，从而实现在数组改变时能够触发依赖的更新。通过对Vue数组数据响应的原理实现的深入了解后，我们可以更好的理解Vue2.x和Vue3.x中的响应式数据实现方式，从而更好的进行Vue应用的开发。