这篇文章主要介绍“vue数据监听分析Object.defineProperty与Proxy的区别”的相关知识,小编通过实际案例向大家展示操作过程,操作方法简单快捷,实用性强,希望这篇“vue数据监听分析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的区别”的内容就介绍到这里了,感谢大家的阅读。如果想了解更多行业相关的知识,可以关注亿速云行业资讯频道,小编每天都会为大家更新不同的知识点。
免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。