Vue2数据响应式再次理解

news2024/12/25 8:54:17

今天遇到一个问题吧算是,项目用的vue2,期望把数据的某个数组清空,在组件内部调用this.xxarray = [] 没问题,但是把数组引用传递到另外一个函数,执行赋值清空,会失效;大概的复原如下图

在这里插入图片描述
分析:vue2 采用defineproperty给内部的data等属性增加拦截器,对于数组对象等复杂数据类型,例如数组,只对其中的某些函数进行了重写在这里插入图片描述
也就是说 xxarray = [] 理论上是不被监听的,这样操作不会触发视图的更新。但是在组件内通过this.xxarray = []却可以,原因是this指向组件实例,也对其属性进行了监听,包括data中的数据,通过this来修改数组的值,是会被监听到的。但是如果把该数组的引用当作参数传递到另外一个函数进行操作,由于并没有经过this访问,且该赋值操作并不是vue重写数组的几个方法之一,自然不会被监听到,也就无法更新视图。
上面的现象都解释通了,还有一个问题就是上面第一个图的结果,为什么传递了数组的引用到另外一个函数,一开始两个引用是相同的,后面进行赋值操作后,两个引用不相等了。很好理解,纯js理解,看下图

在这里插入图片描述
一个数组作为参数传递到一个函数内部,是会新开一个函数空间,比如该函数里面的data变量,就是在这个空间的,数组作为参数传递的确实是引用,但是这个引用是赋值给data这个变量的,通过data去改变其中属性的值,可以,因为改的是数组内存地址的内容;但是如果直接改data,将其赋值为 [] 或者null,那就是把原来传入的引用抛弃,重新赋值给data,data指向变了,自然和原来的传入数组没啥关系了。

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

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

相关文章

直播预约:存内计算加速大模型-未来智能计算的新引擎

直播简介: 在人工智能飞速发展的今天,大模型的训练和推理对计算资源的需求日益增长。传统计算架构已逐渐难以满足其对速度和效率的极致追求。本次直播,我们将深入探讨如何利用存内计算技术,为大模型带来革命性的加速效果。 直播亮点: 技术…

C++ 33 之 const 修饰静态成员

#include <iostream> #include <string.h> using namespace std;// 定义静态const数据成员时&#xff0c;最好在类内部初始化,避免在类外重复初始化&#xff0c;也为了代码的可读性和可维护性class Students03{ public:// 两种写法都可以const static int s_a 10;…

node 中间件使用例子

NodeJS在中间件领域有着较为广泛的应用&#xff0c;他能做一些中间层事件&#xff0c;把服务端一部分的代码抽出来&#xff0c;减少处理冗余事情付出的代价&#xff0c;同时让服务真正做业务处理而不用关心页面的事情 常见的应用场景有&#xff1a; 跨域&#xff1a;解决跨域问…

内存卡提示需要格式化?别急,这样拯救你的数据

一、内存卡突然提示需要格式化 在日常生活中&#xff0c;我们经常会使用到内存卡来存储照片、视频、文档等重要数据。然而&#xff0c;有时当我们试图访问内存卡时&#xff0c;却会遭遇一个令人头疼的问题——系统突然提示“内存卡需要格式化”。这意味着我们无法直接读取或写…

ARM32开发--IIC软实现

知不足而奋进 望远山而前行 目录 文章目录 前言 开发流程 GD32F4软件I2C初始化 GD32F4软件I2C引脚功能 写操作 读操作 总结 前言 在嵌入式系统开发中&#xff0c;软件实现的I2C通信协议扮演着至关重要的角色。本文将深入探讨如何在GD32F4系列微控制器上实现软件I2C功能…

『大模型笔记』缩放定律(scaling laws)是由记忆而非智力解释的吗?

MAC 文章目录 一. 缩放定律(scaling laws)是由记忆而非智力解释的吗?1. 视频原文内容2. 要点总结一般智能的定义规模最大化的论点性能衡量的方式及其影响大语言模型的基准测试大语言模型的本质与记忆基准测试插值的概念与基准测试实例人类和模型的推理与样本效率二. 参考文献一…

CTE-6作文

第一段 现象 引出原因 第二段 感受 举例 意义 危害 第三段 建议 展望 范文1 第一段 第二段 尾段 范文2 首段 第二段 尾段

诊所管理系统哪家会好一点

随着医疗行业的快速发展和信息化进程的加速&#xff0c;诊所作为医疗服务的重要基层单位&#xff0c;其运营管理效率与服务质量的提升愈发依赖于现代化的管理工具。诊所管理系统应运而生&#xff0c;旨在通过集成化、智能化的技术手段&#xff0c;帮助诊所实现诊疗流程优化、资…

用C语言实现扫雷

本篇适用于C语言初学者&#xff0c;主要涉及对于函数&#xff0c;数组&#xff0c;分支循环的运用。 目录 设计思想&#xff1a; 总代码&#xff08;改进后&#xff09;&#xff1a; 运行结果展示&#xff1a; 分布介绍&#xff1a; 声明&#xff1a; 代码主体部分&#…

精准定位,智慧提纯:高级数据提取策略

在数据驱动的时代&#xff0c;高级数据提取策略成为企业决策、科学研究以及各类项目成功的关键。数据提取&#xff0c;不仅仅是简单地收集信息&#xff0c;而是需要精准定位目标数据&#xff0c;并通过智慧提纯方法&#xff0c;从海量数据中提取出有价值、有深度的信息。本文将…

如何计算 GPT 的 Tokens 数量?

基本介绍 随着人工智能大模型技术的迅速发展&#xff0c;一种创新的计费模式正在逐渐普及&#xff0c;即以“令牌”&#xff08;Token&#xff09;作为衡量使用成本的单位。那么&#xff0c;究竟什么是Token呢&#xff1f; Token 是一种将自然语言文本转化为计算机可以理解的…

【成品设计】基于STM32的单相瞬时值反馈逆变器

《基于STM32的单相瞬时值反馈逆变器》 整体功能&#xff1a; 图13 软件框图 如图13所示&#xff0c;由于本设计中需要通过定时器中断执行一些程序&#xff0c;故首先对中断进行初始化。中断初始化以后即为对串口进行初始化&#xff0c;总共初始化了两个串口&#xff0c;第一个…

轻兔推荐 —— Alist

via&#xff1a;轻兔推荐 - https://app.lighttools.net/ 简介 Alist是一个开源自建网盘程序&#xff0c;界面简洁&#xff0c;功能完善&#xff0c;支持多种存储后端和文件预览功能。 - 分布式设计&#xff0c;无需中心服务器&#xff0c;数据均在本地设备 - 配置灵活&…

springboot整合sentinel接口熔断

背景 请求第三方接口或者慢接口需要增加熔断处理&#xff0c;避免因为慢接口qps过大导致应用大量工作线程陷入阻塞以至于其他正常接口都不可用&#xff0c;最近项目测试环境就因为一个查询的慢接口调用次数过多&#xff0c;导致前端整个首页都无法加载。 依赖下载 springboo…

「C/C++ 01」大小端字节序

目录 一、什么是大小端字节序&#xff1f; 二、为什么会出现大小端之分&#xff1f; 三、实际应用 四、如何区分当前机器是大端还是小端&#xff1f; 1. 用代码来区分 2. 通过VS编译器的监视窗口和内存窗口 一、什么是大小端字节序&#xff1f; 字节序 &#xff1a;是指二进制…

8. 文本三剑客之sed

文章目录 8.1 介绍8.1.1 工作流程8.1.2 命令格式 8.2 sed 使用8.2.1 查找/打印8.2.2 添加8.2.3 修改8.2.4 删除 8.3 保存操作后的内容 8.1 介绍 sed编辑器被称作流编辑器&#xff08; stream editor&#xff09;&#xff0c;和普通的交互式文本编辑器恰好相反。在交互式文本编…

win10打开共享设置

win10打开共享设置

themleaf 页面弹层取值

themleaf 页面弹层取值 创作背景themleaf页面事件onbluronclick 页面参数提交 创作背景 个人在日常开发中&#xff0c;遇到了一个需求页面&#xff0c;页面交互较多&#xff0c;用到的事件也很丰富&#xff0c;特此记录&#xff0c;方便后续查找也方便有需要的开发者采用&…

chrome浏览器设置--disable-web-security解决跨域

在开发人员于后台进行接口测试的时候&#xff0c;老是遇到跨域问题&#xff0c;这时前端总是会让后台添加跨域请求头来允许跨域请求&#xff0c;今天介绍一个简单的方法跨过这一步操作的设置。 –disable-web-security参数&#xff0c;禁用同源策略&#xff0c;利于开发人员本…

Postman 请求参数传递指南:Query、Path和Body

Postman 作为一个功能强大的工具&#xff0c;极大地简化了 API 测试和调试的过程&#xff0c;提供了发送请求和检查响应的直接方法。本文将着重介绍如何在 Postman 中高效地处理请求参数&#xff0c;以提高 API 测试和开发的便利性。 1、解析请求参数 首先&#xff0c;我们需要…