vue数据监听解析Object.defineProperty与Proxy区别

前言

总能深深感觉到自己能力有限，写这篇文章的目的纯粹是因为发现在实际工作中，和一些小伙伴交流时发现，虽然有些小伙伴大概知道 vue2 与 vue3 的区别，但并没有去进一步思考一些深一点的东西。尽管能力有限，但想着自己在起步时候的艰难，就想着分享一下自己的一些看法，虽然不一定有多深入，但能引起大家的一些思考也是好的。

Object.defineProperty 与 Proxy 的区别

其实在 api 的命名上就能看出端倪，Object.defineProperty 顾名思义，是与对象和属性有关的。 vue2 就是利用 defineProperty 的 set 和 get 方法去监听对象属性变化的。 而 Proxy 是直接去监听一个对象的。

注意：他们在这里的区别就是 Object.defineProperty 监听的是对象的属性，而 Proxy 监听的是这个对象本身

在使用上的差异

如上所述，Object.defineProperty 监听的是对象的属性， 但是监听属性只能遍历监听对象已有的属性，对于可能新增的属性，vue2 是没有办法监听的，页面自然也就不会更新。 所以为了解决这个问题 vue2 提供了 set 方法，当新增属性时，可以通过 set 方法为新增的属性添加监听器。
而 Proxy 带来的问题就是由于监听的是一个对象，自然能监听对象的所有属性变化，那么也就不再需要 set 这个方法了。

但是由于监听的是对象，所以没法处理基础类型。当我们使用 ref(false) 去创建一个基本类型的响应式变量时，本质相当于 reactive({value: false})。于是 Vue3 有了一个很奇怪的现象, 明明想用 ref 方法监听一个基础类型，却需要通过 .value 才能获取到具体值。

总结与思考

总的来说，Proxy 虽然解决了 set 的坑，但是又埋下了 ref 的坑，那么 Proxy 值得使用吗？

我的理解是值得的。原因就是同样监听一个对象，之前要为每个属性设置监听器，现在不需要了，性能和属性管理成本都能直线下降。

以上就是 vue数据监听解析Object.defineProperty与Proxy区别的详细内容，更多关于 vue数据监听的资料请关注脚本之家其它相关文章！

最新评论