Vue中的数据代理

已于 2022-09-20 13:54:27 修改
阅读量186 收藏 1
点赞数
分类专栏： vue 文章标签： vue.js 前端 javascript
于 2022-05-12 16:33:42 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_64707449/article/details/124733092
版权

数据代理：一个对象对另一个对象的属性进行操作（读/写）

通俗来讲，数据代理是一个对象代理data对象中的属性的操作

1. 通过Object.defineProperty()把data对象的所有属性添加到这个对象上

2. 为每个添加到这个对象上的属性，都指定一个getter/setter

3. 在getter/setter内部去操作（读/写）data中对应的属性

以上三条可以理解为：

首先你创建了一个实例化vue对象，vm。

vm实例化底层有一个_data对象,_data对象里的数据来源于data。

但是你直接vm.data是访问不到data里面的属性的。

只能是通过vm._data.name或者是vm._data.address来访问

数据代理也可以理解为：把vm对象中没有的name和address属性添加,通过getter读取到_data中的值。

name和address的属性修改，通过setter映射到_data对象中，从而修改页面上的数据

数据代理的好处：更加方便操作data对象中的数据

是阿狸
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
【VUE前进之路】使用数据代理，计算属性与监视属性的妙用
大熊李子的博客
03-15 3025
大家好我是大熊🐻一个学前端的旅行者也是一个前进的创作者，奋进再这篇土地，希望能和您相遇✍善于利用零星时间的人，才会做出更大的成绩来。——华罗庚。
详解Vue源码之数据的代理访问
12-12
2) vue 数据代理: 通过 vm 对象（即this）来代理 data 对象中所有属性的操作 3) 好处: 更方便的操作 data 中的数据 4) 基本实现流程 a. 通过 Object.defineProperty()给 vm 添加与 data 对象的属性对应的属性描述符 ...
简单理解Vue中的数据代理
学习，是熵减的最有效途径。
08-12 598
通过代理对中属性的操作(读/写)，可以理解为现实生活中的，比如，我们要租一个房子，我们和中介谈价钱、谈条件，那么，实际的房主就是，中介公司就是。Vue中使用数据代理的好处： 更方便的操作 data 中的数据。...
vue的数据代理以及好处
stars______的博客
10-10 370
为每个添加到vm上的属性，都指定一个getter、setter。3.基本代理：通过Object.defineProperty()把data对象中所有属性添加到vm中。在getter、setter中（读、写）data中的属性。1.vue中的数据代理：通过vm对象来代理data对象中的属性的操作。2.数据代理的好处：数据代理可以更方便的操作data里面的数据。
vue学习笔记6----数据代理
qq_59954212的博客
08-17 250
vue中的数据代理
对vue中的数据劫持/数据代理/数据观察的理解
01-08
1、什么是数据劫持？ 首先写一个简单vue 例子： 数据劫持 {{message}} var vm = new Vue({ el:#app, data(){ return { message:测试数据 } } }) 将数据挂载到视图上很简单，使用{{}}...
vue实现将数据存入vuex中以及从vuex中取出数据
12-13
* 存放 ** 数据 * **/ // initial state const state = { all: { ID:'', BrandID:'' } } // getters const getters = {} // actions const actions = {} // mutations const mutations = { setPrint...
Vue数据驱动模拟实现5
11-26
当某个数据有所变动时，它会向上传递，通俗点就是冒泡至根结点，这样我们也可以在自己代码中使用事件代理咯，哇卡哇卡。 示意图如下所示： 好了，说了这么多，我们下面就一起来实现下吧。 二、正文 注：以下代码皆...
vue2数据劫持源码剖析
最新发布
04-16
vue2如何实现对数据的响应式代理，又是如何实现数组的添加，删除等方法时视图的更新。
Vue学习：Vue中的数据代理
qq_49916504的博客
06-02 1708
数据代理
Vue的学习之路--Vue的数据代理
m0_59132472的博客
05-07 869
数据代理是一种技术，通过代理、拦截对象属性及方法的访问请求，实现与该对象的交互。在Vue中，数据代理是指在Vue实例化一个组件时，Vue会将组件中的data属性中的数据转化为getter/setter，并将这些getter/setter注册到Vue的响应式系统中，在Vue实例中访问组件中的数据时，实际上是访问了这个getter/setter，它能统计出数据的依赖关系，并在数据变化时更新视图。
Vue之数据代理（getter、setter）
浩泽学编程的博客
05-24 1465
数据代理以上就是对数据代理的讲解，以及对Object.defineProperty()这个API的简讲。
【Vue】数据代理
Superman_H的博客
03-23 1486
# Vue2 的响应式 实现原理： - 数组：通过重写 [更新方法] 来实现拦截 - 对象：通过 `Object.defineProperty()` 对属性的读取、修改进行拦截 data 属性中，只有属性描述符 configurable 为 true 的属性才可以被 VueJS 进行依赖收集。VueJS 会在 data 属性中的每个属性上调用 `Object.defineProperty()` 方法，为它们添加 getter 和 setter。这样，当你访问或修改 data 属性中
vue技术之数据代理
m0_62956385的博客
08-04 226
vue技术之数据代理
vue数据代理
见证自己学习,成长的记录
10-21 2670
想要学习vue的数据代理，首先需要知道Object.defineProperty方法，vue的数据劫持，数据代理，计算属性都要到了这个方法1 vue中的数据代理通过vm对象来代理data对象中属性的操作(读/写)2 vue中的数据代理的好处更加方便的操作data中的数据3 基本原理通过Object.defineProperty()把data对线中所有属性添加到vm上为每一个添加到vm上的属性，都准备一个getter/setter方法。
【理解Vue数据代理】
小田是个程序员的博客欢迎你的到来呀~
04-02 3093
Vue中数据代理就是通过Object.defineProperty()把data对象中所有的属性添加到vm上，且数据从data到vm中的过程，又为每一个属性添加上getter和setter方法，用户修改或者读取时，也是通过getter或setter方法访问_data，_data返回或操作data中的数据实现的。
vue2中的数据代理
05-27
在Vue2中，数据代理是通过Object.defineProperty()实现的。在Vue实例化时，Vue会对data对象中的每个属性都进行数据代理。具体来说，Vue会将data对象中的属性转化为getter/setter，使得我们可以通过this访问到data中...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值