關(guān)于vue3中的reactive賦值問題

更新時間：2022年05月25日 09:28:26 作者：可樂姜汁

這篇文章主要介紹了關(guān)于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設(shè)為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設(shè)為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>

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

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

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

您可能感興趣的文章: