修改成全大写
文章插图
分析过程
文章插图
- 我们修改了vm.name的值
- 一定调用了 set函数 ， 拿到这个value值
- 并且将这个 value值赋给了vm._data(data)
文章插图
紧随其后，马上就给我们创建了一个vue的实例对象
文章插图
然后，vue开始为vm这个实例对象准备一些东西（属性）
文章插图
重点 ， data来了，完全来自于上方的配置项data
文章插图
截止到目前来说 ， 没有数据代理的存在 。我们所写的data，就是单纯的进行了一次赋值，然后给了下划线data（_data）
第二部分实际上 ， vue做到这一步已经差不多了，代码也是可以写下去的
但是 ， 请问，目前vm身上 ， 有name吗，没有
但是我能拿到name的值吗？可以的，因为我有 _data
文章插图
一样可以拿到name和phone的值
文章插图
因为，vm这个对象身上的所有属性，在模板上面都能够直接使用
但是这样写，那不是直接崩溃，创建一个变量就需要 _data一次，vue在这里做了一个很棒的操作
也就是数据代理
第三部分
文章插图
- vm在自己身上创建了一个变量name
- 什么方式创建的？defineProperty
- 通过get拿到vm自身上的_data.name的值
- 修改数据的时候通过set,获取value，然后再将_data当中的属性进行修改
- 完成了数据代理，双向绑定
就是为了让你编码的时候更方便（不至于每次都是 _data.xxx）
文章插图
总结
- vue中的数据代理
- 通过vm对象 来 代理 data对象（配置项）中的属性操作（get/set）
- Vue中数据代理的好处
- 更加方便操作data中的数据（_data.xxx）
- 基本原理
- 通过Object.defineProperty()将data配置项当中的所有属性配置到vm对象上
- 为每一个添加到vm上的属性，指定一个get和set函数（getter/setter）
- 在getter/setter内部去操作（读/写），data中对应的属性
文章插图
老师不让展开是对的
因为如果按照之前的理解，这个符号代表什么 (...) 代表数据代理
这样容易引起理解误区， ， 这里实际上并不是数据代理，而是做了一个数据劫持
我希望看到的 _data的展开内容是什么？是这样的
文章插图
实际上并不是
vue的承诺只要你敢修改data当中的属性值 ， 我就敢在页面当中 {{property}}一起发生变化
文章插图
- 当name的值发生了改变，最终影响到的是谁 === _data.name
- 那么页面元素是怎么同步进行修改的？
- vue是不是必须要知道，name这里发生了改变，他需要做什么 === 监听
- 经历了一系列变动后，完成了小小的升级 ， 最终达成响应式操作
推荐阅读
- 暗区突围巡逻卫队走法路线是什么
- 迪奥999口红怎么分辨是不是正品?迪奥999真假鉴别
- 哪个网页游戏是明星代言的 张靓颖代言页游
- McAfee如何卸载干净（mcafee为什么卸载不了)
- 流氓迈克菲软件如何卸载（如何关闭迈克菲自动删除软件)
- DNF如何升冒险团等级（dnf冒险团40级要多少号)
- h函数 vue3渲染函数的变化
- 二 Linux进程间通信
- AgileBoot - 如何集成内置数据库H2和内置Redis
- 教你如何解决T+0的问题