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为例):六、模型搭建:七、损失函数、梯度下降:八、模型保存与加载:九、模型训…

Oracle select for update 用法

SELECT FOR UPDATE 用法 1、SELECT…FOR UPDATE 语法 SELECT … FOR UPDATE [OF column_list][WAIT n|NOWAIT][SKIP LOCKED]; 其中:   OF 子句用于指定即将更新的列,即锁定行上的特定列。   WAIT 子句指定等待其他用户释放锁的秒数,防止…

基于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

使用Spring的 Environment 和 ConfigurableEnvironment 来在springboot应用启动过程中对属性进行修改。

1.修改yml文件的问题 我在上一篇文章中介绍了使用《java启动springboot项目前根据环境变量动态改编yaml文件的变量值》但是在FC启动后发现存在问题 springboot初始化时需要初始化数据库,这时就会存在数据库连接在yml文件修改之前,这就会导致链接数据库…

feign 报错 Connection reset executing POST

feign 连接异常: feign.RetryableException: Connection reset executing POST替换 feign的 client : Feign在默认情况下使用的是JDK原生的 URLConnection 发送HTTP请求,没有连接池。 可以尝试替换成 httpclient 或者 okhttp。调整最大连接…

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

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

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

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

Android 11 使用HAL层的ffmpeg库(1)

1.frameworks/av/media目录下面的修改 From edd6f1374c1f15783d9920ebda22ea915e503775 Mon Sep 17 00:00:00 2001 From: GW00219471 <zhumingxingnoboauto.com> Date: Wed, 17 Jan 2024 15:16:10 0800 Subject: [PATCH] ?UTF-8?q?[V35CUX-4542]:E7A7BBE6A48Dcux20E8…

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

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

VS+QT 打包可执行文件.exe

切换成release版本&#xff0c;同时更改项目属性中release配置下的各个属性&#xff0c;确保匹配 重新生成解决方案&#xff0c;将生成的.exe复制到一个空白文件夹中 执行&#xff1a; cd D:\QT\5.12.10\msvc2015_64\binwindeployqt C:\Users\DELL\Desktop\serials\MainWind…

食南之徒~马伯庸

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

MMU(内存管理单元)

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

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

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

三、GPIO口

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

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

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