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>
相关推荐
工业甲酰苯胺4 小时前
TypeScript枚举类型应用:前后端状态码映射的最简方案
javascript·typescript·状态模式
brzhang4 小时前
我操,终于有人把 AI 大佬们 PUA 程序员的套路给讲明白了!
前端·后端·架构
止观止4 小时前
React虚拟DOM的进化之路
前端·react.js·前端框架·reactjs·react
goms4 小时前
前端项目集成lint-staged
前端·vue·lint-staged
谢尔登4 小时前
【React Natve】NetworkError 和 TouchableOpacity 组件
前端·react.js·前端框架
Lin Hsüeh-ch'in5 小时前
如何彻底禁用 Chrome 自动更新
前端·chrome
augenstern4166 小时前
HTML面试题
前端·html
张可6 小时前
一个KMP/CMP项目的组织结构和集成方式
android·前端·kotlin
G等你下课7 小时前
React 路由懒加载入门:提升首屏性能的第一步
前端·react.js·前端框架
谢尔登7 小时前
【React Native】ScrollView 和 FlatList 组件
javascript·react native·react.js