vue中的data与_data的关系是什么

vue中的data与_data的关系是什么 -代理

在 Vue 实例中,data 属性是用户定义的用于存储数据的对象,而 _data 是 Vue 内部用于存储数据的对象。它们之间的关系是 Vue 实例的 data 属性实际上是对 _data 的代理。

当你在创建 Vue 实例时,Vue 会将用户定义的 data 属性与内部的 _data 对象建立关联,并在代理过程中添加一些访问和观察的逻辑。这样,你在访问 Vue 实例中的数据时实际上是在访问 _data 中的数据。

下面是一个简单的示例:

<div id="app"><p>{{ message }}</p>
</div><script>
const app = new Vue({el: '#app',data: {message: 'Hello Vue!'}
});console.log(app._data.message); // 这里访问的是内部的 _data 对象的数据
</script>

在这个示例中,app.data 是用户定义的数据,而 app._data 是 Vue 内部存储数据的对象。message 属性实际上是通过代理从 app._data 中取得的。

需要注意的是,直接访问 _data 不是 Vue 推荐的做法,因为 Vue 提供了更高级的 API 来访问和操作数据,如计算属性、观察属性等。直接操作 _data 可能绕过 Vue 的响应式系统,导致数据不被正确地追踪和更新。

下面是一个实例,直接修改数组中第一个元素对象的值。

<!DOCTYPE html>
<html><head><meta charset="UTF-8" /><title>更新时的一个问题</title><script type="text/javascript" src="../js/vue.js"></script></head><body><!-- 准备好一个容器--><div id="root"><h2>人员列表</h2><button @click="updateMei">更新马冬梅的信息</button><ul><li v-for="(p,index) of persons" :key="p.id">{{p.name}}-{{p.age}}-{{p.sex}}</li></ul></div><script type="text/javascript">Vue.config.productionTip = falseconst vm = new Vue({el:'#root',data:{persons:[{id:'001',name:'马冬梅',age:30,sex:'女'},{id:'002',name:'周冬雨',age:31,sex:'女'},{id:'003',name:'周杰伦',age:18,sex:'男'},{id:'004',name:'温兆伦',age:19,sex:'男'}]},methods: {//注意vm是vue实例vm._data.student =vm.student ,原理vue的数据代理,把vm中的属性代理到了_dataupdateMei(){// this.persons[0].name = '马老师' //奏效// this.persons[0].age = 50 //奏效// this.persons[0].sex = '男' //奏效    // this.persons[0] = {id:'001',name:'马老师',age:50,sex:'男'} //失效                      Vue.set(this.persons, 0, {id:'001',name:'马老师',age:50,sex:'男'})//奏效this.persons.splice(0,1,{id:'001',name:'马老师',age:50,sex:'男'})//奏效}}}) </script>
</html>

上面案例直接修改数组的第一个元素会失效,原因是Vue把data封装为_data时做了响应式处理(代理),给所有的属性都加了get和set,类似于Object.defineProperty, 但是这里的直接通过索引整个赋值并不会做响应式处理(不会把data数据代理到_data),也就导致并不会实际修改_data,也就是vue的实际数据,除非使用Vue.set做响应式设值。

Vue在实现响应式数据时,会使用一些特殊的技巧来监听对象的属性变化,但这些技巧对数组的处理比较复杂。Vue能够检测到通过索引直接修改数组元素的情况,因为Vue会拦截数组的变异方法(例如 pushpopshiftunshiftsplicesort),从而能够在这些方法执行时触发视图更新。

然而,直接通过索引赋值的方式修改数组元素this.persons[0] = {id:'001',name:'马老师',age:50,sex:'男'},绕过了 Vue 的代理,Vue 无法检测到这样的变化,因此不会触发视图更新。

this.persons[0].name = '马老师' 这种方式可以生效的原因是因为name是vue实例的一个属性,可以触发响应式代理的更新.也就是会触发vue实例身上为name属性添加的get与set。

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

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

相关文章

drf请求与响应

一 请求与响应 1.1 Request REST framework 传入视图的request对象不再是Django默认的HttpRequest对象&#xff0c;而是REST framework提供的扩展了HttpRequest类的Request类的对象。 REST framework 提供了Parser解析器&#xff0c;在接收到请求后会自动根据Content-Type指…

POP3协议详解

基本介绍 POP3是一种用于从邮件服务器获取电子邮件的协议。它允许邮件客户端连接到邮件服务器&#xff0c;检索服务器上存储的邮件&#xff0c;并将邮件下载到客户端设备上。POP3的工作原理如下&#xff1a; 连接和身份验证&#xff1a; 邮件客户端通过TCP/IP连接到邮件服务器…

MATLAB Mobile - 使用预训练网络对手机拍摄的图像进行分类

系列文章目录 前言 此示例说明如何使用深度学习对移动设备摄像头采集的图像进行分类。 在您的移动设备上安装和设置 MATLAB Mobile™。然后&#xff0c;从 MATLAB Mobile 的“设置”登录 MathWorks Cloud。 在您的设备上启动 MATLAB Mobile。 一、在您的设备上安装 MATLAB M…

qt项目-《图像标注软件》源码阅读笔记-Command类绘图及其子类

目录 1. Command 概览 2. Command2D 1. Command 概览 功能&#xff1a;命令栈基类&#xff0c;用来实现撤销和重做功能。 其子类Command2D和Command3D都是实现父类方法&#xff0c;除了构造函数没有自己的独有方法。 字段&#xff1a; redoCommands&#xff1a;存储re…

【Python百宝箱】模型透明化:机器学习解释性方法深度解读

深入解析机器学习模型&#xff1a;解释性方法全景 前言 在机器学习领域&#xff0c;复杂的模型往往被视为“黑盒”&#xff0c;使得模型的预测结果难以理解。然而&#xff0c;随着对模型可解释性的需求不断增长&#xff0c;解释性方法应运而生&#xff0c;为我们提供了一扇了…

SpringBoot3-数据访问

文章目录 整合SSM场景1. 创建SSM整合项目配置数据源3. 配置MyBatis4. CRUD编写5. 自动配置原理6. 快速定位生效的配置7. 扩展&#xff1a;整合其他数据源1. Druid 数据源 附录&#xff1a;示例数据库 整合SSM场景 SpringBoot 整合 Spring、SpringMVC、MyBatis 进行数据访问场景…

Django 安装

Django 安装 在安装 Django 前&#xff0c;系统需要已经安装了 Python 的开发环境。 如果你还没有安装 Python&#xff0c;请先从 Python 官网 https://www.python.org/ 下载并安装最新版本的 Python。 Django 安装也很简单使包管理工具 pip在终端中就可以了&#xff1a; p…

变量覆盖漏洞 [BJDCTF2020]Mark loves cat 1

打开题目 我们拿dirsearch扫描一下看看 扫描得到 看见有git字眼&#xff0c;那我们就访问 用githack去扒一下源代码看看 可以看到确实有flag.php结合index.php存在 但是当我去翻源代码的时候却没有翻到 去网上找到了这道题目的源代码 <?phpinclude flag.php;$yds &qu…

JWT是什么?它有什么用?

1. 什么是 JWT&#xff1f; JWT是 JSON Web Token 的缩写&#xff0c;通过数字签名的方式&#xff0c;以 JSON 对象为载体&#xff0c;在不同的服务器终端之间安全传输的信息。 2. JWT 有什么用&#xff1f; JWT 最常见的场景就是授权认证&#xff0c;一旦用户登录&#xff…

系列八、VMWare无法启动CentOS7问题排查 解决

一、VMWare无法启动CentOS7 1.1、问题描述 今天在测试代码的时候&#xff0c;需要用到Linux&#xff0c;然后就打开VMWare进行启动&#xff0c;但是启动的时候发现无法启动起来&#xff0c;报了一个如下的错误&#xff1a; 出现了问题那就要解决问题&#xff0c;然后想起来前几…

Koordinator 支持 K8s 与 YARN 混部,小红书在离线混部实践分享

作者&#xff1a;索增增&#xff08;小红书&#xff09;、宋泽辉&#xff08;小红书&#xff09;、张佐玮&#xff08;阿里云&#xff09; 背景介绍 Koordinator 是一个开源项目&#xff0c;基于阿里巴巴在容器调度领域多年累积的经验孵化诞生&#xff0c;目前已经支持了 K8s…

【数据结构】线段树算法总结(单点修改)

知识概览 用作单点修改的线段树有4个操作&#xff1a; pushup&#xff1a;由子节点的信息计算父节点的信息build&#xff1a;初始化一棵树modify&#xff1a;修改一个区间query&#xff1a;查询一个区间 线段树用一维数组来存储&#xff1a; 编号是x的节点&#xff0c;它的父节…

Redis vs Memcached 哪一个更适合你的应用程序?

介绍 Redis和Memcached都是流行的内存缓存解决方案。它们都可以提高应用程序的性能&#xff0c;但它们之间有一些重要的区别。在本文中&#xff0c;我们将比较Redis和Memcached&#xff0c;并讨论哪一个更适合你的应用程序。 Redis Redis是一个开源的内存数据结构存储系统。…

hive中array相关函数总结

目录 hive官方函数解释示例实战 hive官方函数解释 hive官网函数大全地址&#xff1a; hive官网函数大全地址 Return TypeNameDescriptionarrayarray(value1, value2, …)Creates an array with the given elements.booleanarray_contains(Array, value)Returns TRUE if the a…

【MySQL工具】pt-online-schema-change源码分析

通过阅读源码 更加深入了解原理&#xff0c;以及如何进行全量数据同步&#xff0c;如何使用触发器来同步变更期间的原表的数据更改。(&#xff3e;&#xff0d;&#xff3e;)V 目录 源码分析 Get configuration information. Connect to MySQL. Create --plugin. Setup la…

使用 ElementUI 组件构建无边框 Window 桌面应用(WinForm/WPF)

生活不可能像你想象得那么好,但也不会像你想象得那么糟。 我觉得人的脆弱和坚强都超乎自己的想象。 有时,我可能脆弱得一句话就泪流满面;有时,也发现自己咬着牙走了很长的路。 ——莫泊桑 《一生》 一、技术栈 Vite + Vue3 + TS + ElementUI(plus) + .NET Framework 4.7.2…

166. 数独(DFS之剪枝与优化:位运算优化,优化搜索顺序,.可行性剪枝)

166. 数独 - AcWing题库 数独 是一种传统益智游戏&#xff0c;你需要把一个99 的数独补充完整&#xff0c;使得数独中每行、每列、每个 33 的九宫格内数字 1∼9 均恰好出现一次。 请编写一个程序填写数独。 输入格式 输入包含多组测试用例。 每个测试用例占一行&#xff0…

[管理者与领导者-129]:很多人对高情商的误解,工程师要扩展自己的情商吗?工程师如何扩展自己的情商?

目录 前言&#xff1a; 一、什么是高情商&#xff1f; 1.1 什么是高情商 1.2 情商的五大能力 1.3 高情商的层次 1.4 对高情商的误解? 二、工程师需要发展自己的高情商吗&#xff1f; 三、工程师如何扩展自己的情商&#xff1f; 四、什么样的“高情商”的管理者令人讨…

ZZ014城市轨道交通运营与维护赛题第7套

ZZ014城市轨道交通运营与维护赛题第7套 模块1赛题 模块序号 模块1 对应赛项编号 ZZ014 模块名称 城市轨道交通运营服务 子任务数量 12 竞赛时间 60分钟 任务描述 行车组织作业、票务设备故障处置以及突发事件应急处理 职业要素 R基本专业素养 R专业实践技能 R协…

.a库介绍和编译案例

.a库的介绍 库的名字一般是libxxxx.a,利用静态函数库编译成的文件比较大&#xff0c;是因为在链接阶段&#xff0c;会将汇编生成的目标文件.o与引用到的库一起链接打包到可执行文件&#xff0c;对应的链接方式为静态链接。静态库的代码在编译时链接到应用程序中&#xff0c;因…