vue的数据代理

最新推荐文章于 2022-10-21 16:32:13 发布
最新推荐文章于 2022-10-21 16:32:13 发布
阅读量222 收藏
点赞数 1
分类专栏： vue2 文章标签： vue
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_52135740/article/details/119113356
版权

数据代理

  1. vue中的数据代理: 通过vm对象来代理data对象中属性的操作(读/写)
  2. 好处: 通过vm对象就可以方便的操作data中的数据
  3. 基本原理:
    1). 通过Object.defineProperty(vm, key, {})给vm添加与data对象的属性对应的属性
    2). 所有添加的属性都包含get/set方法
    3). 在get/set方法中去操作data中对应的属性

属性描述符：
1.数据描述符
configurable:是否可以重新定义
enumerable：是否可以枚举
value：初始值
writable：是否可以修改属性值
2.访问描述符
get：是一个回调函数，根据其他相关的属性动态计算得到当前属性值
set：也是一个回调函数，监视当前属性值的变化，更新其他相关的属性值

在这里插入图片描述
在这里插入图片描述

坏萝卜
关注
  • 1
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
详解Vue源码之数据的代理访问
12-12
2) vue 数据代理: 通过 vm 对象（即this）来代理 data 对象中所有属性的操作 3) 好处: 更方便的操作 data 中的数据 4) 基本实现流程 a. 通过 Object.defineProperty()给 vm 添加与 data 对象的属性对应的属性描述符 ...
03数据绑定
baidu_41922918的博客
07-23 375
Vue中有2种数据绑定的方式： 1.单向绑定(v-bind)：数据只能从data流向页面。 2.双向绑定(v-model)：数据不仅能从data流向页面，还可以从页面流向data。 备注： 1.双向绑定一般都应用在表单类元素上（如：input、select等） 2.v-model:value 可以简写为 v-model，因为v-model默认收集的就是value值。 3.v-bind:可以简写为: <!DOCTYPE html> <html> <head> &l
VUE的数据代理
Flora's Zone
04-19 300
VUE的数据代理
vue中的数据代理
weixin_44628177的博客
05-14 1782
数据代理是什么： 通过一个对象代理，对另一个对象中属性的操作 简单就是说：可以通过 对象b 对 对象a 中的属性进行操作 这里我学到的数据代理是用Object.defineProperty这个方法进行操作 let obj = {x:100}; let obj2 = {y:200}; Object.defineProperty(obj2,'x',{ get(){ return obj.x; //这里添加的obj2的
06_03 Vue中的数据代理
林笙的博客
08-08 105
代码： <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Vue中的数据代理</title> <script src="../js/vue.js"></script> </head> <body> <div id="root"> <h1>学校名称
对vue中的数据劫持/数据代理/数据观察的理解
01-08
1、什么是数据劫持？ 首先写一个简单vue 例子： 数据劫持 {{message}} var vm = new Vue({ el:#app, data(){ return { message:测试数据 } } }) 将数据挂载到视图上很简单，使用{{}}...
Vue数据驱动模拟实现5
11-26
当某个数据有所变动时，它会向上传递，通俗点就是冒泡至根结点，这样我们也可以在自己代码中使用事件代理咯，哇卡哇卡。 示意图如下所示： 好了，说了这么多，我们下面就一起来实现下吧。 二、正文 注：以下代码皆...
理解Proxy及使用Proxy实现vue数据双向绑定操作
01-19
如果对vue2.xx了解或看过源码的人都知道，vue2.xx中使用 Object.defineProperty()方法对该对象通过 递归+遍历的方式来实现对数据的监控的，具体了解 Object.defineProperty可以看我上一篇文章...
vue实现将数据存入vuex中以及从vuex中取出数据
12-13
* 存放 ** 数据 * **/ // initial state const state = { all: { ID:'', BrandID:'' } } // getters const getters = {} // actions const actions = {} // mutations const mutations = { setPrint...
Vue数据代理
qq_36582776的博客
11-02 104
1.Object.defineProperty 为对象动态定义属性。 通过get和set方法，相当于将两个不相关的number和person关联起来。 number=18 let person={ name:"张"， sex:"男" } Obeject.defineProperty(person,"age"){ value:18, //给age值为18 enumrable:true, //控制属性是否可以枚举，默认false writable: true, //
Vue的数据代理
richest_qi的博客
01-21 1059
文章目录前知识数据属性访问器属性数据代理数据代理举例Vue中的数据代理 前知识 关于 Object.defineProperty()，可以通过《了解下数据属性和访问器属性的特性》这篇文章复习下。 数据属性 value，属性值。 enumerable，控制属性是否可枚举，默认false。 writable，控制属性是否可修改，默认false。 configurable，控制属性是否可被删除，默认false。 let person = { name:"张三" } Object.definePrope
vue数据代理
见证自己学习,成长的记录
10-21 2655
想要学习vue的数据代理，首先需要知道Object.defineProperty方法，vue的数据劫持，数据代理，计算属性都要到了这个方法1 vue中的数据代理通过vm对象来代理data对象中属性的操作(读/写)2 vue中的数据代理的好处更加方便的操作data中的数据3 基本原理通过Object.defineProperty()把data对线中所有属性添加到vm上为每一个添加到vm上的属性，都准备一个getter/setter方法。
Vue_数据代理
liaoai的博客
12-02 588
文章目录1.回顾Object.defineproperty方法2.何为数据代理？3.Vue中的数据代理 1.回顾Object.defineproperty方法 例1： <body> <script type="text/javascript"> let person = { name:"张三", sex:"男" } Object.defineProperty(pe
Vue中的数据代理
har的博客
06-06 60
Vue中的数据代理
vue数据劫持和数据代理区别
最新发布
07-13
Vue的数据劫持（Data Interception）和数据代理（Data Proxy）是Vue中实现响应式数据的两种不同方式。 数据劫持是指通过重写对象的 getter 和 setter 方法，来监听对象属性的读取和修改操作。Vue在初始化时会遍历...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值