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中,此种方式可以持久的将数据存储在客户端要使用代理, ...

随机推荐

【笔记】CF1659E AND-MEX Walk 及相关
题目传送门位运算设题目中序列 \(w_1,w_1\& w_2,w_1\& w_2\& w_3,\dots,w_1\& w_2\& \dots \& ...
sublime text配置java运行环境
java正常运行流程首先一个 test.java 文件如果要运行这个文件需要先编译 javac test.java 然后在同级目录会生成一个test.class 文件然后 java test 来 ...
【SQL进阶】【REPLACE/TIMESTAMPDIFF/TRUNCATE】Day01：增删改操作
一.插入记录 1.插入多条记录自己的答案: INSERT INTO exam_record(uid, exam_id, start_time, submit_time, score) VALUES ...
【每日一题】【排序】2021年11月13日-215. 数组中的第K个最大元素※
给定整数数组 nums 和整数 k,请返回数组中第 k 个最大的元素. 请注意,你需要找的是数组排序后的第 k 个最大的元素,而不是第 k 个不同的元素. 方法1:调库 class Solution ...
为什么推荐Kestrel作为网络开发框架
为什么推荐Kestrel 网络框架千千万万,在dotnet平台,我们可以直接手撸Socket,也可以基于dotnetty来开发,或者选择某些第三方类似于dotnetty的网络库,为何我要推荐Kestr ...
帮你短时间拿下Git，Git详细教程（浓缩的都是精华）
Git学习笔记 Git是一个开源的分布式版本控制系统,可以有效.高速地处理从很小到非常大的项目版本管理. 在团队开发中git是必不可少的,它是目前为止最流行的版本控制工具 Git是免费.开源的,由Li ...
深度学习GPU加速配置方法
深度学习GPU加速配置方法一.英伟达官方驱动及工具安装首先检查自己的电脑驱动版本,未更新至最新建议先将驱动更新至最新,然后点击Nvidia控制面板 2.在如下界面中点击系统信息,点击显示可以看见当 ...
MySQL数据结构(索引)
目录一:MySQL索引与慢查询优化 1.什么是索引? 2.索引类型分类介绍 3.不同的存储引擎支持的索引类型也不一样二:索引的数据结构 1.二叉树(每个节点只能分两个叉) 2.数据结构(B树) 3 ...
区块链,中心去,何曾着眼看君王?用Go语言实现区块链技术,通过Golang秒懂区块链
区块链技术并不是什么高级概念,它并不比量子力学.泡利不相容原则.哥德巴赫猜想更难以理解,但却也不是什么类似"时间就是金钱"这种妇孺皆知的浅显道理.区块链其实是一套统筹组织记录的方法 ...
在IQuery中使用除法提示"Numeric value does not fit in a System.Decimal"
起因有个需求是需要汇总(单耗=单件用量*1+损耗率)的值,由于现在我们数据库中存的XX率都是放大了一百倍(即10%数据库存的是10),然后就很自然的写了个linq汇总如下 materialOrder ...

Vue08 数据代理