如何在Vue 3 Composition API中使用v-model？

响应式管理逻辑 #

• 基础类型（字符串、数字、布尔等）的表单字段，用ref()定义响应式变量，模板中绑定v-model时不需要手动写.value，Vue会自动读写ref内部的value属性完成双向同步
• 复杂类型（表单对象、数组等）的字段，用reactive()定义响应式对象，直接绑定对应属性即可，示例：const form = reactive({name: ''})，模板绑定写法为v-model="form.name"

问题修复方案 #

上述代码无法实现响应式同步的常见原因及修正方法如下：

1. 引入方式不匹配 #

代码同时存在ES模块导入语法和全局Vue对象调用，若为CDN引入Vue的场景，浏览器原生不支持直接importVue内部API，会抛出语法错误导致setup函数未正常执行，响应式变量自然不会更新。
CDN场景修正代码：

// 移除import语句，从全局Vue对象中解构所需API
const { ref, watch, reactive } = Vue;

const vueapp = Vue.createApp({
  setup(props, {attrs, slots, emit}){
    const test = ref('');
    return {
      test
    }
  },
});

vueapp.mount('#form-panels');

2. 挂载容器范围错误 #

需确保input元素被包裹在id为form-panels的DOM元素内部，否则该input不在Vue的模板编译范围内，v-model指令不会生效，输入内容无法同步到响应式变量。
正确HTML结构示例：

<!-- 外层挂载容器必须存在，input放在容器内部 -->
<div id="form-panels">
  <input name="test" v-model="test" id="name" type="text" value="" />
</div>

3. 工程化项目排查 #

若使用Vite、Webpack等构建工具的工程化项目，需确认已正确安装Vue3依赖，无拼写错误，可打开控制台查看是否有其他运行时错误阻塞代码执行，也可通过添加watch日志确认响应式变量是否正常触发更新。

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