【Vue2与vue3实现数据代理的原理】

飞天的小蜗牛

已于 2022-09-27 20:15:17 修改

阅读量286

点赞数

文章标签： javascript 前端 vue.js

于 2022-09-27 19:53:01 首次发布

本文链接：https://blog.csdn.net/weixin_66060122/article/details/127077369

版权

 <script>
      let data = {
        name: "张三",
        age: 18,
      };
      //使用Object.defineProperty（或window.reflect.defineProperty）使对象data与data对象形成映射关系，实现数据代理
      //#region
      //     let p={}//p=data也可以
      //    Object.keys(data).forEach(function(key){
      //         Object.defineProperty(p,key,{
      //             enumerable:true,
      //             configurable:true,
      //             get:function(){
      //                 console.log("有人访问了data对象的name属性")
      //                 return data[key];
      //             },
      //             set:function(value){
      //                 console.log("有人修改了data对象的name属性")
      //                 data.key=value
      //             }
      //         })
      //    })
      //#endregion
      //使用window.proxy对象和window.reflect对象使对象p与data对象形成映射关系，实现数据代理
      const p = new Proxy(data, {
        get: function (target, propName) {
          console.log(`有人访问了${target}的${propName}属性`);
          return Reflect.get(target,propName)
        },
        set: function (target, propName, value) {
          console.log(`有人修改或增加了了${target}的${propName}属性`);
          Reflect.set(target, propName, value)
        },
        deleteProperty: function (target, propName) {
          console.log(`有人删除了${target}的${propName}属性`);
          return Reflect.deleteProperty(target, propName)
        },
      });
    </script>