v-model不支持直接绑定深层属性，因其需可读写左值，而链式访问仅为取值表达式；推荐computed+setter、toRef解构或子组件参数化v-model三种解法。
v-model 本身不直接支持对复杂多层级对象的某个嵌套属性做“局部绑定”，比如 v-model="user.profile.address.city" 这种写法在模板中会报错，因为 v-model 需要一个可读可写的响应式引用（ref 或 reactive 的顶层属性），而链式访问（.profile.address.city）只是取值表达式，无法被编译器转化为有效的赋值目标。
为什么不能直接绑定深层属性
Vue 模板编译时，v-model 要求绑定的目标必须是“可赋值的左值”（l-value）。像 user.profile.address.city 是 getter 表达式，没有对应的 setter 机制；即使对象是 reactive 的，Vue 也无法自动推导出“修改 city 时该触发哪一层的依赖更新和响应逻辑”。这和 JavaScript 原生限制有关，不是 Vue 的设计缺陷。
推荐的三种实用解法
1. 用 computed + setter 封装单个深层字段
适合绑定单个深层属性，逻辑清晰、无副作用：
- 在
<script setup></script>中定义计算属性，显式声明 get 和 set - get 返回深层值，set 通过 reactive 对象路径更新
- 模板中绑定这个计算属性即可使用 v-model
示例：
立即学习“前端免费学习笔记（深入）”；
<script setup><br>import { reactive, computed } from 'vue'<br>const user = reactive({<br> profile: { address: { city: '北京' } }<br>})<br>const cityName = computed({<br> get() { return user.profile.address.city },<br> set(val) { user.profile.address.city = val }<br>})<br></script>
2. 用 toRef 解构深层字段为独立响应式引用
适合需要频繁操作多个深层属性，且希望保持与源对象的响应式连接：
Element Plus Vue3 桌面组件库。在开发 Vue 3.x 页面时调用，使用 Element Plus 组件（如 el-button、el-input、el-form、el-table 等）。
- toRef 支持路径访问（Vue 3.3+），可安全创建对
user.profile.address.city的引用 - 该引用修改后，原始对象同步更新，且不会丢失响应性
- 直接绑定 toRef 返回的 ref 即可使用 v-model
示例：
立即学习“前端免费学习笔记（深入）”；
import { reactive, toRef } from 'vue'const user = reactive({ profile: { address: { city: '上海' } } })
const cityRef = toRef(user, 'profile.address.city')
// 模板中：
3. 抽离为子组件，用参数化 v-model 封装整条路径逻辑
适合复用场景，比如多个地方都要编辑用户地址信息：
- 子组件接收
modelValue（整个 address 对象） - 内部用 v-model 绑定其子字段（如 city、district）
- 父组件用
v-model:address参数化绑定，实现语义化通信
示例（父组件）：
不推荐的做法
避免使用 v-model="user['profile']['address']['city']" 或拼接字符串方式——这仍是非法左值，模板会编译失败。
也不要手动用 @input + :value 拆解并硬编码路径赋值，既难维护又容易漏掉响应式更新。
核心原则是：把深层路径“提升”为一个具备完整读写能力的响应式单元，再交给 v-model。不是绕过限制，而是顺应 Vue 的响应式设计范式。
