vue3 深度响应式是否正常测试，以select options作为例子测试，select options后赋值是否不能正常显示选中的label
<template>
<div class='box'>
<template v-for="(ditem, dindex) in data1" :key="dindex">
<el-select v-model="ditem.value" clearable filterable>
<el-option v-for="item in ditem?.a?.b?.c" :key="item.value" :label="item.label" :value="item.value">
</el-option>
</el-select>
</template>
</div>
</template>
<script lang='ts' setup>
import { ref, reactive, computed, onMounted, nextTick, PropType } from 'vue';
const data1 = ref<any[]>([])
setTimeout(() => {
const obj1 = {
value: "2",
a: {
b: {
c: null
}
}
}
data1.value = [obj1]
}, 500)
setTimeout(() => {
const optionsData = [
{ value: '1', label: 'Option 1' },
{ value: '2', label: 'Option 2' },
{ value: '3', label: 'Option 3' }
]
//这里赋值还是可以响应式，说明vue3的深度响应式还是挺好的，先赋值select的value，等这时候再赋值options的循环选项，页面还是响应式正常，不会只显示select的值，而是值对应的label
data1.value[0].a.b.c = optionsData
}, 3000)
</script>
<style lang='scss' scoped>
.box {
width: 300px;
}
</style>
结论
经测试，宏任务的异步后赋值options，vue3还是正常显示正常响应式。
前端工程师、程序员