Vue - 响应式模拟 -对比

Vue 2.x 和 Vue 3.x 在实现数据响应式时，分别采用了 Object.defineProperty 和 Proxy 两种不同的技术。下面我将对这两者进行对比。

Object.defineProperty

在 Vue 2.x 中，Object.defineProperty 被用于实现数据响应式。这个方法允许直接在一个对象上定义新属性，或者修改一个已经存在的属性，并且可以通过描述符的设置来精确控制对象属性的访问和修改。然而，Object.defineProperty 只能劫持对象的某一个属性，不能对整个对象进行劫持。因此，如果需要监听一个对象的所有属性，需要遍历对象的所有属性并对其进行劫持。

Proxy

在 Vue 3.x 中，Proxy 被用于实现数据响应式。Proxy 是 ES6 引入的一个新特性，它允许你创建一个代理对象，用于拦截对目标对象的访问。通过定义自定义的拦截器方法，我们可以控制这些操作的行为，实现各种高级功能。与 Object.defineProperty 相比，Proxy 可以直接对整个对象进行代理，无需遍历对象的每个属性。

Object.defineProperty有以下缺点。

1. 无法监听es6的Set、Map 变化；

2. 无法监听Class类型的数据；

3. 属性的新加或者删除也无法监听；

4. 数组元素的增加和删除也无法监听。

下面通过代码举例

new Vue({  
  data() {  
    return {  
      myArray: [1, 2, 3],
      mySet: new Set([1, 2, 3])
    };  
  },  
  methods: {  
    addToArray() {  
      this.myArray.length = 4; 	// 这个操作不会被 Vue 检测到，因为是通过修改 length 进行的  
      this.myArray[3] = 4; 		// 这个操作同样不会被检测到，因为是通过索引直接赋值  
    },
    
    addtoSet() {  
      this.mySet.add(4); 		// 这个操作不会被 Vue 检测到，视图不会更新  
    } 
  }  
});

为了解决这些问题，Vue 2.0 提供了一些方法，如 Vue.set 或 this.$set 来手动触发视图的更新。然而，这些方法仍然不能完美处理 Set、Map 等复杂数据结构的响应式问题。

在 Vue 3.0 中，针对Object.defineProperty的缺点，ES6 Proxy都能够完美得解决。Proxy 可以直接对整个对象（包括 Set、Map 和数组）进行代理，无需像 Object.defineProperty 那样对每个属性进行劫持，因此可以更加有效地处理这些复杂数据结构的响应式问题。它唯一的缺点就是，对IE不友好，所以vue3在检测到如果是使用IE的情况下（没错，IE11都不支持Proxy），会自动降级为Object.defineProperty的数据监听系统。

对比

	Object.defineProperty (Vue 2.x)	Proxy (Vue 3.x)
劫持范围	只能劫持对象的某一个属性	可以对整个对象进行代理
性能	遍历对象属性，性能相对较差	无需遍历，性能较好
数组监听	存在缺陷，需要特殊处理	自动监听数组变化
新增/删除属性	需要手动进行劫持	自动处理

总结来说，Vue 3.x 使用 Proxy 替代了 Vue 2.x 的 Object.defineProperty，主要是为了解决 Object.defineProperty 在处理大型对象、数组监听以及新增/删除属性时的不足。通过 Proxy，Vue 3.x 在实现数据响应式时具有更高的性能和更好的灵活性。