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的数据变成了响应式的了