vue3响应式原理(proxy)

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>

你可能感兴趣的:(vue,vue)