【VUE】Vue2通过数组下标更改数组视图为什么不会更新?

  • 因为 Vue 2 使用的是 Object.defineProperty()
    对数组进行响应式处理,在对一个对象进行响应式处理时,会遍历对象的所有属性,对其进行劫持,当属性值变化时则会触发视图更新。
  • 但是,Object.defineProperty()
    只能够劫持到数组索引的读取与更改操作,而不能够劫持到数组长度变化、数组变异方法等其他的数组操作。
  • 但是,Vue2 对数组的变异方法进行了重写,实现了视图更新的功能。
  • 因此,当通过数组下标更改数组或者使用数组的length属性缩短数组长度时,Vue2中并不能侦测到以下数组变动。

在 Vue 2.x 中,当通过数组下标更改一个数组的数据时,并不会导致组件重新渲染。
这是因为 Vue 2 使用的是 Object.defineProperty() 对数组进行响应式处理。具体来说,Vue 2 在对一个对象进行响应式处理时,会遍历对象的所有属性,对其进行劫持,当属性值变化时则会触发视图更新。

但是,Object.defineProperty() 只能够劫持到数组索引的读取与更改操作,而不能够劫持到数组长度变化、数组变异方法等其他的数组操作。

但是,Vue2 对数组的变异方法进行了重写,实现了视图更新的功能。

因此,Vue 并不能侦测到以下数组变动:

  • 当通过数组下标直接更改数组中某一项时,例如 arr[1] = ‘new value’;
  • 当使用数组的 length 属性缩短数组长度时,例如 arr.length = 2。

这些情况下,Vue 并不知道具体哪个元素发生了变化以及该如何更新视图,从而无法实现精确的 DOM 操作,需要手动使用 Vue 提供的变异方法来触发视图更新,例如:

  • 通过 Vue.set 或 vm.$set 方法设置指定下标的值;
  • 通过 splice 方法在指定下标位置移除或添加元素。

例如,在 Vue 中使用 vm.$set 方法来更新数组元素:

this.$set(this.items, index, newValue);

或者通过 splice 方法来更新数组元素:

this.items.splice(index, 1, newValue);

这样就可以在更新数组元素时同步更新组件的视图了。

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

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

相关文章

商贸物流痛点解析

商贸物流痛点解析 在当今全球化的商业环境中,商贸与物流之间的紧密协作已成为业务成功的关键因素。然而,许多组织面临着信息不对称、资源配套不足以及系统间隔离等痛点,这些问题严重阻碍了商贸体系与物流、仓储和园区的有效联动,…

Linux高效查日志命令介绍

说明:之前介绍Linux补充命令时,有介绍使用tail、grep命令查日志; Linux命令补充 今天发现仅凭这两条命令不够,本文扩展介绍一下。 命令一:查看日志开头 head -n 行数 日志路径如下,可以查看程序启动是否…

数据库SQL基础教程(二)

目录 连接(JOIN) 语法: 不同的 SQL JOIN INNER JOIN 关键字 LEFT JOIN 关键字 SQL LEFT JOIN 语法 RIGHT JOIN 关键字 SQL RIGHT JOIN 语法 FULL OUTER JOIN 关键字 SQL FULL OUTER JOIN 语法 UNION 操作符 SQL UNION 语法 SQL UNION ALL 语法 SELECT I…

uniapp引入ThorUI的方法

1、下载文件 2、复制相应的文件除了pages 3、往项目中复制即可 4、引入即可实现 5、添加easycome自动引入

单片机(学习)2024.10.9

目录 汇编整体分类 1.指令 2.伪操作 3.伪指令 汇编代码 汇编初始化 数据搬运指令 算术运算指令 加法 减法 乘法 比较指令 跳转指令 逻辑运算指令 与或,异或 左移右移 内存操作 LOAD/STORE 指令 写 读 CPU的栈机制 栈的概念 栈的种类 1.空栈(…

Java生成Excel_低内存占用_更快

EasyExcel:高效Java Excel工具,解决大文件读写难题 EasyExcel是一个基于Java的、快速简洁且能有效解决大文件内存溢出问题的Excel处理工具。它使得用户可以在无需过多关注性能和内存消耗的情况下,轻松实现Excel文件的读写功能。相较于传统的…

无头浏览器测试:如何使用 Puppeteer 和 Browserless?

什么是无头浏览器测试? 无头浏览器测试通常指没有头的物体或东西,在浏览器的语境中,它指的是没有 UI 的浏览器模拟。无头浏览器自动化使用 Web 浏览器进行端到端测试,而无需加载浏览器的 UI。 无头模式是一个功能,它…

Canvas:AI协作的新维度

在人工智能的浪潮中,OpenAI的最新力作Canvas,不仅是一款新工具,它标志着人工智能协作方式的一次革命性飞跃。Canvas为写作和编程提供了一个全新的交互界面,让用户能够与ChatGPT进行更紧密、更直观的协作。 ​​​​​​​ Canvas的…

Android targetSdkVersion 升级为34 问题处理

原因是发布到GooglePlay遭到拒绝,需要最低API level为34。之前为31,感觉还挺高的,但是GooglePlay需要的更高。 记录下处理问题: 1.升级gradle版本为8.0.2 之前是: classpath com.android.tools.build:gradle:7.1.0-…

sql注入第8关

手工注入麻烦 目录 判断闭合方式 判断注入类型 手工注入 1、获取数据库名 2、爆破数据库的名字(security) 3、爆破表的数量 4、判断表名的长度 5、判断表的列名数量 6、判断表的列名的名字 7、获取表的数据 8、判断数据的长度 9、判断数据的…

Golang | Leetcode Golang题解之第464题我能赢吗

题目&#xff1a; 题解&#xff1a; func canIWin(maxChoosableInteger, desiredTotal int) bool {if (1maxChoosableInteger)*maxChoosableInteger/2 < desiredTotal {return false}dp : make([]int8, 1<<maxChoosableInteger)for i : range dp {dp[i] -1}var dfs …

点云深度学习模型PointNet

随着3D传感器&#xff08;如激光雷达、深度相机&#xff09;的广泛应用&#xff0c;点云数据已成为计算机视觉和机器人领域的重要数据形式。点云是一组在三维空间中具有 (x, y, z) 坐标的离散点的集合&#xff0c;用于表示物体的形状或场景。然而&#xff0c;由于点云的无序性、…

pycharm生成的exe执行后报错

元素 application 显示为元素 urn:schemas-microsoft-com:asm.v1^dependentAssembly (此版本的 Windows 不支持)的子元素。 日志名称: Application 来源: SideBySide 日期: 2024/10/8 14:14:12 事件 ID: 72 任务类别: 无 级别…

docker升级mysql

一、首选备份原数据库所有数据 二、在Docker中查看正在运行的MySQL容器名称&#xff0c;可以使用以下命令&#xff1a; docker ps --filter "namemysql" 三、查看当前docker中正在运行mysql的版本 docker exec -it qgz-mysql mysql -V 可以看到当前运行的版本是8.…

[C++]使用纯opencv部署yolov8-cls图像分类onnx模型

【算法介绍】 使用纯OpenCV部署YOLOv8-cls图像分类ONNX模型涉及几个关键步骤。 首先&#xff0c;你需要将YOLOv8-cls模型从PyTorch格式转换为ONNX格式&#xff0c;这是为了确保模型在不同深度学习框架之间的互操作性。这个转换过程通常是通过ultralytics框架中的model.export…

大数据-158 Apache Kylin 安装配置详解 集群模式启动

点一下关注吧&#xff01;&#xff01;&#xff01;非常感谢&#xff01;&#xff01;持续更新&#xff01;&#xff01;&#xff01; 目前已经更新到了&#xff1a; Hadoop&#xff08;已更完&#xff09;HDFS&#xff08;已更完&#xff09;MapReduce&#xff08;已更完&am…

C++刷怪笼(7)string类

目录 1.前言 2.正文 2.1标准库中的string类 2.1.1string类 2.1.2auto和范围for 2.1.3string类的常用接口说明 2.2string类的模拟实现 2.2.1经典的string类问题 2.2.2浅拷贝 2.2.3深拷贝 ​编辑 2.2.4写时拷贝 3.小结 1.前言 前面我们对C的封装这一大特性进行了详细…

【Flutter、H5、Web?前端个人总结】分享从业经历经验、自我规范准则,纯干货

前言 hi&#xff0c;正式接触web前端已经经过了两年的时间&#xff0c;从大学的java后端转型到web前端&#xff0c;再到后续转战Flutter&#xff0c;逐渐对前端有了一些心得体会&#xff0c;其实在当下前端的呈现形式一直在变化&#xff0c;无论你是用原生、还是web还是混编的…

吸毛效果好的宠物空气净化器分享,希喂、霍尼韦尔、米家实测

说起宠物空气净化器&#xff0c;几年前我可能会一脸鄙夷&#xff1a;为啥要花这种智商税冤枉钱&#xff1f; 直到之前养了一只猫&#xff0c;被家中乱飞的浮毛和滂臭的异味搞到头晕&#xff0c;于是作为i一个养宠的家电测评博主&#xff0c;索性对宠物空气净化器这玩意做了超级…

如何在银河麒麟服务器中获取关键日志信息

如何在银河麒麟服务器中获取关键日志信息 1、获取messages日志2、获取dmesg输出 &#x1f496;The Begin&#x1f496;点点关注&#xff0c;收藏不迷路&#x1f496; 在银河麒麟服务器中&#xff0c;获取messages和dmesg日志是排查问题的重要步骤。 1、dmesg命令用于显示或控制…