vue2学习笔记9 - 通过观察vue实例中的data,理解Vue中的数据代理

接着上一节,学一学vue中的数据代理。学vue这几天,最大的感受就是,名词众多,听得发懵。。不过,深入理解之后,其实说得都是一回事。

在Vue中,数据代理是指在实例化Vue对象时,将data对象中的属性代理到Vue实例上,以便在模板中直接访问和修改data对象中的属性。

看起来很晕,其实在vue2学习笔记6 - 初步了解vue的实例和原型中已经用到,并且我当时有一个疑问:

64bfe1e73e63470c9a35572fd0e28e09.png

红框中便是应用:我们可以直接访问对象中的属性,而不必通过$data来访问。

那么我的疑问的答案也来了:简化模板中访问和修改data中的属性的操作。通过数据代理,我们可以直接在模板中使用this来访问和修改data中的属性,而无需使用this.data来访问和修改。

下面,说说稍微底层一点的东西。

7b8feae76a5a44c2a89e0e0b921ab7c3.png

在vue实例中,定义了两个属性:name和address。

在console中打印出vue实例vm,我们可以从中看到_data中有两个属性,name和address。这是我们定义的。

de8f56749ee647fbbc5e1e8b7e72550a.png

然而,在vm中,外层,我们同样可以看到两个属性(不带$或_,即不是vue的内置属性或方法,而是用户自定义的)。

8993abfeb48f4d379fccf69530032d5e.png

其实,我们并没有在vm下定义这两个属性,只是在data中定义的,外面这两个,便是vue通过object.defineProperty自动给我们添加的,并且也调用了setter、getter方法,这便是vue的数据代理。

dfc3dba48fbb45a384443b931fe3d471.png

需要注意的是,数据代理只能代理data对象中的属性,无法代理data对象中的嵌套属性(对象)。如果需要代理嵌套属性,可以使用computed属性来实现。另外,数据代理也无法代理Vue实例上已有的属性和方法(所以,自定义属性时,不要占用vue关键字)。

 

 

 

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/pingmian/48381.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

神经网络模型实现(训练、测试)

目录 一、神经网络骨架:二、卷积操作:三、卷积层:四、池化层:五、激活函数(以ReLU为例):六、模型搭建:七、损失函数、梯度下降:八、模型保存与加载:九、模型训…

基于RFID的课堂签到系统设计

1.简介 基于RFID的课堂签到系统设计是一种利用无线射频识别(RFID)技术实现课堂自动签到的系统。这种系统通过RFID标签(通常是学生携带的卡片或手环等)与安装在教室内的RFID读写器之间的无线电信号进行数据交换,从而实现…

移动设备安全革命:应对威胁与解决方案

移动设备已成为我们日常工作和家庭生活中不可或缺的工具,然而,对于它们安全性的关注和投资仍然远远不够。本文深入分析了移动设备安全的发展轨迹、目前面临的威胁态势,以及业界对于这些安全漏洞响应迟缓的深层原因。文中还探讨了人们在心理层…

Java跨平台的原理是什么?JDK,JRE,JVM三者的作用和区别?xxx.java和xxx.class有什么区别?看这一篇就够了

目录 1. Java跨平台相关问题 1.1 什么是跨平台(平台无关性)? 1.2 跨平台(平台无关性)的好处? 1.3 编译原理基础(Java程序编译过程) 1.4Java跨平台的是实现原理? 1.4.1 JVM(Java虚拟机) 1.4.2 Class文件 1.4.3 …

485开关量采集模块16路I/O输入输出ModbusRTU协议—DAM-3950A

品牌:阿尔泰科技 型号:DAM-3950A 概述: DAM-3950A为16路隔离数字量输入,6路C型10路A型信号继电器输出模块,RS485通讯接口,带有标准ModbusRTU协议。配备良好的人机交互界面,使用方便&#xff…

Linux 文件安装的mysql 启动

1、找到my.cnf 2、确定文件类容: 并确保这些重要的配置:basedir 、datadir、socket 文件或目录都存在 3、找到mysqld 位置 4、启动mysqld mysqld --defaults-file/etc/my.cnf --usermysql

c++基础(类和对象中)(类的默认成员函数)

目录 一.构造函数(类似初始化) 1.概念 2.构造函数的特点 二.析构函数(类似 销毁对象/空间) 三.拷贝构造函数(类似复制粘贴的一种 初始化 ) 1.概念: 2.拷贝构造的特点: 四.赋值运算符重载&#xff08…

level 6 day2-3 网络基础2---TCP编程

1.socket(三种套接字:认真看) 套接字就是在这个应用空间和内核空间的一个接口,如下图 原始套接字可以从应用层直接访问到网络层,跳过了传输层,比如在ubtan里面直接ping 一个ip地址,他没有经过TCP或者UDP的数…

华为OD机试(C卷,200分)- 二叉树计算

题目描述 给出一个二叉树如下图所示: 请由该二叉树生成一个新的二叉树,它满足其树中的每个节点将包含原始树中的左子树和右子树的和。 左子树表示该节点左侧叶子节点为根节点的一颗新树;右子树表示该节点右侧叶子节点为根节点的一颗新树。…

食南之徒~马伯庸

◆ 第一章 >> 老赵,这你就不懂了。过大于功,要受罚挨打,不合算;功大于过,下回上司有什么脏活累活,第一时间会想到你,也是麻烦多多。只有功过相抵,上司既挑不出你的错&#xf…

MMU(内存管理单元)

概述 MMU 即内存管理单元,是用硬件电路逻辑实现的一个地址转换器件,它负责接受虚拟地址和地址关系转换表,以及输出物理地址 线性地址 由于保护模式的内存模型是分段模型,它并不适合于 MMU 的分页模型,所以我们要使用…

springcloud-config客户端启用服务发现报错找不到bean EurekaHttpClient

背景 在对已有项目进行改造的时候,集成SpringConfigStarter,编写完bootstrap.yml,在idea 启动项中编辑并新增VM options -Dspring.cloud.config.discovery.enabledtrue,该版本不加spring不会从configService获取信息,…

三、GPIO口

我们在刚接触C语言时,写的第一个程序必定是hello world,其他的编程语言也是这样类似的代码是告诉我们进入了编程的世界,在单片机中也不例外,不过我们的传统就是点亮第一个LED灯,点亮电阻,电容的兄弟&#x…

[CSS] 浮动布局的深入理解与应用

文章目录 浮动的简介元素浮动后的特点解决浮动产生的影响浮动后的影响解决浮动产生的影响 浮动相关属性实际应用示例示例1:图片与文字环绕示例2:多列布局示例3:响应式布局 总结 浮动布局是CSS中一种非常强大的布局方式,最初设计用…

java项目(knife4j使用,静态资源未放在static资源包下,公共字段自动填充,Spring Cache与Spring Task)

Knife4j(生成接口文档) 使用swagger你只需要按照它的规范去定义接口及接口相关的信息,就可以做到生成接口文档,以及在线接口调试页面。官网:https://swagger.io/ Knife4j是为Java MVC框架集成Swagger生成Api文档的增强解决方案。…

JMeter请求导出Excel

前言 今天记录一个使用JMeter模拟浏览器请求后端导出,并下载Excel到指定位置的过程 创建请求 同样先创建一个线程组,再创建一个请求,设置好请求路径,端口号等 查看结果树 右键--添加--监听器--查看结果树 这里可以查看&#…

Windows搭建RTMP视频流服务器

参考了一篇文章,见文末。 博客中nginx下载地址失效,附上一个有效的地址: Index of /download/ 另外,在搭建过程中,遇到的问题总结如下: 1 两个压缩包下载解压并重命名后,需要 将nginx-rtmp…

【Linux】编辑器vscode与linux的联动

1.vscode简单学习 vscode是编辑器,可以写各种语言的程序 下载链接:Download Visual Studio Code - Mac, Linux, Windows 来用一下vscode 我们保存了就能在我们的那个文件夹里面看到这个 这个就是编辑器,跟我们的文本文件好像差不多&#…

栈及栈的应用(有效的括号 力扣20)

栈的概念 栈是一种特殊的线性表,其只允许在固定的一端进行插入和删除元素操作。进行数据插入和删除操作的一端称为栈顶,另一端称为栈底。栈中的数据元素遵守后进先出LIFO(Last In First Out)的原则。 画个图理解一下 咱们可以观…

在项目中加入 husky + lint-staged + eslint,代码检测格式化

背景 由于日常工作的多人协作中,会因为个人代码编写风格导致代码在不同人电脑上,会有异常代码格式的提示,为了解决这个小问题,我们可以使用 husky lint-staged 来对代码进行一定程度上的格式化,使格式风格统一&#x…