vue3中proxy的基本用法说明
更新时间:2022年05月27日 09:45:09 作者:爱生活,爱编程
这篇文章主要介绍了vue3中proxy的基本用法说明,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
vue3 proxy基本用法
新的改变
- 我们的vue3 使用proxy 来代替vue2 的 Object.defineProperty
- 效率更高,值得我们学习
基本使用
<script> var target = { name: "xiaoming", age: 18 } // handler 是一个对象 const handler = { set(target, prop, value) { let result = Reflect.set(target, prop, value) console.log("设置的操作" + result) return true; }, get(target, value) { let result = Reflect.get(target, value) console.log("获取的的操作" + result) } } let proxy = new Proxy(target, handler); proxy.coure = "java" console.log(proxy) </script>
这个打印效果:
vue3中proxy代理
理解Proxy代理
这里模拟一个伪Vue,使用Proxy代理为响应式
<div id='app'></div> <script> const data = { name:'hello', age:10 } const vm = new Proxy(data,{ get(target,p,receiver){ // 1.target就是代理的data对象 // 2.p 就是data中的每一个属性(name.age) // 3.receiver就是Proxy代理对象本身 return target[p] }, set(target,p,value,receiver){ // 1.value就是最新的值 console.log('receiver:',receiver) if(taregt[p]===value) return target[p] = value document.querySelector('#app').textContent = target[p] } }) vm.name = 'hello,vue' </script>
当我们执行 vm.name = 'hello,vue'时,触发了set方法,此时receiver
再次打印vm,此时,响应的vm对象上的name变成了新的值,说明此时vm的数据变成了响应式的了
以上为个人经验,希望能给大家一个参考,也希望大家多多支持脚本之家。
相关文章
vue2.0$nextTick监听数据渲染完成之后的回调函数方法
今天小编就为大家分享一篇vue2.0$nextTick监听数据渲染完成之后的回调函数方法,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧2018-09-09解决Vue axios post请求,后台获取不到数据的问题方法
今天小编就为大家分享一篇解决Vue axios post请求,后台获取不到数据的问题方法,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧2018-08-08Vue项目中CSS Modules和Scoped CSS的介绍与区别
在vue中我们有两种方式可以定义css作用域,一种是scoped,另一种就是css modules,下面这篇文章主要给大家介绍了关于Vue项目中CSS Modules和Scoped CSS的相关资料,需要的朋友可以参考下2022-03-03vue项目中在外部js文件中直接调用vue实例的方法比如说this
这篇文章主要介绍了vue项目中在外部js文件中直接调用vue实例的方法比如说this,需要的朋友可以参考下2019-04-04
最新评论