defineProperty 和 Proxy区别(直接上结论有一句废话你打我)
source link: https://segmentfault.com/a/1190000041084082
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.
defineProperty 和 Proxy区别(直接上结论有一句废话你打我)
在Vue2和3 中 defineProperty 和 Proxy 都是用来实现响应式数据绑定的。实现的功能类似,但是两个API却有着本质的区别。
监听数据的角度
defineproperty
只能监听某个属性而不能监听整个对象。proxy
不用设置具体属性,直接监听整个对象。defineproperty
监听需要知道是哪个对象的哪个属性,而proxy
只需要知道哪个对象就可以了。也就是会省去for in
循环提高了效率。监听对原对象的影响
- 因为
defineproperty
是通过在原对象身上新增或修改属性增加描述符的方式实现的监听效果,一定会修改原数据。- 而
proxy
只是原对象的代理,proxy
会返回一个代理对象不会在原对象上进行改动,对原数据无污染。实现对数组的监听
- 因为数组
length
的特殊性(length 的描述符configurable 和 enumerable 为 false,并且妄图修改 configurable 为 True 的话 js 会直接报错:VM305:1 Uncaught TypeError: Cannot redefine property: length)
defineproperty
无法监听数组长度变化,Vue
只能通过重写数组方法的方式变现达成监听的效果,光重写数组方法还是不能解决修改数组下标时监听的问题,只能再使用自定义的$set
的方式- 而
proxy
因为自身特性,是创建新的代理对象而不是在原数据身上监听属性,对代理对象进行操作时,所有的操作都会被捕捉,包括数组的方法和length
操作,再不需要重写数组方法和自定义set
函数了。(代码示例在下方)4. 监听的范围
defineproperty
只能监听到value
的get set
变化。proxy
可以监听除[[getOwnPropertyNames]]
以外所有JS
的对象操作。(链接看下方)监听的范围更大更全面。
点击查看proxy支持监听的对象操作方法(除getOwnPropertyNames)
Proxy监听数组变化示例:
let array = ['1', '2'] let arrayProxy = new Proxy(array, { get(target, key) { console.log('(key:', key + ") 发生了get操作") return target[key] }, set(target, key, value) { console.log('(key:', key + ") 发生了set操作, value= " + value) return target[key] = value } }) arrayProxy.push('我是push函数push到数组中的值') // (key: push) 发生了get操作 // (key: length) 发生了get操作 // (key: 2) 发生了set操作, value= 我是push函数push到数组中的值 // (key: length) 发生了set操作, value= 3 // 从log可以看出push length等操作都被捕捉了
Recommend
-
76
面试官系列(4): 实现双向绑定Proxy比defineproperty优劣如何? 往期 面试官系列(1): 如何实现深克隆 面试官系列(2): Event Bus的实现 面试官系列(3): 前端路由的实现 前言 双向绑定其实已经是一个老掉牙的问题了,
-
24
你打我一下试试?
-
45
-
32
摘要:JavaScript有个很神奇的 Object.defineProperty() ,了解一下? =与Object.defineProperty
-
21
我不该说这些都是无聊的人工智障机器人的。
-
66
现在的年轻人…一个能打我十个吧…
-
63
前言 我们或多或少都听过“数据绑定”这个词,“数据绑定”的关键在于监听数据的变化,可是对于这样一个对象:var obj = {value: 1},我们该怎么知道 obj 发生了改变呢? definePropety ES5 提供了 Object.definePr
-
5
在最新发布的Vue3.0中,尤大大果断放弃了Object.defineProperty,加入了Proxy来实现数据劫持,那么这两个函数有什么区别呢?本文深入的剖析一下两者的用法以及优缺点,相信看文本文你也会理解为什么Vue会选择Proxy。 初识defineProperty ...
-
2
为什么Vue3.0 不再使用defineProperty实现数据监听其实这个问题很多文章都有写,也是面试的高频题目,这里仅仅是记录下自己的理解。Proxy和Object.defineprope...
-
2
响应式是什么?Vue 最独特的特性之一~ 就是我们在页面开发时,修改data值的时候,数据、视图页面需要变化的地方变化。 主要使用到哪些方法? 用 Object.defineProperty给watcher对象的每一个属性分别定义了get和set。getter负责记录...
About Joyk
Aggregate valuable and interesting links.
Joyk means Joy of geeK