当前位置: 首页 > news >正文

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

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

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

<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>

相关文章:

  • 【Docker安装教程】CentOS 7 上的 Docker 安装与配置
  • Pulsar 社区周报 | No.2024.03.08 Pulsar-Spark Connector 助力实时计算
  • 【Scrapy】京东商品数据可视化
  • LVS负载均衡集群基础概念
  • xss.haozi.me靶机 通关
  • ABC344 A-E题解
  • 三、N元语法(N-gram)
  • Foreign Exchange(UVA 10763)
  • D2力扣滑动窗口系列
  • C++ inline关键字总结
  • C++读写Excel(xlnt库的使用)
  • 用一个 Python 脚本实现依次运行其他多个带 argparse 命令行参数的 .py 文件
  • CTP-API开发系列之三:柜台系统简介
  • RAG综述 《Retrieval-Augmented Generation for Large Language Models: A Survey》笔记
  • jupyter notebook 调整深色背景与单元格宽度与自动换行
  • 时间复杂度分析经典问题——最大子序列和
  • @angular/forms 源码解析之双向绑定
  • [译] React v16.8: 含有Hooks的版本
  • 【从零开始安装kubernetes-1.7.3】2.flannel、docker以及Harbor的配置以及作用
  • CentOS 7 修改主机名
  • const let
  •  D - 粉碎叛乱F - 其他起义
  • ECMAScript6(0):ES6简明参考手册
  • Effective Java 笔记(一)
  • Idea+maven+scala构建包并在spark on yarn 运行
  • iOS 系统授权开发
  • java2019面试题北京
  • JDK9: 集成 Jshell 和 Maven 项目.
  • Leetcode 27 Remove Element
  • Rancher-k8s加速安装文档
  • react 代码优化(一) ——事件处理
  • redis学习笔记(三):列表、集合、有序集合
  • 理解IaaS, PaaS, SaaS等云模型 (Cloud Models)
  • 前端技术周刊 2018-12-10:前端自动化测试
  • 腾讯优测优分享 | 你是否体验过Android手机插入耳机后仍外放的尴尬?
  • 为什么要用IPython/Jupyter?
  • 原生 js 实现移动端 Touch 滑动反弹
  • AI又要和人类“对打”,Deepmind宣布《星战Ⅱ》即将开始 ...
  • Hibernate主键生成策略及选择
  • 说说我为什么看好Spring Cloud Alibaba
  • ​HTTP与HTTPS:网络通信的安全卫士
  • ​插件化DPI在商用WIFI中的价值
  • (1)(1.13) SiK无线电高级配置(五)
  • (Note)C++中的继承方式
  • (Redis使用系列) SpirngBoot中关于Redis的值的各种方式的存储与取出 三
  • (webRTC、RecordRTC):navigator.mediaDevices undefined
  • (附源码)python房屋租赁管理系统 毕业设计 745613
  • (附源码)spring boot建达集团公司平台 毕业设计 141538
  • (附源码)springboot社区居家养老互助服务管理平台 毕业设计 062027
  • (九)c52学习之旅-定时器
  • (企业 / 公司项目)前端使用pingyin-pro将汉字转成拼音
  • (一)python发送HTTP 请求的两种方式(get和post )
  • (转)程序员疫苗:代码注入
  • (转)淘淘商城系列——使用Spring来管理Redis单机版和集群版
  • ***php进行支付宝开发中return_url和notify_url的区别分析