Vue中数组的【响应式】操作

在 Vue.js 中,当你修改数组时,Vue 不能检测到以下变动的数组:

  1. 当你利用索引直接设置一个项时,例如:vm.items[indexOfItem] = newValue
  2. 当你修改数组的长度时,例如:vm.items.length = newLength

为了解决这个问题并确保你的数组变动是响应式的,Vue 提供了一些变异方法,你可以使用它们来修改数组:

7个保证响应式方法(这些方法会触发视图更新):

  • push()
  • pop()
  • shift()
  • unshift()
  • splice()
  • sort()
  • reverse()

方法详解:

在 Vue.js 中,为了使得数组的变动是响应式的,Vue 提供了一些特定的数组方法来修改数组,这些方法会触发视图的更新。以下是 Vue 中用于数组响应式的 7 个方法及其详解:

  1. push(item1, ..., itemN)
    • 向数组的末尾添加一个或多个元素,并返回新的长度。
    • 示例:this.array.push(item);
  2. pop()
    • 删除并返回数组的最后一个元素。
    • 示例:let lastItem = this.array.pop();
  3. shift()
    • 删除并返回数组的第一个元素。
    • 示例:let firstItem = this.array.shift();
  4. unshift(item1, ..., itemN)
    • 向数组的开头添加一个或多个元素,并返回新的长度。
    • 示例:this.array.unshift(item);
  5. splice(index, deleteCount, item1, ..., itemN)
    • 通过删除或替换现有元素或者添加新元素来改变一个数组的内容。
    • index(必需):开始改变的索引。
    • deleteCount(必需):整数,表示要移除的数组元素的个数。
    • item1, ..., itemN(可选):要添加进数组的元素,从index 位置开始。
    • 示例:this.array.splice(2, 0, 'a', 'b'); // 在索引 2 的位置插入 'a' 和 'b'
  6. sort(compareFunction)
    • 对数组的元素进行排序,并返回数组。
    • compareFunction(可选):用来指定按某种顺序进行排序的函数。如果省略,元素将按照转换为的字符串的 Unicode 码点顺序进行排序。
    • 示例:this.array.sort((a, b) => a - b); // 从小到大排序
  7. reverse()
    • 颠倒数组中元素的顺序。
    • 示例:this.array.reverse();

注意

  • 使用以上方法修改数组时,Vue 将能够检测到这些变化,并触发相应的视图更新。
  • 但是,如果你使用索引直接设置数组项(例如 this.array[indexOfItem] = newValue)或使用 length 属性来修改数组长度,Vue 则不能检测到这些变化。
  • 在 Vue 3 中,响应式系统有所改变,但基本的数组响应式方法仍然适用。Vue 3 引入了 Composition API,你可以使用 reactive 或 ref 来创建响应式数组,并使用上述方法来修改它们。
  • 如果你需要直接修改数组中的某个元素(使用索引),你可以使用 Vue.set(在 Vue 2 中)或 reactive 搭配 Proxy(在 Vue 3 中)来确保变化是响应式的。但在大多数情况下,使用上述的数组方法更为简单和直观。

但是,如果你需要直接修改数组中的某个元素(使用索引),或者你需要替换整个子数组,你需要确保这种变化也是响应式的。有几种方法可以处理这种情况:

  1. 使用 Vue 的 Vue.set() 方法(在 Vue 2.x 中)或 this.$set() 实例方法(在 Vue 组件内部)。但是,对于数组,这主要用于添加新属性到响应式对象上,而不是用于直接修改数组项。

  2. 使用 splice() 方法替换数组中的某个元素或子数组。

对于替换数组中的子数组(即你提到的“列”),你可以使用 splice() 方法,但你需要遍历外层数组,并对每个子数组执行 splice()。例如:

methods: {  replaceColumn(columnIndex, newColumn) {  this.multiArray.forEach(row => {  // 假设 newColumn 的长度与 row 的长度相匹配,或者你只需要替换部分项  row.splice(columnIndex, row.length - columnIndex, ...newColumn);  });  }  
}

在上面的例子中,multiArray 是一个二维数组,columnIndex 是你想要替换的列的索引,newColumn 是一个新数组,包含了替换后的值。

  • 使用计算属性或方法来返回一个新的数组,而不是直接修改原始数组。这种方法不会改变原始数组,但会基于原始数组创建一个新的响应式数组。

请注意,从 Vue 3 开始,响应式系统进行了重写,引入了 reactive 和 ref API。如果你使用的是 Vue 3,你可能会使用 Composition API 和这些新的响应式 API 来处理数组。但是,基本的响应式原则仍然适用,即使用 Vue 提供的变异方法来确保视图更新。

 案例:

需求:修改3*5数组,第一列保留原来数据,后面用一个3*4的数组【后端响应】替换原有值

  •  刚开始直接替换数组各个单元格的值,数组数据是变化了,但是不是响应式,无法导致依赖此数据的视图发生改变
// // 更新原始数组,保留第一列,并用3x4矩阵替换其余列for (let i = 0; i < that.tableData.length; i++) {// 保留第一列的值let firstColumnValue = that.tableData[i][0];// 替换后面的列for (let j = 1; j < that.tableData[i].length; j++) {// 如果j的值超过了replacementMatrix的列数,则停止替换(可选)if (j > replacementArr[i].length) {break;}that.tableData[i][j] = replacementArr[i][j - 1]; // 减去1是因为replacementMatrix的索引从0开始}}
  • 然后试着用splice()[可行,为响应式] 
              that.tableData.forEach((item,rowIndex)=>{//splice():array.splice(start[, deleteCount[, item1[, item2[, ...]]]])item.splice(1,item.length-1,...replacementArr[rowIndex])})

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

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

相关文章

Java基础(二)——数组,方法,方法重载

个人简介 &#x1f440;个人主页&#xff1a; 前端杂货铺 ⚡开源项目&#xff1a; rich-vue3 &#xff08;基于 Vue3 TS Pinia Element Plus Spring全家桶 MySQL&#xff09; &#x1f64b;‍♂️学习方向&#xff1a; 主攻前端方向&#xff0c;正逐渐往全干发展 &#x1…

01_02_Mybatis的配置文件与基于XML的使用

1、引入日志 在这里我们引入SLF4J的日志门面&#xff0c;使用logback的具体日志实现&#xff1b;引入相关依赖&#xff1a; <!--日志的依赖--><dependency><groupId>org.slf4j</groupId><artifactId>slf4j-api</artifactId><version&g…

2024国内外音频转换器大盘点,盘点音乐剪辑的7个有效方法!

当遇到不支持的音乐文件时&#xff0c;您可能就会想要拥有一款优秀的音频转换器。当您想减小大量音乐文件以节省设备存储空间时&#xff0c;它也可以很好地帮上忙。如果您正在寻找这么一款音频转换器&#xff0c;那么&#xff0c;请不要错过这篇文章。一款顶尖的音频转换器不仅…

USB2.0学习1--基本概念

目录 1.USB概念 2.USB协议发展 3.USB接口类型 3.1 TYPE类型 3.2 Mini类型 3.3 Micro类型 4. USB体系结构和关键概念 4.1 USB工作原理 4.2 USB物理拓扑结构 4.3 USB逻辑拓扑结构 4.4 USB软件架构 4.5 USB数据流模型 4.5.1 USB设备端点 4.5.2 USB管道 4.6 USB即插…

网工内推 | 国企信息工程师,信息系统项目管理师优先,最高14薪

01 上海浦东软件园股份有限公司 &#x1f537;招聘岗位&#xff1a;信息化管理工程师 &#x1f537;岗位职责&#xff1a; 1. 根据公司战略、数字化总体架构规划和IT 技术趋势&#xff0c;制定信息化系统的规划与设计&#xff0c;并制定实施计划。 2. 统筹公司信息化系统管理…

Redis-实战篇-缓存击穿问题及解决方案

文章目录 1、缓存击穿2、常见的解决方案有两种&#xff1a;2.1、互斥锁2.2、逻辑过期2.3、两种方案对比 3、利用互斥锁解决缓存击穿问题3.1、ShopServiceImpl.java3.2、使用 jmeter.bat 测试高并发 4、利用逻辑过期解决缓存击穿问题 1、缓存击穿 缓存击穿问题 也叫 热点key问题…

<电力行业> - 《第4课:什么是电力?什么是发输变配用5环节?》

1 什么是电力&#xff1f; 我们对于平日生活中离不开的电很熟悉&#xff0c;但是电力是什么&#xff1f; 其实&#xff0c;电力就是电能作为动力的能源。电力就是我们说的电&#xff0c;不过更多了系统化。 19世纪70年代&#xff0c;电力的发明和应用掀起了第二次工业化高潮。…

关于WebSocket

WebSocket 与传统的 HTTP 协议对比 在实时通信领域&#xff0c;传统的 HTTP 协议存在以下一些问题&#xff1a; 频繁的请求和响应&#xff1a;每次通信都需要建立和关闭连接&#xff0c;带来额外的开销。高延迟&#xff1a;每次通信都需要经过多个网络层的传输&#xff0c;延…

Stm32的DMA的学习

一&#xff0c;介绍 二&#xff0c;DMA框图 三&#xff0c;DMA通道 四&#xff0c;相关HAL库函数 五&#xff0c;配置DMA 六&#xff0c;Stm32CubeMX配置 【13.1】减少CPU传输负载 DMA直接存储器访问—Kevin带你读《STM32Cube高效开发教程基础篇》_哔哩哔哩_bilibili

【鸿蒙 HarmonyOS】尺寸设置:size/layoutWeight/constraintSize

一、背景 常见尺寸&#xff1a;width&#xff08;宽度&#xff09;、height&#xff08;高度&#xff09;、padding&#xff08;内边距&#xff09;、margin&#xff08;外边距&#xff09; 主要整理下size&#xff08;设置高宽尺寸&#xff09;、layoutWeight&#xff08;对…

Redis数据库(五):Redis数据库基本特性

这一节我们来介绍如何使用C语言的库来操作Redis数据库。 目录 一、hiredis的安装 1.1 下载源码 1.2 解压 1.3 进入hiredis路径下 1.4 利用makefile文件进行编译 二、接口介绍 三、C程序操作Redis代码 四、redis.conf配置文件详解 五、Redis的持久化 5.1 RDB &#x…

STM32CubeMX与RT-Thread Studio协助使用(实现点亮LED)

1创建自己的项目 1-1选择板子 1-2生成的项目 运行一下看是否创建成功 零警告零错误 2配置STM32Cude 2-1找打如图图标点击&#xff08;CubeMX的图标&#xff09; 2-2输入自己安装的路径选中exe文件 点击Browse 找到如图选中&#xff0c;在打开&#xff08;STM32CubeMX的安装路…

echarts 5.5.0版本下的层叠柱形图,每个值都从0开始,会有覆盖情况

需求&#xff1a; 1、每个公司&#xff0c;需要两个柱子去展示&#xff08;stack: 1是第一个柱子&#xff0c;stack:2,是第二个柱子&#xff09;&#xff1b; 2、必须每个数据都是从0开始&#xff0c;不在上一个值上累加&#xff1b; 3、鼠标滑上去的时候&#xff0c;最大值…

什么是API?如何进行API对接?

目录 一、API和API对接的定义 二、API接口的应用场景 三、为什么需要API对接 四、如何进行API对接 GET请求 POST请求 五、API对接的注意事项 在这个数字化时代&#xff0c;API像一把万能钥匙&#xff0c;让数据流动起来&#xff0c;创造出无限可能。本文旨在介绍API及其…

点云处理实战 PCL求解点云表面曲率

目录 一、什么是曲率 二、曲率计算过程 三、pcl 求解点云局部曲率 四、思考?为何曲率计算会使用协方差矩阵? 五、推荐阅读 一、什么是曲率 曲率是几何学中用来描述曲线或曲面形状变化的一个量。它反映了曲线或曲面的弯曲程度。在不同的上下文中,曲率的定义和计算方式有…

科普:什么是 BC-404 ?全方位解读最新通缩型 NFT 标准

区块链技术飞速发展的今天&#xff0c;创新从未停歇。继 ERC-404 标准问世后&#xff0c;一个名为 BC-404 的新标准应运而生&#xff0c;为 NFT 市场带来了全新的可能性。BC-404&#xff08;Bonding Curve 404&#xff09;—基于对 ERC-404 的改进&#xff0c;加密货币中第一个…

三、知识库搭建

知识库搭建 1 介绍词向量向量数据库 2 使用embedding API3 数据处理数据加载数据清洗文档分割 4 搭建并使用向量数据库4.1 自定义embedding封装4.2 chroma数据库4.3 向量检索 详细代码参考&#xff1a;https://github.com/lin902/llm-application 1 介绍 词向量 词向量就是把…

RK3568平台开发系列讲解(调试篇)分析内核调用的利器 ftrace

🚀返回专栏总目录 文章目录 一. 指定 ftrace 跟踪器二、设置要 trace 的函数三、ftrace 的开关四、查看 trace五、trace-cmd 的使用六、trace-cmd 的常用选项6.1、查看可以跟踪的事件6.2、跟踪特定进程的函数调用6.3、函数过滤6.4、限制跟踪深度6.5、追踪特定事件沉淀、分享、…

CesiumJS【Basic】- #016 多边形面渲染“花了”的问题

文章目录 多边形面渲染“花了”的问题1 目标2 问题代码3 修正后代码4 总结多边形面渲染“花了”的问题 1 目标 解决多边形的面“花了”的问题 2 问题代码 使用Cesium.PerInstanceColorAppearance渲染后出现色斑 import * as Cesium from "cesium";const viewer …

防火墙双机热备

防火墙双机热备 随着移动办公、网上购物、即时通讯、互联网金融、互联网教育等业务蓬勃发展&#xff0c;网络承载的业务越来越多&#xff0c;越来越重要。所以如何保证网络的不间断传输成为网络发展过程中急需解决的一个问题。 防火墙部署在企业网络出口处&#xff0c;内外网之…