Vue3中defineModel默认值与v-model更新异常问题

问题场景 #

当父组件的响应式变量初始值为undefined，子组件通过defineModel的default选项设置默认对象时，输入框的更新无法同步到父组件。

复现代码 #

父组件（App.vue） #

<script setup>
import { ref } from 'vue';
import Comp from './Comp.vue';

const model = ref(); // 初始值为 undefined
</script>

<template>
  <Comp v-model="model" />
  <div>{{ model }}</div>
</template>

存在同步问题的子组件（Comp.vue） #

<script setup>
const model = defineModel({
  default: {
    msg: '',
  },
});
</script>

<template>
  <div>
    <input type="text" v-model="model.msg" />
  </div>
</template>

可行解决方案 #

不在defineModel中配置default，而是手动判断并初始化父组件传递的响应式值：

修复后的子组件（Comp.vue） #

<script setup>
const model = defineModel();
if (model.value === undefined) {
  model.value = { msg: '' };
}
</script>

<template>
  <div>
    <input type="text" v-model="model.msg" />
  </div>
</template>

问题根源 #

defineModel的default选项仅用于提供渲染阶段的临时默认值，不会修改父组件传递的原始响应式变量。当父组件传递undefined时，子组件会使用这个默认对象进行渲染，但该对象是独立于父组件变量的副本——对model.msg的修改只会作用在这个副本上，无法同步回父组件。

而手动赋值model.value = { msg: '' }的方式，是直接更新了父组件的响应式引用（将父组件的ref值从undefined替换为新对象），后续对model.msg的修改都会作用在这个共享对象上，从而实现父子组件的双向数据同步。

内容的提问来源于stack exchange，提问作者Dash