问题发现
但我们进行vue3的组件封装的时候，经常使用v-model进行值的传递。很多时候我都把他当作组件内部的一个变量使用，但是发现当我们默认值设定为一个对象类型时，会丢失defineModel定义的值的响应式。
<!-- 测试v-model绑定不穿默认值响应消失问题 -->
<template>
<h3>基础数据类型</h3>
原始值：{{ val }}
<button @click="handleChangeVal">点击改变</button>
<h3>复杂数据类型——数组（当你的使用v-model:list时会响应失效）</h3>
原始值：{{ list }}
<button @click="handleChangeList">点击改变</button>
<h3>复杂数据类型——对象（当你的使用v-model:list时会响应失效）</h3>
原始值：{{ obj }}
<button @click="handleChangeObj">点击改变</button>
</template>
<script setup>
import { watch } from 'vue'
const val = defineModel('val', {
default: 1
})
const list = defineModel('list', {
default: []
})
const obj = defineModel('obj', {
default: {}
})
const handleChangeVal = () => {
val.value ++
}
const handleChangeList = () => {
list.value.push(1)
}
const handleChangeObj = () => {
obj.value.a = 1
}
watch(()=> val.value, (val) => {
console.log('值改变了：' + val);
})
watch(()=> list.value, (val) => {
console.log('值改变了：' + val);
})
watch(()=> obj.value, (val) => {
console.log('值改变了：' + val);
}, {immediately: true, deep: true})
</script>
<!-- 直接使用会导致响应式失效 -->
<ModelValue></ModelValue>
<!-- 设置默认值响应式回归 -->
<ModelValue v-model:list="list" v-model:obj="obj"></ModelValue>
结论：当使用defineModel进行值绑定时，如果使用组件的地方没有进行v-model的值绑定，针对复杂数据类型会导致响应式失效！
