vue3的响应式原理是配合proxy来实现的,它是直接监听对象而非属性,所以就不需要使用循环了
1 vue3使用proxy实现双向数据绑定原理代码
<body>
<div id="app"></div>
<script>
let data={
msg:'hello',
count:10
};
let vm=new Proxy(data,{
get(target,key){//target代表所代理的对象,key代表所代理对象中的属性
console.log('get key',key,target[key]);
return target[key];
},
set(target,key,newValue){
console.log('set key',key,newValue);
if(target[key]===newValue){
return;
}
target[key]=newValue;
document.querySelector("#app").textContent=target[key]
}
});
vm.msg="aaaaajjjjj";
</script>
</body>