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

这篇文章主要介绍“vue数据监听分析Object.defineProperty与Proxy的区别”的相关知识，小编通过实际案例向大家展示操作过程，操作方法简单快捷，实用性强，希望这篇“vue数据监听分析Object.defineProperty与Proxy的区别”文章能帮助大家解决问题。

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 才能获取到具体值。

关于“vue数据监听分析Object.defineProperty与Proxy的区别”的内容就介绍到这里了，感谢大家的阅读。如果想了解更多行业相关的知识，可以关注亿速云行业资讯频道，小编每天都会为大家更新不同的知识点。