vue2和vue3双向绑定的区别

2. vue2和vue3双向绑定的区别

• vue2.0

• 实现原理：基于ES5中的 Object.defineProperty()来实现双向绑定,把这些 property 全部转为 getter/setter;

• 缺陷：
  1. 对于对象无法检测property的添加和删除;
  2. 对于数组无法通过索引修改数组项，无法修改数组length;

• 补救措施：
  1. 对于对象的添加和修改,可使用

      Vue.set(object, propertyName, value) 

方法向嵌套对象添加响应式 property; 还可以使用 vm.$set 实例方法，这也是全局 Vue.set 方法的别名： 

      this.$set(this.someObject,'b',2)

2. 对于数组的元素的修改和length修改 
 * 对于数组元素的修改 

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

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

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

 * 对于数组length的修改 

      vm.items.splice(newLength)

• vue3.0

1. 实现原理：基于ES6的Proxy来实现双向绑定;

   以下伪代码说明Proxy是如何工作的，

function reactive(obj) {
 return new Proxy(obj, {
   get(target, key) {
     track(target, key)
     return target[key]
   },
   set(target, key, value) {
     target[key] = value
     trigger(target, key)
   }
 })
}

function ref(value) {
 const refObject = {
   get value() {
     track(refObject, 'value')
     return value
   },
   set value(newValue) {
     value = newValue
     trigger(refObject, 'value')
   }
 }
 return refObject
}

• 官方解释：

1. vue2链接
2. vue3链接