快捷導(dǎo)航

Vue3如何清空Reactive定義的數(shù)組

更新時(shí)間：2023年10月24日 15:20:08 作者：好多吃的啊

這篇文章主要介紹了Vue3如何清空Reactive定義的數(shù)組問(wèn)題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教

vue3清空Reactive定義的數(shù)組

shallowRef 定義得數(shù)組清空

let component_list = shallowRef([
  {unit: Head, name: 'Head', id: 1},
  {unit: TopClass, name: 'TopClass', id: 2},
])
component_list.value.length = []  // 清空

定義數(shù)據(jù)打印圖片：

清空數(shù)組數(shù)據(jù) 圖片 (達(dá)到預(yù)期目的)：

vue3 reactive的坑

最近使用vue3的過(guò)程中發(fā)現(xiàn)reactive有一些問(wèn)題

1.清空reactive定義的數(shù)組時(shí)必須將length設(shè)為0，直接賦值一個(gè)空數(shù)組是沒(méi)有作用的，同理對(duì)象直接賦值一個(gè)空對(duì)象也沒(méi)有作用，只能遍歷對(duì)象一項(xiàng)一項(xiàng)刪，這里說(shuō)的沒(méi)有作用是不能響應(yīng)式的更新頁(yè)面，如果打印一下是能看到確實(shí)被刪除了，但是頁(yè)面沒(méi)有變化

清空數(shù)組

// 錯(cuò)誤示例
<template>
  <div>{{ arr }}</div>
  <button @click="click">點(diǎn)擊</button>
</template>
 
<script setup>
import { reactive } from 'vue'
let arr = reactive([1, 2, 3])
const click = () => {
  arr = []
  console.log(arr) // 這里打印的結(jié)果是正常的空數(shù)組
}
</script>

// 正確示例
<template>
  <div>{{ arr }}</div>
  <button @click="click">點(diǎn)擊</button>
</template>
 
<script setup>
import { reactive } from 'vue'
let arr = reactive([1, 2, 3])
const click = () => {
  arr.length = 0 // 這里和vue2是正好相反，vue2直接將數(shù)組length設(shè)為0是無(wú)效的
  console.log(arr)
}
</script>

清空對(duì)象

// 錯(cuò)誤示例
<template>
  <div>{{ obj }}</div>
  <button @click="click">點(diǎn)擊</button>
</template>
 
<script setup>
import { reactive } from 'vue'
let obj = reactive({a: 111, b: 222})
const click = () => {
  obj = {}
  console.log(obj) // 這里打印的結(jié)果是正常的空對(duì)象
}
</script>

// 錯(cuò)誤示例
<template>
  <div>
    <div>{{ obj }}</div>
    <button @click="click">點(diǎn)擊</button>
  </div>
</template>
 
<script setup>
import { reactive } from 'vue'
let arr = reactive({a: xxx, b: xxx })
const click = () => {
  for (let i in obj) {
    delete obj[i]
  }
  console.log(obj) // 這里打印的結(jié)果是正常的空數(shù)組
}
</script>

2.同樣的道理直接賦值也不行，數(shù)組只能用數(shù)組的某些方法，或者直接修改索引，修改索引跟vue2又是相反，vue2只修改索引項(xiàng)沒(méi)有作用，對(duì)象直接使用點(diǎn)語(yǔ)法即可，直接賦一個(gè)對(duì)象沒(méi)有作用

3.這些問(wèn)題其實(shí)只要使用ref就可以解決，但是人官方推薦使用reactive。。。。

總結(jié)

以上為個(gè)人經(jīng)驗(yàn)，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。

您可能感興趣的文章:

相關(guān)文章

在 Vue 中使用 JSX 及使用它的原因淺析
這篇文章主要介紹了在 Vue 中使用 JSX 及使用它的原因淺析，本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì)，具有一定的參考借鑒價(jià)值,需要的朋友可以參考下
2020-02-02
Vue解決ajax跨域的問(wèn)題
這篇文章主要介紹了Vue解決ajax跨域的問(wèn)題，跨域請(qǐng)求：是指協(xié)議名、主機(jī)名、端口號(hào)三者有任何一個(gè)不一樣，而且跨域請(qǐng)求是請(qǐng)求發(fā)出去了，服務(wù)器接收并返回了結(jié)果，只是瀏覽器沒(méi)有接收響應(yīng)結(jié)果。感興趣的同學(xué)可以參考閱讀
2023-04-04
element-table如何實(shí)現(xiàn)自定義表格排序
這篇文章主要介紹了element-table如何實(shí)現(xiàn)自定義表格排序，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教
2022-07-07
vite?vue3?規(guī)范化與Git?Hooks詳解
這篇文章主要介紹了vite?vue3?規(guī)范化與Git?Hooks,本文重點(diǎn)討論?git?提交規(guī)范,結(jié)合示例代碼給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下
2022-10-10
vue實(shí)現(xiàn)簡(jiǎn)潔文件上傳進(jìn)度條功能
這篇文章主要介紹了vue實(shí)現(xiàn)簡(jiǎn)潔文件上傳進(jìn)度條功能,實(shí)現(xiàn)原理是通過(guò)performance.now()獲取動(dòng)畫(huà)的時(shí)間戳,用于創(chuàng)建流暢的動(dòng)畫(huà),結(jié)合示例代碼介紹的非常詳細(xì),需要的朋友可以參考下
2024-06-06
vue按需加載組件webpack require.ensure的方法
本篇文章主要介紹了vue按需加載組件webpack require.ensure的方法，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2017-12-12
代碼詳解Vuejs響應(yīng)式原理
這篇文章主要介紹了代碼詳解Vuejs響應(yīng)式原理的基礎(chǔ)知識(shí)，有興趣的朋友們參考學(xué)習(xí)下吧。
2017-12-12
vue圖片加載失敗時(shí)用默認(rèn)圖片替換的方法
這篇文章主要給大家介紹了關(guān)于vue圖片加載失敗時(shí)用默認(rèn)圖片替換的相關(guān)資料，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家學(xué)習(xí)或者使用vue具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面來(lái)一起學(xué)習(xí)學(xué)習(xí)吧
2019-08-08
Vue中渲染系統(tǒng)模塊的實(shí)現(xiàn)詳解
想要實(shí)現(xiàn)一個(gè)簡(jiǎn)潔版的Mini-Vue框架，應(yīng)該包含三個(gè)模塊：分別是：渲染系統(tǒng)模塊、可響應(yīng)式系統(tǒng)模塊、應(yīng)用程序入庫(kù)模塊，本文主要介紹的是渲染系統(tǒng)模塊的實(shí)現(xiàn)，需要的可以參考一下
2023-07-07
js 實(shí)現(xiàn)拖拽排序詳情
這篇文章主要介紹了js 實(shí)現(xiàn)拖拽排序，拖拽排序?qū)τ谛』锇閭儊?lái)說(shuō)應(yīng)該不陌生，平時(shí)工作的時(shí)候，可能會(huì)選擇使用類似Sortable.js這樣的開(kāi)源庫(kù)來(lái)實(shí)現(xiàn)需求。但在完成需求后，大家有沒(méi)有沒(méi)想過(guò)拖拽排序是如何實(shí)現(xiàn)的呢？感興趣得話一起來(lái)看看下面文章得小心內(nèi)容吧
2021-11-11