江苏龙网

  1. 首页 > 人文 > >

笑看尘世|学习Vue3.0,先来了解一下Proxy( 五 )

对比Vue2.0其实与$set解决的问题类似 ， Vue2.0是无法监听到属性被删除的 ， 所以提供了$delete用于删除属性 ， 但是对于Proxy ， 是可以监听删除操作的 ， 所以就不需要再使用$delete了
其他操作在上文中 ， 我们提到了Proxy的handler提供了十三个函数 ， 在上面我们列举了最常用的三个 ， 其实每一个的用法都是基本一致的 ， 比如ownKeys ， 当通过Object.getOwnPropertyNames,Object.getownPropertySymbols,Object.keys,Reflect.ownKeys去获取对象的信息的时候 ， 就会进入ownKeys这个钩子函数 ， 使用这个我们就可以对一些我们不想暴露的属性进行保护 ， 比如一般会约定_开头的为私有属性 ， 所以在使用Object.keys去获取对象的所有key的时候 ， 就可以把所有_开头的属性屏蔽掉 。 关于剩余的那些属性 ， 建议大家多去看看MDN中的介绍 。
Reflect在上面 ， 我们获取属性的值或者修改属性的值都是通过直接操作target来实现的 ， 但实际上ES6已经为我们提供了在Proxy内部调用对象的默认行为的API,即Reflect 。 比如下面的代码
const obj = {}const proxy = new Proxy(obj, {get(target,key,receiver) {return Reflect.get(target,key,receiver)}})大家可能看到上面的代码与直接使用target[key]的方式没什么区别 ， 但实际上Reflect的出现是为了让Object上面的操作更加规范 ， 比如我们要判断某一个prop是否在一个对象中 ， 通常会使用到in,即
const obj = {name: '子君'}console.log('name' in obj)但上面的操作是一种命令式的语法 ， 通过Reflect可以将其转变为函数式的语法 ， 显得更加规范
Reflect.has(obj,'name')除了has,get之外 ， 其实Reflect上面总共提供了十三个静态方法 ， 这十三个静态方法与Proxy的handler上面的十三个方法是一一对应的 ， 通过将Proxy与Reflect相结合 ， 就可以对对象上面的默认操作进行拦截处理 ， 当然这也就属于函数元编程的范畴了 。
总结有的同学可能会有疑惑 ， 我不会Proxy和Reflect就学不了Vue3.0了吗？其实懂不懂这个是不影响学习Vue3.0的 ， 但是如果想深入 去理解Vue3.0 ， 还是很有必要了解这些的 。 比如经常会有人在使用Vue2的时候问 ， 为什么我数组通过索引修改值之后 ， 界面没有变呢？当你了解到Object.defineProperty的使用方式与限制之后 ， 就会恍然大悟 ， 原来如此 。
作者：前端进击者
转发链接：


推荐阅读


上一篇：IT世界|教你怎么看当前应用所支持的屏幕刷新率

下一篇：选择遗忘|手机连电脑怎样才用得更爽？它有一个新思路