快捷導(dǎo)航

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

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

這篇文章主要介紹了Vue3如何清空Reactive定義的數(shù)組問題,具有很好的參考價(jià)值,希望對大家有所幫助,如有錯(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的過程中發(fā)現(xiàn)reactive有一些問題

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

清空數(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是無效的
  console.log(arr)
}
</script>

清空對象

// 錯(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é)果是正常的空對象
}
</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)沒有作用，對象直接使用點(diǎn)語法即可，直接賦一個(gè)對象沒有作用

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

總結(jié)

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

您可能感興趣的文章:

相關(guān)文章

vue 使用外部JS與調(diào)用原生API操作示例
這篇文章主要介紹了vue 使用外部JS與調(diào)用原生API操作,結(jié)合實(shí)例形式分析了vue.js調(diào)用外部JS與原生API相關(guān)操作技巧及注意事項(xiàng),需要的朋友可以參考下
2019-12-12
vue中使用echarts實(shí)現(xiàn)動(dòng)態(tài)數(shù)據(jù)綁定以及獲取后端接口數(shù)據(jù)
總結(jié)一下自己最近項(xiàng)目中用echarts動(dòng)態(tài)獲取接口數(shù)據(jù)并畫圖的方法,下面這篇文章主要給大家介紹了關(guān)于vue中使用echarts實(shí)現(xiàn)動(dòng)態(tài)數(shù)據(jù)綁定以及獲取后端接口數(shù)據(jù)的相關(guān)資料,需要的朋友可以參考下
2022-07-07
詳解Vue快速零配置的打包工具——parcel
本篇文章主要介紹了詳解Vue快速零配置的打包工具——parcel，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧
2018-01-01
vue打包后出現(xiàn)空白頁的原因及解決方式詳解
在項(xiàng)目中很多時(shí)候需要用到vue打包成html不需要放在服務(wù)器上就能瀏覽,根據(jù)官網(wǎng)打包出來的html直接打開是顯示空白,下面這篇文章主要給大家介紹了關(guān)于vue打包后出現(xiàn)空白頁的原因及解決方式的相關(guān)資料,需要的朋友可以參考下
2022-07-07
vue中使用keep-alive動(dòng)態(tài)刪除已緩存組件方式
這篇文章主要介紹了vue中使用keep-alive動(dòng)態(tài)刪除已緩存組件方式，具有很好的參考價(jià)值，希望對大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教
2022-08-08
vue中引入圖片的方法示例
在我們寫vue項(xiàng)目中肯定會(huì)用到各種圖片,那么如何更好的使用圖片資源呢?下面這篇文章主要給大家介紹了關(guān)于vue中引入圖片的方法,需要的朋友可以參考下
2023-06-06
vue?如何綁定disabled屬性讓其不能被點(diǎn)擊
這篇文章主要介紹了vue?如何綁定disabled屬性讓其不能被點(diǎn)擊，具有很好的參考價(jià)值，希望對大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教
2022-04-04
基于vue3.0.1beta搭建仿京東的電商H5項(xiàng)目
這篇文章主要介紹了基于vue3.0.1beta搭建仿京東的電商H5項(xiàng)目，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
2020-05-05
Vue3中如何使用component :is 加載組件
Monaco-editor,一個(gè)vs code 編輯器,需要將其集成到項(xiàng)目,這篇文章主要介紹了Vue3中如何使用component :is 加載組件,需要的朋友可以參考下
2023-11-11
Vue NextTick介紹與使用原理
我們對Vue中data數(shù)據(jù)的修改會(huì)導(dǎo)致界面對應(yīng)的響應(yīng)變化，而通過nextTick方法，可以在傳入nextTick的回調(diào)函數(shù)中獲取到變化后的DOM，講起來可能還是有點(diǎn)夢幻，下面我們直接使用nextTick體驗(yàn)一下效果
2022-08-08