vue3中proxy的基本用法說明
更新時(shí)間：2022年05月27日 09:45:09 作者：愛生活，愛編程
這篇文章主要介紹了vue3中proxy的基本用法說明，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教
vue3 proxy基本用法
新的改變
- 我們的vue3 使用proxy 來代替vue2 的 Object.defineProperty
- 效率更高，值得我們學(xué)習(xí)
基本使用
<script>
var target = {
name: "xiaoming",
age: 18
}
// handler 是一個(gè)對(duì)象
const handler = {
set(target, prop, value) {
let result = Reflect.set(target, prop, value)
console.log("設(shè)置的操作" + 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>
這個(gè)打印效果：
vue3中proxy代理
理解Proxy代理
這里模擬一個(gè)偽Vue,使用Proxy代理為響應(yīng)式
<div id='app'></div>
<script>
const data = {
name:'hello',
age:10
}
const vm = new Proxy(data,{
get(target,p,receiver){
// 1.target就是代理的data對(duì)象
// 2.p 就是data中的每一個(gè)屬性(name.age)
// 3.receiver就是Proxy代理對(duì)象本身
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>
當(dāng)我們執(zhí)行 vm.name = 'hello,vue'時(shí)，觸發(fā)了set方法,此時(shí)receiver
再次打印vm,此時(shí)，響應(yīng)的vm對(duì)象上的name變成了新的值，說明此時(shí)vm的數(shù)據(jù)變成了響應(yīng)式的了
以上為個(gè)人經(jīng)驗(yàn)，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。
相關(guān)文章
Vue中為什么要引入render函數(shù)的實(shí)現(xiàn)
本文主要介紹了Vue中為什么要引入render函數(shù)的實(shí)現(xiàn)，文中通過示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2022-01-01
解決在Vue中使用axios用form表單出現(xiàn)的問題
今天小編就為大家分享一篇解決在Vue中使用axios用form表單出現(xiàn)的問題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2019-10-10
這篇文章主要為大家介紹了Vue之組件的自定義事件，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下，希望能夠給你帶來幫助2021-11-11
本文是主要介紹基于Vue的一個(gè)組件開發(fā)。本文給大家介紹的非常詳細(xì)，具有參考借鑒價(jià)值，需要的朋友參考下吧2016-11-11
vue實(shí)現(xiàn)前端保持篩選條件到url并進(jìn)行同步參數(shù)設(shè)計(jì)
這篇文章主要為大家介紹了vue實(shí)現(xiàn)前端保持篩選條件到url并進(jìn)行同步參數(shù)設(shè)計(jì)思路詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-08-08
這篇文章主要介紹了Vue中使用Sortable的示例代碼,小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2018-04-04
Vue和React之間如何選擇，這篇文章主要為大家詳細(xì)介紹了Vue和React兩者之間的相同之處，教大家該如何進(jìn)行選擇，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-03-03
離線搭建vue環(huán)境運(yùn)行項(xiàng)目詳細(xì)步驟
由于公司要求在內(nèi)網(wǎng)開發(fā)項(xiàng)目,而內(nèi)網(wǎng)不能連接外網(wǎng),因此只能離線安裝vue環(huán)境,下面這篇文章主要給大家介紹了關(guān)于離線搭建vue環(huán)境運(yùn)行項(xiàng)目的詳細(xì)步驟,需要的朋友可以參考下2023-11-11
vue3快速實(shí)現(xiàn)主題切換功能的步驟詳解
本文介紹一種基于css變量的主題切換實(shí)現(xiàn)方式,這種是最簡(jiǎn)單,最直接,最容易理解的方式,實(shí)現(xiàn)的原理就是定義不同的HTML根標(biāo)簽元素的樣式,通過data屬性來區(qū)分不同主題css變量樣式,感興趣的朋友可以參考下2024-06-06
vuex vue簡(jiǎn)單使用知識(shí)點(diǎn)總結(jié)
在本篇文章里小編給大家整理了關(guān)于vuex vue簡(jiǎn)單使用知識(shí)點(diǎn)總結(jié)，有需要的朋友們可以參考下。2019-08-08