Vue3如何清空Reactive定義的數組

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

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

vue3清空Reactive定義的數組

shallowRef 定義得數組清空

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

定義數據打印圖片：

清空數組數據圖片 (達到預期目的)：

vue3 reactive的坑

最近使用vue3的過程中發(fā)現reactive有一些問題

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

清空數組

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

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

清空對象

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

// 錯誤示例
<template>
  <div>
    <div>{{ obj }}</div>
    <button @click="click">點擊</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) // 這里打印的結果是正常的空數組
}
</script>

2.同樣的道理直接賦值也不行，數組只能用數組的某些方法，或者直接修改索引，修改索引跟vue2又是相反，vue2只修改索引項沒有作用，對象直接使用點語法即可，直接賦一個對象沒有作用

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