经验总结

  1. 首页 > 生活 > >

8_vue是如何进行数据代理的( 三 )

生活百科


就是为了让你编码的时候更方便（不至于每次都是 _data.xxx）

8_vue是如何进行数据代理的

文章插图
总结
  1. vue中的数据代理
    • 通过vm对象 来 代理 data对象（配置项）中的属性操作（get/set）
  2. Vue中数据代理的好处
    • 更加方便操作data中的数据（_data.xxx）
  3. 基本原理
    1. 通过Object.defineProperty()将data配置项当中的所有属性配置到vm对象上
    2. 为每一个添加到vm上的属性 ， 指定一个get和set函数（getter/setter）
    3. 在getter/setter内部去操作（读/写） ， data中对应的属性
展开_data思考
8_vue是如何进行数据代理的

文章插图
老师不让展开是对的
因为如果按照之前的理解 ， 这个符号代表什么 (...) 代表数据代理
这样容易引起理解误区 ，  ， 这里实际上并不是数据代理 ， 而是做了一个数据劫持
我希望看到的 _data的展开内容是什么？是这样的
8_vue是如何进行数据代理的

文章插图
实际上并不是
vue的承诺只要你敢修改data当中的属性值 ， 我就敢在页面当中 {{property}}一起发生变化
8_vue是如何进行数据代理的

文章插图
  1. 当name的值发生了改变 ， 最终影响到的是谁 === _data.name
  2. 那么页面元素是怎么同步进行修改的？
  3. vue是不是必须要知道 ， name这里发生了改变 ， 他需要做什么 === 监听
  4. 经历了一系列变动后 ， 完成了小小的升级 ， 最终达成响应式操作
【8_vue是如何进行数据代理的】

经验总结扩展阅读


上一篇：生蚝可以冷冻保存吗

下一篇：2023年10月有适合结婚的日子吗 2023年10月有哪些结婚吉日