Vue3 重置&覆盖 reactive 数组数据的方法

核心要点:
  • 通过splice删除原数组内的所有数据,并添加新的数据进去。
  • 潜在影响:大数据量下,splice重置数组和 ref 的.value重新赋值重置数组,哪个耗时短还需自行测试。

通过 `splice` 传入0 和 Infinity 来删除原数组从头到尾的内容,然后`...[]`将新数据丢进响应式数组里。

html 复制代码
<template>
  <button @click="c2()">测试按钮</button>
</template>

<script setup lang="ts">
import { reactive, watch } from 'vue'
const arr1 = reactive([1,2,3,4])
watch(arr1,(val)=>{
  console.log(...val);
})
function c2() {
  arr1.push(arr1.length+1)
}

setTimeout(() => {
  arr1.splice(0,Infinity,...[11,22,33,44])
}, 6000);

</script>
相关推荐
人工智能训练师3 小时前
Ubuntu22.04如何安装新版本的Node.js和npm
linux·运维·前端·人工智能·ubuntu·npm·node.js
Seveny073 小时前
pnpm相对于npm,yarn的优势
前端·npm·node.js
yddddddy4 小时前
css的基本知识
前端·css
昔人'4 小时前
css `lh`单位
前端·css
前端君4 小时前
实现最大异步并发执行队列
javascript
Nan_Shu_6145 小时前
Web前端面试题(2)
前端
知识分享小能手5 小时前
React学习教程,从入门到精通,React 组件核心语法知识点详解(类组件体系)(19)
前端·javascript·vue.js·学习·react.js·react·anti-design-vue
蚂蚁RichLab前端团队6 小时前
🚀🚀🚀 RichLab - 花呗前端团队招贤纳士 - 【转岗/内推/社招】
前端·javascript·人工智能
孩子 你要相信光7 小时前
css之一个元素可以同时应用多个动画效果
前端·css
萌萌哒草头将军7 小时前
Oxc 和 Rolldown Q4 更新计划速览!🚀🚀🚀
javascript·vue.js·vite