關于vue3中的reactive賦值問題
更新時間：2022年05月25日 09:28:26 作者：可樂姜汁
這篇文章主要介紹了關于vue3中的reactive賦值問題，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教
vue3 reactive賦值問題
vue3中直接對reactive整個對象賦值檢測不到
let obj = reactive({
name: 'zhangsan',
age: '18'
})
obj = {
name: 'lisi'
age: ''
}
// 上面這樣賦值檢測不到，因為響應式的是它的屬性，而不是它自身
// 如需要對 reactive 賦值
// 方法1: 單個賦值
obj['name'] = 'lisi';
obj['age'] = '';
// 方法2：多包一層
let obj = reactive({
data: {
name: 'zhangsan',
age: '18'
}
})
obj.data = {
name: 'lisi'
age: ''
}vue3 reactive的坑
最近使用vue3的過程中發(fā)現(xiàn)reactive有一些問題
清空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) // 這里打印的結果是正常的空數(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) // 這里打印的結果是正常的空對象
}
</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) // 這里打印的結果是正常的空數(shù)組
}
</script>同樣的道理直接賦值也不行，數(shù)組只能用數(shù)組的某些方法，或者直接修改索引，修改索引跟vue2又是相反，vue2只修改索引項沒有作用，對象直接使用點語法即可，直接賦一個對象沒有作用
這些問題其實只要使用ref就可以解決，但是人官方推薦使用reactive。。。。
以上為個人經驗，希望能給大家一個參考，也希望大家多多支持腳本之家。
相關文章
element-ui中table組件的toggleRowSelection()方法使用
這篇文章主要介紹了element-ui中table組件的toggleRowSelection()方法使用,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2024-03-03
這篇文章主要介紹了vue中本地靜態(tài)圖片的路徑應該怎么寫,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2023-10-10
混入（Mixin）是?Vue?中一種代碼復用的模式,允許將組件的選項抽離為獨立模塊,下面就跟隨小編一起來深入了解下如何在Vue3中使用混入Mixin吧2025-03-03
下面小編就為大家分享一篇vue-cli+webpack項目 修改項目名稱的方法，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-02-02
如何利用Vue3+Element?Plus實現(xiàn)動態(tài)標簽頁及右鍵菜單
標簽頁一般配合菜單實現(xiàn),當你點擊一級菜單或者二級菜單時,可以增加對應的標簽頁,當你點擊對應的標簽頁,可以觸發(fā)對應的一級菜單或者二級菜單,下面這篇文章主要給大家介紹了關于如何利用Vue3+Element?Plus實現(xiàn)動態(tài)標簽頁及右鍵菜單的相關資料,需要的朋友可以參考下2022-11-11
Vue+Express實現(xiàn)登錄狀態(tài)權限驗證的示例代碼
這篇文章主要介紹了Vue+Express實現(xiàn)登錄狀態(tài)權限驗證的示例代碼，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2019-05-05
這篇文章主要為大家詳細介紹了基于vue.js實現(xiàn)分頁查詢功能，vue.js實現(xiàn)數(shù)據(jù)庫分頁，具有一定的參考價值，感興趣的小伙伴們可以參考一下2018-12-12
這篇文章主要介紹了基于vue開發(fā)的在線付費課程應用過程，非常不錯，具有參考借鑒價值,需要的朋友可以參考下2018-01-01
本篇文章主要介紹了詳解vue父子模版嵌套案例，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-03-03
這篇文章主要介紹了Vue中數(shù)組和對象更改后視圖不刷新的問題，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-09-09