vue3和vue2的响应式有什么区别？

vue2的响应式原理：

对象：是通过 Object.defineProperty对象的已有属性值的读取和修改进行劫持。

Object.defineProperty( 'data', 'count', { 
  get(){  }, 
  set(){  }
})

//存在的问题：对象直接添加新属性或删除已有属性的时候，界面不会自动更新。

数组：是通过重写数组更新数组一系列更新元素的方法，来实现元素修改的劫持。

['push','pop','shift','unshift','splice','reverse','sort'].forEach(key=>{
 arrayProto[key] = function(){
  originalProto[key].apply(this.arguments)
  notifyUpdate()
 }
})

//存在问题：直接通过下标替换元素或更新length的时候，界面不会自动更新。

针对 vue2 对象和数组的某些更新，界面不能自动更新的问题，vue2 通过 $set 方法，实现视图的实时更新。

vue3的响应式原理：

vue3 响应式是使用 ES6 的 proxy 和 Reflect 相互配合实现数据响应式，解决了 vue2 中视图不能自动更新的问题。

proxy 是深度监听，所以可以监听对象和数组内的任意元素，从而可以实现视图实时更新。