这篇文章主要介绍“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才能获取到具体值。