Vue2中为啥不用 Object.defineProperty 实现响应式数组？不能监听到数组变化吗？

news2024/11/19 12:31:44

Vue2.0 对于数据响应式的实现上是有一些局限性的，比如：

无法检测数组和对象的新增；
无法检测通过索引改变数组的操作；

针对以上问题，我们一般都会把锅甩给 Object.defineProperty。所以，在Vue 3.0 中，尤大把响应式数据部分弃用了 Object.defineProperty，而使用 Proxy 来代替它。

难道 Object.defineProperty 真的要背这锅么，下面就来分析一下 Object.defineProperty 真的无法监测数组下标的变化吗？

先说结论：

首先，Object.defineProperty 本身是可以监控到数组下标的变化的，只是在 Vue 的实现中，从性能/体验的性价比考虑，便放弃了这个特性。

Object.defineProperty 无法直接监听数组的变化。这是因为 Object.defineProperty 可以拦截对象属性的读取和写入操作，但无法拦截数组的方法调用（如 push、pop、shift、unshift、splice、sort 和 reverse 等）。具体来说，Object.defineProperty 可以监听数组的元素的增加和修改，但不能监听数组长度的变化和数组方法的调用。

function defineReactive(data, key, value) {
	 Object.defineProperty(data, key, {
		 enumerable: true,
		 configurable: true,
		 get: function defineGet() {
			 console.log(`get key: ${key} value: ${value}`)
			 return value
		 },
		 set: function defineSet(newVal) {
			 console.log(`set key: ${key} value: ${newVal}`)
			 value = newVal
		 }
	 })
}
 
function observe(data) {
	Object.keys(data).forEach(function(key) {
		defineReactive(data, key, data[key])
	})
}
 
let arr = [1, 2, 3]
observe(arr)

从以上操作的结果，可以看出：我们通过索引改变 arr[1]，可以发现触发了 set，也就是Object.defineProperty 是可以检测到通过索引改变数组的操作的。

但是有一个问题，就是对于数组的一些常用方法如push/pop等，无法触发监听；

Vue 2 对数组的响应式处理

const arrayProto = Array.prototype;
const arrayMethods = Object.create(arrayProto);

['push', 'pop', 'shift', 'unshift', 'splice', 'sort', 'reverse'].forEach(method => {
  const original = arrayProto[method];
  Object.defineProperty(arrayMethods, method, {
    value: function mutator(...args) {
      const result = original.apply(this, args);
      // 触发视图更新逻辑
      console.log(`Array method ${method} called`);
      return result;
    },
    enumerable: false,
    writable: true,
    configurable: true
  });
});

function observeArray(arr) {
  arr.__proto__ = arrayMethods;
}

let arr = [];
observeArray(arr);
arr.push(1);  // 会触发自定义的 push 方法