欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

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)文章

最新評(píng)論