三、vue响应式原理：对数组的劫持

1、官网介绍vue对数组的处理

Vue 不能检测以下数组的变动：

1. 当你利用索引直接设置一个数组项时，例如：vm.items[indexOfItem] = newValue
2. 当你修改数组的长度时，例如：vm.items.length = newLength

举个例子：

var vm = new Vue({
  data: {
    items: ['a', 'b', 'c']
  }
})
vm.items[1] = 'x' // 不是响应性的
vm.items.length = 2 // 不是响应性的

为了解决第一类问题，以下两种方式都可以实现和 vm.items[indexOfItem] = newValue 相同的效果，同时也将在响应式系统内触发状态更新：

// Vue.set
Vue.set(vm.items, indexOfItem, newValue)

// Array.prototype.splice
vm.items.splice(indexOfItem, 1, newValue)

你也可以使用 vm.$set 实例方法，该方法是全局方法 Vue.set 的一个别名：

vm.$set(vm.items, indexOfItem, newValue)

以上内容是摘抄自官网。 那么，vue是如何对数组进行响应式处理呢？

Vue 将被侦听的数组的变更方法进行了包裹，所以它们也将会触发视图更新。这些被包裹过的方法包括：

• push()
• pop()
• shift()
• unshift()
• splice()
• sort()
• reverse() 实际上就是对数组的这七个方法进行了重写。

2、对数组7个方法的劫持

1、获取原生 Array 的原型方法。 2、把变异的7个方法的原型指向原生Array的原型。

export let oldArrayProto = Array.prototype;
//**`Object.create()`** 方法创建一个新对象，使用现有的对象来提供新创建的对象的__proto__
let newArrayProto = Object.create(oldArrayProto);

let methods = [
  //找到所有的变异的方法
  "push",
  "pop",
  "shift",
  "unshift",
  "reverse",
  "sort",
  "splice",
];

methods.forEach((method) => {
  newArrayProto[method] = function (...arg) {
    const result = oldArrayProto[method].call(this, ...arg);
    return result;
  };
});