为何在 Vue 的 v-model 指令中不能使用可选链（Optional Chaining）？

Vue 的 v-model 是实现组件与数据双向绑定的核心指令之一，它本质上是一个语法糖，用于简化对表单元素和组件 props 的同步更新。然而，在 Vue 3（以及 Vue 2 的某些模式下），开发者尝试在 v-model 中使用 JavaScript 的可选链操作符（?.）时，常常会遇到绑定失效或运行时报错的问题。

一、从基础语法出发：v-model 的本质

v-model 在模板编译阶段会被转换为 :value 和 @input（或其他事件）的组合。例如：

复制代码

<input v-model="message" />

等价于：

复制代码

<input :value="message" @input="message = $event.target.value" />

这要求绑定的目标必须是一个可以赋值的表达式，即一个"引用"类型变量或对象属性。

二、可选链操作符（?.）的机制分析

JavaScript 的可选链操作符（?.）允许安全地访问嵌套对象属性，避免因中间某个层级为 null 或 undefined 而导致报错。例如：

复制代码

const name = user?.profile?.name;

但如果尝试对这个表达式进行赋值，则会抛出错误：

复制代码

user?.profile?.name = 'Tom'; // 无效赋值

因为可选链返回的是一个值的副本，而不是该值的引用地址，无法被直接赋值修改。

三、结合 Vue 的响应式系统来看问题

Vue 的响应式系统基于 Proxy 或 Object.defineProperty 来追踪对象属性的变化。如果属性路径本身是不可变的（如通过 ?. 得到的结果），那么 Vue 就无法监听到变化并触发更新。

以如下代码为例：

复制代码

<input v-model="form?.name" />

当 form 不存在时，整个表达式结果为 undefined，此时输入框的值将始终为 undefined，且无法被更新回写。

四、实际测试与错误信息

在 Vue 3 的开发模式中，如果你尝试这样写：

复制代码

<template>
<input v-model="form?.name" />
</template>
<script setup>
let form = ref(null);
</script>

你会看到类似以下的警告：

复制代码

[Vue warn]: Failed to assign watcher expression "form?.name": Cannot assign to read only property 'name' of undefined

这表明 Vue 试图对该表达式进行赋值，但失败了。

五、解决方案与替代方式

要解决这个问题，有几种常见方法：

确保对象存在：在使用前初始化对象结构，避免出现空值。
使用计算属性（computed） ：通过 get 和 set 方法间接绑定。
改用 .sync 修饰符或自定义 v-model:prop：适用于组件通信场景。

示例：使用计算属性绕过可选链限制：

复制代码

<template>
<input v-model="safeName" />
</template>
<script setup>
import { ref, computed } from 'vue';
const form = ref({ name: '' });
const safeName = computed({
get: () => form.value?.name || '',
set: (val) => {
if (!form.value) form.value = {};
form.value.name = val;
}
});
</script>

六、总结与扩展思考

虽然可选链在 JavaScript 中极大提升了代码的安全性，但在 Vue 的响应式绑定中，尤其是 v-model 这种需要赋值能力的场景下，它的局限性就显现出来了