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 是深度监听，所以可以监听对象和数组内的任意元素，从而可以实现视图实时更新。

vue3响应式Proxy与Reflect的正确使用方法

vue项目开发如何解决跨域问题

vue提示跨域应该怎么解决

标签： Object.defineProperty, Proxy, Reflect, vue2响应式, vue3响应式

上面是“vue3和vue2的响应式有什么区别？”的全面内容，想了解更多关于 vuejs 内容，请继续关注web建站教程。

当前网址：https://m.ipkd.cn/webs_4632.html

声明：本站提供的所有资源部分来自互联网，如果有侵犯您的版权或其他权益，请发送到邮箱：admin@ipkd.cn，我们会在看到邮件的第一时间内为您处理！