谈谈 Vue3 和 Vue2.x 的数据监听做了哪些变化，这样做有什么优缺点？ #28

Activity

1. CodeRookie262

   added

   Vue

   on Jan 22, 2021
2. CodeRookie262 commented on Jan 25, 2021

   

   CodeRookie262

   on Jan 25, 2021

   OwnerAuthor

   More actions

   Vue 在 3.0 版本对数据响应式做了重构，从原先 Vue2.x 的 Object.defineproperty 转换为 Proxy 对象代理。

   为什么要替换成 Proxy 呢？

   Object.definproperty

   Object.definproperty是通过属性监听对象的，如果对象上有多个属性时就得遍历多个属性达到监听的效果，那这样就有一个问题，如果监听对象层级比较深时我们一开始就得递归遍历内层对象，如果我们的数据量大会对性能有一定的负担。

   同时如果我们对对象进行增加或删除属性时 Object.definproperty 并不会监听并做对应的拦截处理，为了才会有 Vue.$set 来解决这个问题，同样如果监听的是一个数组，对数组动态进行增删操作也不会被监听到，（Vue 中之所以可以监听到是因为他对数组的方法进行了劫持，在你调用对应的Api时会进行监听操作）；

   Proxy

   上面说的都是 Object.definproperty 的坏话，但是其实在 Proxy 没有出来前他是唯一监听数据的方法，那么 Proxy 究竟有什么优点呢？

   Proxy 是直接对对象监听，它会返回一个新的对象，我们对这个对象的操作都可以被监听到，Proxy 的优点在于

   • 它监听的是对象而不是属性
   • 当对象同时也不能监听深层级对象的变化，Vue3 中是通过 getter 去递归响应式，这样做的好处是只有我们使用到我们才会对他进行监听而不用那么粗暴直接全部递归遍历监听。
   • 同时它天然支持对数组监听。
   • 它拥有多达 13 种拦截方式，如has(),get(),set()以及ownKeys()等等，和 Reflect 基本一致（Reflect）
   • 性能远远优于 Object.definproperty

   不过它个缺点，就是兼容性太差。