8_vue是如何进行数据代理的
在了解了关于js当中的Object.defineProperty()这个方法后，我们继续对vue当中的数据代理做一个基于现在的解析
建议观看之前先了解下js当中的Obejct.defineProperty()
了解如何代理
准备工作
- 准备一个容器，供vue实例对象指定
- 在实例对象当中配置供页面调用的数据（data）
- 测试页面
<body>
<!-- 准备一个容器 -->
<div class="subject">
<div>昵称:{{name}}</div>
<div>电话:{{phone}}</div>
</div>
</body>
<script>
new Vue({
el: '.subject',
data: {
name: 'wavesbright',
phone:"134****2557"
}
});
</script>
查看VM
- 通过之前的复习，我们知道，在vm这个实例对象当中
- 配置项data当中的属性，会挂载到vm上，供页面调用
- 而鼠标悬停在二者身上，出现了 invoke property getter，说明什么？
- 说明，vm上的name和phone，是通过defineProperty 添加上去的 === 做了数据代理
和谁做了数据代理？
- 当你访问 name 或者 phone的时候
- 一定会调用get（getter），这个get 一定会从某个地方，将所需要的值进行 返回
- 什么地方？ data嘛
- 那你要对 name 和 phone 进行修改的时候，那肯定要 调用set嘛
- 如何确定呢？
get和set
确实有，在哪里呢，往下翻就可以看到
这不就是代理么
验证两条线
vm当中的name 与 phone 是 与data进行数据绑定的
get
- 既然绑定了，那当我访问name变量的时候
- 先调用get
- get 返回 data.name当中配置的value值
验证过程
很简单，直接修改data.name的值不就知道了
原图
修改后
说明是绑定到一起的嘛，但我为什么不修改 vm.name的值去查看data是否发生改变了呢？
问题引出1
- 我们设计的data当中的属性，经过vue的一系列操作
- 最终挂载到了vue实例上，实现了数据绑定
- 数据绑定是一个事实，我们现在所做的是验证这个过程
- 通过修改配置项 data当中的name属性，页面当中确实发生了变化
- 但是我现在想验证的是，我修改 vm.name的值的时候，data如何确定变化
用vm.data查看就能完成了，这不很简单嘛？是吗？
开国际玩笑哦，你data在全局定义了吗？没有吧？vm当中为什么也没有data呢？
set
解决方式1
定义一个全局的data不就行了
验证一下嘛，修改vue当中的name属性，data是否会发生变化
确实可以
问题衍生2
那么又有一个问题，我这个全局data是自己定义的，而正常构建的vue实例对象可不会这么写
但事实情况就是，我修改配置项data当中的数据，可以影响页面，而修改页面也可以影响data
我辛辛苦苦配置了一个data对象，交给了vm，vm如果不把我这个data存下来，那人家以后要用属性去那里取？vm一定会把这个data留下来。
这就说明一个问题，配置项data，一定在 构建完成的这个实例对象vm身上,但是为什么找不到呢？
因为人家叫 vm._data
这个就不展开了，因为 vm当中的data除了做数据代理，还有数据劫持
我们当下只需要记住一点，vm._data === data
验证set的过程
这是当前页面，现在我们要修改name属性
修改成全大写
分析过程
- 我们修改了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当中的数据放在vm身上一份呢（_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
思考
老师不让展开是对的
因为如果按照之前的理解，这个符号代表什么 (...) 代表数据代理
这样容易引起理解误区，，这里实际上并不是数据代理，而是做了一个数据劫持
我希望看到的 _data的展开内容是什么？是这样的
实际上并不是
vue的承诺
只要你敢修改data当中的属性值，我就敢在页面当中 {{property}}一起发生变化
- 当name的值发生了改变，最终影响到的是谁 === _data.name
- 那么页面元素是怎么同步进行修改的？
- vue是不是必须要知道，name这里发生了改变，他需要做什么 === 监听
- 经历了一系列变动后，完成了小小的升级，最终达成响应式操作
8_vue是如何进行数据代理的的更多相关文章
- MVVM数据代理
MVVM数据代理 function MVVM(options) { this.$options = options || {}; var data = this._data = this.$optio ...
- vue的数据代理
1. vue数据代理: data对象的所有属性的操作(读/写)由vm对象来代理操作2. 好处: 通过vm对象就可以方便的操作data中的数据3. 实现: 1). 通过Object.defineProp ...
- 对数据劫持 OR 数据代理 的研究------------引用
数据劫持,也叫数据代理. 所谓数据劫持,指的是在访问或者修改对象的某个属性时,通过一段代码拦截这个行为,进行额外的操作或者修改返回结果.比较典型的是 Object.defineProperty() 和 ...
- ExtJs4学习（八）数据代理Proxy
ExtJs数据代理我们介绍常用的四种,但会着重介绍ajax代理,因为日常开发中,这个最为常用 Ext.data.proxy.Ajax AjaxProxy(Ajax数据代理类)是你的应用程序中使用最广泛 ...
- 数据代理Object.defineProperty()
数据代理: 通过一个对象代理对另一个对象中属性的操作(读/写) 数据代理 Object.defineProperty() Object.defineProperty() 方法会直接在一个对象上定义一个 ...
- vue中的数据代理原理
const vm = new Vue({ data:{ name:'boos' } }) // 注意 :使用构造函数构建vue实例时,传入的是一个option对象,它包含了data,computed等 ...
- es6中的Proxy和vue中的数据代理的异同
1:概述 1-1:Proxy 用于修改某些操作的默认行为,Proxy可以说在对对象进行各种访问或者操作的时候在外层进行一层拦截,在操作之前都需要经过这种拦截.proxy返回的是一个新对象,可以通过操作 ...
- Vue学习之--------el与data的两种写法、MVVM模型、数据代理（2022/7/5）
文章目录 1.el与data的两种写法 1.1.基础知识 1.2.代码实例 1.3.页面效果 2.MVVM模型 2.1. 基础知识 2.2 .代码实例 2.3.页面效果 3.数据代理 3.1. 基础知 ...
- Extjs 数据代理
Ext.data.proxy.Proxy 代理类的根类 客户端代理: 1.LocalStorageProxy:将数据存储在localStorage中,此种方式可以持久的将数据存储在客户端 要使用代理, ...
随机推荐
- 【喜讯】Apache DolphinScheduler 荣获 “2020 年度十大开源新锐项目”
经 10000+ 开发者公开票选,20+专家评审. 10+ 主编团打分,历经数月打磨,11 月 19 日,由InfoQ 发起并组织的[2020中国技术力量年度榜单评选]结果正式揭晓. 2020 年度十 ...
- 非常全的一份Python爬虫的Xpath博文
非常全的一份Python爬虫的Xpath博文 Xpath 是 python 爬虫过程中非常重要的一个用来定位的一种语法. 一.开始使用 首先我们需要得到一个 HTML 源代码,用来模拟爬取网页中的源代 ...
- 认识Vue扩展插件
众所周知,在 Vue 开发中,实现一个功能可以有很多种方式可以选择,这依赖于 Vue 强大的功能(指令.混合.过滤.插件等),本文介绍一下插件的开发使用. Vue 插件 插件通常用来为 Vue 添加全 ...
- python包合集-shutil
一.简介 shutil是 python 中的高级文件操作模块,与os模块形成互补的关系,os主要提供了文件或文件夹的新建.删除.查看等方法,还提供了对文件以及目录的路径操作.shutil模块提供了移动 ...
- 虚拟DOM解析及其在框架里的应用
虚拟DOM解析及其在框架里的应用 浏览器是怎样解析HTML并且绘出整个页面的 上图为webkit引擎浏览器的处理流程,如上图大致分为4大步: 第一步,HTML解析器分析html,构建一颗DOM树: 第 ...
- .net 温故知新：【7】IOC控制反转，DI依赖注入
IOC控制反转 大部分应用程序都是这样编写的:编译时依赖关系顺着运行时执行的方向流动,从而生成一个直接依赖项关系图. 也就是说,如果类 A 调用类 B 的方法,类 B 调用 C 类的方法,则在编译时, ...
- docker hung住问题排查
背景:这个是之前遇到的老问题. # systemctl status lxcfs● lxcfs.service - FUSE filesystem for LXC Loaded: loaded (/u ...
- 延时任务-基于redis zset的完整实现
所谓的延时任务给大家举个例子:你买了一张火车票,必须在30分钟之内付款,否则该订单被自动取消.订单30分钟不付款自动取消,这个任务就是一个延时任务. 我之前已经写过2篇关于延时任务的文章: <完 ...
- 微信小程序/校园社区论坛/微信云开发/云函数
一.框架来源 1.非常非常感谢B站up主"梦千的曾哥哥"的开源框架. 没有他就没有这个小程序.如果有想做的同学,可以直接移步他的视频那里开始学习.我水平不够,就不教具体怎么配置环境 ...
- [CF1527D] MEX Tree （lca）
题面 给你一棵 n n n 个结点的树,对于所有的 k ∈ [ 0 , n ] k\in[0,n] k∈[0,n] ,求出 M E X = k {\rm MEX}=k MEX=k 的路径数量. 一条路 ...