Vue3如何清空Reactive定義的數(shù)組
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ù) 圖片 (達到預期目的):
vue3 reactive的坑
最近使用vue3的過程中發(fā)現(xiàn)reactive有一些問題
1.清空reactive定義的數(shù)組時必須將length設為0,直接賦值一個空數(shù)組是沒有作用的,同理對象直接賦值一個空對象也沒有作用,只能遍歷對象一項一項刪,這里說的沒有作用是不能響應式的更新頁面,如果打印一下是能看到確實被刪除了,但是頁面沒有變化
清空數(shù)組
// 錯誤示例 <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) // 這里打印的結(jié)果是正常的空數(shù)組 } </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直接將數(shù)組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) // 這里打印的結(jié)果是正常的空對象 } </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) // 這里打印的結(jié)果是正常的空數(shù)組 } </script>
2.同樣的道理直接賦值也不行,數(shù)組只能用數(shù)組的某些方法,或者直接修改索引,修改索引跟vue2又是相反,vue2只修改索引項沒有作用,對象直接使用點語法即可,直接賦一個對象沒有作用
3.這些問題其實只要使用ref就可以解決,但是人官方推薦使用reactive。。。。
總結(jié)
以上為個人經(jīng)驗,希望能給大家一個參考,也希望大家多多支持腳本之家。
相關(guān)文章
vue中使用echarts實現(xiàn)動態(tài)數(shù)據(jù)綁定以及獲取后端接口數(shù)據(jù)
總結(jié)一下自己最近項目中用echarts動態(tài)獲取接口數(shù)據(jù)并畫圖的方法,下面這篇文章主要給大家介紹了關(guān)于vue中使用echarts實現(xiàn)動態(tài)數(shù)據(jù)綁定以及獲取后端接口數(shù)據(jù)的相關(guān)資料,需要的朋友可以參考下2022-07-07vue中使用keep-alive動態(tài)刪除已緩存組件方式
這篇文章主要介紹了vue中使用keep-alive動態(tài)刪除已緩存組件方式,具有很好的參考價值,希望對大家有所幫助。如有錯誤或未考慮完全的地方,望不吝賜教2022-08-08