let obj = reactive({
	name: 'zhangsan',
	age: '18'
})
obj = {
	name: 'lisi'
	age: ''
}
// 上面這樣賦值檢測(cè)不到，因?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: ''
}

// 錯(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是無(wú)效的
? console.log(arr)
}
</script>

// 錯(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>