Vue的v-model绑定不存在的嵌套属性无法恢复，如何实现低侵入晚绑定？

问题根本原因 #

你之前的推测完全正确：v-model 是双向绑定语法糖，本质等价于同时绑定值属性和输入事件，要求绑定的表达式是合法的可赋值左值。而JS原生不支持将可选链表达式作为赋值左值（foo?.abc?.text = 'xxx' 本身就是非法语法），因此直接给v-model加可选链无法生效。

推荐解决方案（无奇技淫巧，符合Vue官方设计规范） #

1. 提前初始化嵌套属性结构（最优方案）

最符合Vue响应式设计的方式是在声明响应式变量时，就补全所有需要用到的嵌套结构默认值：

<!-- Vue2 选项式API写法 -->
<script>
export default {
  data() {
    return {
      // 提前定义完整嵌套结构，默认值给空字符串即可
      foo: {
        abc: {
          text: ''
        }
      }
    }
  }
}
</script>

<!-- Vue3 组合式API写法 -->
<script setup>
import { reactive } from 'vue'
const foo = reactive({
  abc: {
    text: ''
  }
})
</script>

这种方案没有额外开销，也不会出现访问未定义属性导致的页面崩溃问题，是官方首推的最佳实践。

2. 用计算属性封装读写逻辑（适合需要晚初始化的场景）

如果确实无法提前确定结构，需要后续异步初始化嵌套属性，可以用带get/set的计算属性封装读写逻辑，同时兼容可选链读取和自动补全结构写入：

<script setup>
import { ref, computed } from 'vue'
// 初始只有空对象，无嵌套结构
const foo = ref({})

const abcText = computed({
  get() {
    // 读取时用可选链兜底默认值
    return foo.value?.abc?.text ?? ''
  },
  set(newVal) {
    // 写入时自动补全缺失的嵌套结构
    if (!foo.value.abc) foo.value.abc = {}
    foo.value.abc.text = newVal
  }
})
</script>

<template>
  <!-- 直接绑定封装好的计算属性即可 -->
  <textarea v-model="abcText"></textarea>
</template>

3. 条件渲染兜底（最简单的临时兼容方案）

如果不想修改JS逻辑，也可以在模板上加v-if判断嵌套结构存在后再渲染textarea组件，避免访问未定义属性报错：

<textarea v-if="foo?.abc" v-model="foo.abc.text"></textarea>

当foo或abc未初始化时组件不会渲染，等异步初始化完成后会自动加载，不会触发页面崩溃。

内容的提问来源于stack exchange，提问作者Anders Lindén