1.直接賦值導(dǎo)致失去響應(yīng)式
- 因?yàn)閞eactive數(shù)據(jù)被重新賦值后魁亦，原來(lái)數(shù)據(jù)的代理函數(shù)和最新數(shù)據(jù)的代理函數(shù)不是同一個(gè)
<template>
<div>
<div v-for="(item, index) in data" :key="index">{{ item }}</div>
<button @click="onUp">長(zhǎng)大</button>
</div>
</template>
<script lang="ts" setup>
import { reactive } from 'vue'
let data = reactive(['小貓', '小狗'])
const onUp = () => {
data = reactive(['大貓', '大狗'])
}
</script>
-
結(jié)果：
image.png
2.解決方法
- 方法一： reactive定義一個(gè)對(duì)象，對(duì)象里的每個(gè)屬性都具有響應(yīng)式
<template>
<div style="display: flex; margin-top: 30px;">
<div v-for="(item, index) in data.animals" :key="index" style="margin-left: 10px;">{{ item }}</div>
<button @click="onUp" style="margin-left: 10px;">長(zhǎng)大</button>
</div>
<!-- user -->
</template>
<script lang="ts" setup>
import { reactive } from 'vue'
let data = reactive({
animals: ['小貓', '小狗']
})
const onUp = () => {
data.animals = ['大貓', '大狗']
}
</script>
- 方法二：使用ref定義
<template>
<div style="display: flex; margin-top: 30px;">
<div v-for="(item, index) in data" :key="index" style="margin-left: 10px;">{{ item }}</div>
<button @click="onUp" style="margin-left: 10px;">長(zhǎng)大</button>
</div>
<!-- user -->
</template>
<script lang="ts" setup>
import { ref, reactive } from 'vue'
let data = ref(['小貓', '小狗'])
const onUp = () => {
data.value = ['大貓', '大狗']
}
</script>
-
結(jié)果：
image.png
