Vue系列二十二：源码解析-数据代理

太过爱你忘了你带给我的痛 2022-01-30 11:35 236阅读 0赞

数据代理(MVVM.js)  
1、通过一个对象代理对另一个对象中属性的操作(读/写)  
2、通过vm对象来代理data对象中所有属性的操作  
3、好处: 更方便的操作data中的数据  
4、基本实现流程  
（1）、通过Object.defineProperty()给vm添加与data对象的属性对应的属性描述符  
（2）、所有添加的属性都包含getter/setter  
（3）、在getter/setter内部去操作data中对应的属性数据

<body>
    
    <div id="test"></div>
    
    <script type="text/javascript" src="js/mvvm/compile.js"></script>
    <script type="text/javascript" src="js/mvvm/mvvm.js"></script>
    <script type="text/javascript" src="js/mvvm/observer.js"></script>
    <script type="text/javascript" src="js/mvvm/watcher.js"></script>
    <script type="text/javascript">
      const vm = new MVVM({
        el: "#test",
        data: {
          name: '张三2'
        }
      })
      console.log(vm.name, vm)  // 读取的是data中的name,  vm代理对data的读操作
      vm.name = '李四2' // 数据保存到data中的name上, vm代理对data的写操作
      console.log(vm.name, vm._data.name)
    </script>
    </body>

<body>
    <div id="test"></div>
    <script type="text/javascript" src="js/vue.js"></script>
    <script type="text/javascript">
      const vm = new Vue({
        el: "#test",
        data: {
          name: '张三'
        }
      })
      console.log(vm.name, vm)  // 读取的是data中的name,  vm代理对data的读操作
      vm.name = '李四' // 数据保存到data中的name上, vm代理对data的写操作
      console.log(vm.name, vm._data.name)
    </script>
    </body>