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

最新推荐文章于 2023-11-29 16:55:00 发布

苍穹尘

最新推荐文章于 2023-11-29 16:55:00 发布

阅读量210

点赞数

分类专栏： Vue

本文链接：https://blog.csdn.net/lizhiqiang1217/article/details/90341261

版权

Vue 专栏收录该内容

28 篇文章 1 订阅

订阅专栏

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

<body>
<!--
1. vue数据代理: data对象的所有属性的操作(读/写)由vm对象来代理操作
2. 好处: 通过vm对象就可以方便的操作data中的数据
3. 实现:
  1). 通过Object.defineProperty(vm, key, {})给vm添加与data对象的属性对应的属性
  2). 所有添加的属性都包含get/set方法
  3). 在get/set方法中去操作data中对应的属性
-->
<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>

苍穹尘

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Vue系列二十二：源码解析-数据代理

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

扫一扫

专栏目录