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è)參考，也希望大家多多支持腳本之家。

您可能感興趣的文章:

vue3
proxy

相關(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之組件的自定義事件詳解
這篇文章主要為大家介紹了Vue之組件的自定義事件，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下，希望能夠給你帶來幫助
2021-11-11
深入淺析Vue組件開發(fā)
本文是主要介紹基于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的示例代碼
這篇文章主要介紹了Vue中使用Sortable的示例代碼,小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧
2018-04-04
干貨!教大家如何選擇Vue和React
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