vue2.x双向数据绑定原理

最新推荐文章于 2022-10-19 15:55:24 发布

打酱油的女孩子

最新推荐文章于 2022-10-19 15:55:24 发布

阅读量136

点赞数

分类专栏： vue 文章标签： vue

本文链接：https://blog.csdn.net/weixin_38341556/article/details/112565205

版权

vue 专栏收录该内容

11 篇文章 0 订阅

订阅专栏

1 vue双向数据绑定深入理解

当你把一个普通的JavaScript对象传入Vue实例作为data选项，Vue将遍历此对象的所有Property,并使用Object.defineProperty把这些Property全部转为getter/setter。Object.defineProperty是ES5中一个无法shim的特性，这也是Vue不支持IE8以及更低版本浏览器的原因。
这些getter/setter对用户来说是不可见的，但是在内部它们让Vue能够追踪依赖，在property被访问和修改时通知变更。

2双向数据绑定原理代码实现

//操作了一个属性
<body>
    <div id="app"></div>
    <script>
        let data={
            msg:'hello'
        }
        let vm={}
        Object.defineProperty(vm,"msg",{
            enumerable:true,//可枚举
            configurable:true, //可配置,
            get(){
                console.log('get',data.msg);
            },
            set(newValue){
                console.log('set',newValue);
                if(newValue===data.msg){
                    return;
                }
                data.msg=newValue;
                document.querySelector("#app").textContent=data.msg
            }
        })
        vm.msg="你好哈哈哈";
    </script>   
</body>

//操作了多个属性
<body>
    <div id="app"></div>
    <!-- <script>
        let data={
            msg:'hello'
        }
        let vm={}
        Object.defineProperty(vm,"msg",{
            enumerable:true,//可枚举
            configurable:true, //可配置,
            get(){
                console.log('get',data.msg);
            },
            set(newValue){
                console.log('set',newValue);
                if(newValue===data.msg){
                    return;
                }
                data.msg=newValue;
                document.querySelector("#app").textContent=data.msg
            }
        })
        vm.msg="你好哈哈哈";

    </script> -->
     <script>
         //data中有多个属性
         let data={
             msg:'hello',
             count:10
         }
         let vm={}
         proxyData(data);
         function proxyData(data){
         Object.keys(data).forEach((key)=>{
             Object.defineProperty(vm,key,{
                 enumerable:true,
                 configurable:true,
                 get(){
                     console.log('get',key,data[key]);
                     return data[key];
                 },
                 set(newValue){
                     console.log('set',key,newValue);
                     if(data[key]===newValue){
                         return;
                     }
                     data[key]=newValue;
                     document.querySelector("#app").textContent= data[key]
                 }
             })

         })

         }
         vm.msg="今天星期三";
         console.log(vm.msg);
     </script>
</body>

打酱油的女孩子

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
vue2.x双向数据绑定原理

1 vue双向数据绑定深入理解当你把一个普通的JavaScript对象传入Vue实例作为data选项，Vue将遍历此对象的所有Property,并使用Object.defineProperty把这些Property全部转为getter/setter。Object.defineProperty是ES5中一个无法shim的特性，这也是Vue不支持IE8以及更低版本浏览器的原因。这些getter/setter对用户来说是不可见的，但是在内部它们让Vue能够追踪依赖，在property被访问和修改时通知变更。
复制链接

扫一扫

专栏目录