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

栏目分类：前端开发    发布日期：2023-08-07    浏览次数：305次     收藏

这篇文章主要介绍“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

才能获取到具体值。