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 数据代理的更多相关文章

  1. MVVM数据代理

    MVVM数据代理 function MVVM(options) { this.$options = options || {}; var data = this._data = this.$optio ...

  2. vue的数据代理

    1. vue数据代理: data对象的所有属性的操作(读/写)由vm对象来代理操作2. 好处: 通过vm对象就可以方便的操作data中的数据3. 实现: 1). 通过Object.defineProp ...

  3. 对数据劫持 OR 数据代理 的研究------------引用

    数据劫持,也叫数据代理. 所谓数据劫持,指的是在访问或者修改对象的某个属性时,通过一段代码拦截这个行为,进行额外的操作或者修改返回结果.比较典型的是 Object.defineProperty() 和 ...

  4. ExtJs4学习(八)数据代理Proxy

    ExtJs数据代理我们介绍常用的四种,但会着重介绍ajax代理,因为日常开发中,这个最为常用 Ext.data.proxy.Ajax AjaxProxy(Ajax数据代理类)是你的应用程序中使用最广泛 ...

  5. 数据代理Object.defineProperty()

    数据代理: 通过一个对象代理对另一个对象中属性的操作(读/写) 数据代理 Object.defineProperty() Object.defineProperty() 方法会直接在一个对象上定义一个 ...

  6. vue中的数据代理原理

    const vm = new Vue({ data:{ name:'boos' } }) // 注意 :使用构造函数构建vue实例时,传入的是一个option对象,它包含了data,computed等 ...

  7. es6中的Proxy和vue中的数据代理的异同

    1:概述 1-1:Proxy 用于修改某些操作的默认行为,Proxy可以说在对对象进行各种访问或者操作的时候在外层进行一层拦截,在操作之前都需要经过这种拦截.proxy返回的是一个新对象,可以通过操作 ...

  8. 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. 基础知 ...

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

    在了解了关于js当中的Object.defineProperty()这个方法后,我们继续对vue当中的数据代理做一个基于现在的解析 建议观看之前先了解下js当中的Obejct.defineProper ...

  10. Extjs 数据代理

    Ext.data.proxy.Proxy 代理类的根类 客户端代理: 1.LocalStorageProxy:将数据存储在localStorage中,此种方式可以持久的将数据存储在客户端 要使用代理, ...

随机推荐

  1. 嵌入式-C语言基础:指针是存放变量的地址,那为什么要区分类型?

    指针是存放变量的地址,那为什么要区分类型?不能所有类型的变量都用一个类型吗?下面用一个例子来说明这个问题. #include<stdio.h> int main() { int a=0x1 ...

  2. HDLBits答案——Verilog Language

    Verilog Language 1 Basics 1.1 Wire module top_module( input in, output out ); assign out = in; endmo ...

  3. Springcoud-netflix 笔记

    SpringCloud_Netflix 微服务一代(Netflix)学习前提: JAVASE. 数据库(MySQL). 前端(HTML+CSS+JavaScript||JQuery.Bootstrap ...

  4. jmeter ORA-00911: invalid character报错解决方法

    今天通过jmeter进行Oracle数据库操作时,遇到一个小坑. 解决办法:去掉sql最后的分号.

  5. mingw+CLion环境下在Windows下编译配置并使用opencv

    目录 安装(mingw环境) 在项目中使用opencv QtCreator使用opencv 安装(mingw环境) vs环境没配过不知道 下载地址 解压到目标目录     解压后的目录结构(build ...

  6. 一键部署MySQL8+keepalived双主热备高可用

    概述 本次的文章会格外的长,网上大多的配置流程已经不可使用,本篇文章可以称为保姆级教程,而且通过shell脚本大大减少了部署mysql主从,双主的工作量. 如上图,VIP地址为192.168.10.1 ...

  7. Hexo+Gitee免费搭建静态博客

    前言 这是一篇利用 Gitte Pages + hexo 搭建属于自己博客的教程,也是自己这个博客搭建好以后的第一篇文章,搭建的过程中也参考了各路大佬的文章,期间遇到了一些问题,所以写这一篇文章即是记 ...

  8. Ubuntu 22.04 搭建K8s集群

    目录 1. 虚拟机基础配置 配置静态ip 设置主机名 设置hosts 安装ssh 2. Ubuntu系统设置 禁用swap 修改内核参数 3. 安装containerd 4. 安装Kubernetes ...

  9. 解决.net Core中WebApi自动Model验证导致数据格式不能统一

    简言: 最近做项目用WebAPI Core时,想把返回数据的格式,统一弄成:{"errorMsg":"xxx","Data":"x ...

  10. Nmap常用方法

    1.扫描单个目标地址  在Nmap后面直接添加目标地址即可扫描  nmap 目标地址  2.扫描多个目标地址  如果目标不在同一网段,或在同一网段但不连续且数量不多,可以使用该方法进行扫描  nmap ...