Vue defineModel 怎样处理带默认值的绑定

在 Vue 3.4 及更高版本里，defineModel() 可以把组件的 prop 和更新事件封装成一个可读写的 ref。真正容易踩坑的是默认值：子组件写了 defineModel({ default: 1 })，父组件却没有初始化自己的 ref 时，子组件可能显示 1，而父组件仍然是 undefined。

官方地址：https://vuejs.org/guide/components/v-model.html

需要父子初始状态一致时，优先在父组件初始化绑定值；子组件的 default 只应当作为“父组件确实省略该模型时的本地兜底”。对象和数组默认值则要使用工厂函数，避免多个实例共享可变引用。

下面按这个判断顺序拆开说明，示例都围绕一个带初始页码的组件展开。

为什么子组件有默认值，父组件却还是 undefined

defineModel 是编译期宏。默认模型大致会对应一个名为 modelValue 的 prop 和一个 update:modelValue 事件；因此 default 作用在子组件 prop 上，而不是父组件的变量上。

第一次渲染时，子组件的 page 可以是 1，父组件的 currentPage 仍未被赋值。子组件后来修改 model，才会通过更新事件尝试更新父值；这不能把“初次默认值”自动补回父组件，因此不要把两者当成同一个初始化动作。

需要同步时，把初始值放到父组件

如果分页值、筛选条件或表单字段属于页面状态，建议父组件提供明确初值。子组件可以保留同类型的默认值作为防御，但真正的单一数据源应该是父组件。

如果该模型必须由父组件提供，可以去掉默认值并标记为必填，让缺少绑定尽早暴露：

对象和数组默认值要用工厂函数

数字、字符串、布尔值等原始值不会共享可变对象；但对象和数组需要为每个组件实例创建新值。把一个对象字面量直接当默认值，会让实例之间存在意外的引用关系。

这里的工厂函数解决的是“默认引用是否独立”，但不能解决父子不同步。只要父组件绑定的是 undefined，子组件仍可能先拿到默认对象。因此表单状态需要跨组件共享时，父组件也应初始化为同样的数据形状。

具名模型同样遵守这条规则

当组件使用 v-model:page 时，模型名称要作为 defineModel 的第一个参数，默认配置放在第二个参数。它只是把默认的 modelValue 换成了具名 prop，默认值的同步边界没有改变。

可以用下面的速查规则收尾：父组件拥有状态，就在父组件初始化；模型必须存在，就使用 required: true；模型可省略且只需要子组件本地兜底，才使用 default；对象和数组始终使用返回新引用的工厂函数。

常见延伸问题

父组件显式传入 0 或空字符串会被默认值覆盖吗？不会，默认值主要用于 prop 没有有效传入值的情况，0 和空字符串是有效的业务值，仍应按业务类型设计。

只在子组件显示默认值，之后再让父组件接管可以吗？可以，但要明确这是“未绑定时的本地模式”；如果页面状态需要可预测，最好从父组件一开始就传入初值。

为什么对象默认值写成函数？因为工厂函数会为每个组件实例创建独立对象，避免一个实例修改筛选条件时影响另一个实例。