快捷導(dǎo)航

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

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

這篇文章主要介紹了關(guān)于vue3中的reactive賦值問題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教

vue3 reactive賦值問題

vue3中直接對(duì)reactive整個(gè)對(duì)象賦值檢測不到

let obj = reactive({
	name: 'zhangsan',
	age: '18'
})
obj = {
	name: 'lisi'
	age: ''
}
// 上面這樣賦值檢測不到，因?yàn)轫憫?yīng)式的是它的屬性，而不是它自身
			
// 如需要對(duì) reactive 賦值
// 方法1: 單個(gè)賦值
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ù)組時(shí)必須將length設(shè)為0，直接賦值一個(gè)空數(shù)組是沒有作用的，同理對(duì)象直接賦值一個(gè)空對(duì)象也沒有作用，只能遍歷對(duì)象一項(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>

清空對(duì)象

// 錯(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é)果是正常的空對(duì)象
}
</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>

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

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

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

您可能感興趣的文章: