vue3响应式原理（proxy）_vue proxy(array)

作者：笔触狂放9 | 2024-03-22 00:43:23

踩

vue proxy(array)

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>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/笔触狂放9/article/detail/283981