Vue08 数据代理
1 说明
所谓“数据代理”,是指 通过一个对象代理对另一个对象的属性进行读或写操作。
2 简单示例
2.1 代码
let obj = {x:100};
let obj2 = {y:200};
Object.defineProperty(obj2,"x",{
get(){
return obj.x;
},
set(value){
obj.x = value;
}
})
2.2 效果
通过obj2代理对obj的属性进行操作,如下所示
设置obj2.x=333,obj.x值也改变
3 Vue中的数据代理
3.1 代码
<body> <div id="root">
<h1>{{name}}</h1>
<h1>{{address}}</h1> </div> <script type="text/javascript" > let data = {
name:'历史',
address:'杭州'
} const vm = new Vue({
el:'#root',
data
}) </script> </body>
3.2 效果
Vue中的数据代理是:通过vm对象代理对data对象的属性进行操作(读或写),如下所示
设置vm.name的值,data.name也改变
另外,请注意一点:vm._data === data
,返回true
3.3 基本原理
3.3.1 说明
Vue中数据代理的基本原理是,通过Object.defineProperty()
将data对象中的属性添加到vm对象上,并为每个添加到vm上的属性指定getter和setter,在getter和setter中对data对象的属性进行读或写操作
3.3.2 示例
代码同上
控制台查看vm对象,发现它有address属性和name属性,还有一个_data属性
查看这三个属性的值,发现就是data对象的值。
所以vue是这么做的,data对象放在_data里面,且在vm最外层添加了属性address和name,并且给了setter和getter函数,代理data对象
3.3.3 图示
Vue08 数据代理的更多相关文章
- 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. 基础知 ...
- 8_vue是如何进行数据代理的
在了解了关于js当中的Object.defineProperty()这个方法后,我们继续对vue当中的数据代理做一个基于现在的解析 建议观看之前先了解下js当中的Obejct.defineProper ...
- Extjs 数据代理
Ext.data.proxy.Proxy 代理类的根类 客户端代理: 1.LocalStorageProxy:将数据存储在localStorage中,此种方式可以持久的将数据存储在客户端 要使用代理, ...
随机推荐
- SPPS完整版下载安装教程【博主亲测】
SPSS全称Statistical Product and Service Solutions,是一款优秀的数据分析软件,旨在为用户提供专业的统计产品与服务解决方案.SPSS面向行业应用人员所设,被广 ...
- 【云原生 · Kubernetes】Taint和Toleration(污点和容忍)
个人名片: 因为云计算成为了监控工程师 个人博客:念舒_C.ying CSDN主页️:念舒_C.ying Taint和Toleration(污点和容忍) 概念 添加多个tainit(污点) 使用例子 ...
- i春秋Upload
打开是一句普普通通的话,先查看源码,发现提示,我们需要post我们从i春秋得到的东西 得到了什么呢?不知道,去看看cookie,没什么特别的地方,再去抓包试试 找到了我们需要post的东西,不过这东西 ...
- pyinstaller打包TVM/RPC相关脚本及DSO文件
0. 创建anaconda env numpy中MKL/BLAS库占用很大空间.使用如下命令创建新环境,并替换numpy. conda create -n extranumpy python=3.8. ...
- 一文带你快速入门 Go 语言微服务开发 - Dubbo Go 入门实践总结
更多详细示例可直接访问 Dubbo 官网 或搜索关注官方微信公众号:Apache Dubbo 1. 安装Go语言环境 建议使用最新版 go 1.17 go version >= go 1.15 ...
- Tekton 设计简介 及 实践
本文是我对Tekton的实现原理和背后技术逻辑的理解,以及在实践过程中的一些总结. 简介 Tekton 是一个基于 Kubernetes 的云原生 CI/CD 开源(https://cd.founda ...
- 【Java SE】Day11 final、权限、内部类、引用类型
一.final关键字 1.概述 避免子类改写父类内容,使用final关键字,修饰不可变内容 可以修饰类(不可被继承).方法.变量(不能被重新赋值 ) 2.使用 (基本类型)被修饰的变量只能被赋值一次 ...
- requests模块和openpyxl模块
第三方模块的下载和使用 1,第三方模块就是别人大神们已经写好的模块,功能特别强大.我们如果像使用第三方模块就先要进行下载.下载完成后 才可以在python中直接调用 2.下载方式一:pip工具 pip ...
- mysql报错:【系统出错。发生系统错误 1067。进程意外终止。】解决
目录 问题描述 错误排查 1.检查3306端口是否被占用 2.使用window事件查看器 总结 问题描述 使用管理员cmd,任务管理器均无法启动mysql. 报错提示信息:系统出错.发生系统错误 10 ...
- nuxt 登录注册加重置密码
<!-- 登录弹框 --> <div class="mask" v-show="flag"> <div class="m ...