江苏龙网

  1. 首页 > 人文 > >

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


笑看尘世|学习Vue3.0,先来了解一下Proxy作者：前端进击者
转发链接：
前言产品经理身旁过 ， 需求变更逃不过 。测试姐姐眯眼笑 ， 今晚bug必然多 。
据悉Vue3.0的正式版将要在本月(8月)发布 ， 从发布到正式投入到正式项目中 ， 还需要一定的过渡期 ， 但我们不能一直等到Vue3正式投入到项目中的时候才去学习 ， 提前学习 ， 让你更快一步掌握Vue3.0,升职加薪迎娶白富美就靠它了 。 不过在学习Vue3之前 ， 还需要先了解一下Proxy,它是Vue3.0实现数据双向绑定的基础 。
了解代理模式一个例子作为一个单身钢铁直男程序员 ， 小王最近逐渐喜欢上了前端小妹 ， 不过呢 ， 他又和前台小妹部署 ， 所以决定委托与前端小妹比较熟的UI小姐姐帮忙给自己搭桥引线 。 小王于是请UI小姐姐吃了一顿大餐 ， 然后拿出一封情书委托它转交给前台小妹 ， 情书上写的 我喜欢你 ， 我想和你睡觉 ， 不愧钢铁直男 。 不过这样写肯定是没戏的 ， UI小姐姐吃人嘴短 ， 于是帮忙改了情书 ， 改成了我喜欢你 ， 我想和你一起在晨辉的沐浴下起床 ， 然后交给了前台小妹 。 虽然有没有撮合成功不清楚啊 ， 不过这个故事告诉我们 ， 小王活该单身狗 。
其实上面就是一个比较典型的代理模式的例子 ， 小王想给前台小妹送情书 ， 因为不熟所以委托UI小姐姐 ， UI小姐姐相当于代理人 ， 代替小王完成了送情书的事情 。
引申通过上面的例子 ， 我们想想Vue的数据响应原理 ， 比如下面这段代码
const xiaowang = {love: '我喜欢你 ， 我想和你睡觉'}// 送给小姐姐情书function sendToMyLove(obj) { console.log(obj.love) return '流氓 ， 滚'}console.log(sendToMyLove(xiaowang))如果没有UI小姐姐代替送情书 ， 显示结局是悲惨的 ， 想想Vue2.0的双向绑定 ， 通过Object.defineProperty来监听的属性 get,set方法来实现双向绑定,这个Object.defineProperty就相当于UI小姐姐
const xiaowang = {loveLetter: '我喜欢你 ， 我想和你睡觉'}// UI小姐姐代理Object.defineProperty(xiaowang,'love', {get() {return xiaowang.loveLetter.replace('睡觉','一起在晨辉的沐浴下起床')}})// 送给小姐姐情书function sendToMyLove(obj) { console.log(obj.love) return '小伙子还挺有诗情画意的么 ， 不过老娘不喜欢 ， 滚'}console.log(sendToMyLove(xiaowang))虽然依然是一个悲惨的故事 ， 因为送奔驰的成功率可能会更高一些 。 但是我们可以看到 ， 通过Object.defineproperty可以对对象的已有属性进行拦截 ， 然后做一些额外的操作 。
存在的问题在Vue2.0中 ， 数据双向绑定就是通过Object.defineProperty去监听对象的每一个属性 ， 然后在get,set方法中通过发布订阅者模式来实现的数据响应 ， 但是存在一定的缺陷 ， 比如只能监听已存在的属性 ， 对于新增删除属性就无能为力了 ， 同时无法监听数组的变化 ， 所以在Vue3.0中将其换成了功能更强大的Proxy 。
了解ProxyProxy是ES6新推出的一个特性 ， 可以用它去拦截js操作的方法 ， 从而对这些方法进行代理操作 。
用Proxy重写上面的例子比如我们可以通过Proxy对上面的送情书情节进行重写:
const xiaowang = {loveLetter: '我喜欢你 ， 我想和你睡觉'}const proxy = new Proxy(xiaowang, {get(target,key) {if(key === 'loveLetter') {return target[key].replace('睡觉','一起在晨辉的沐浴下起床')}}})// 送给小姐姐情书function sendToMyLove(obj) { console.log(obj.loveLetter) return '小伙子还挺有诗情画意的么 ， 不过老娘不喜欢 ， 滚'}console.log(sendToMyLove(proxy))


推荐阅读


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

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