Vue中如何高效选择使用v-model与ref？

核心区别与ref的不可替代性 #

• ref()（模板引用）的核心优势：

  • 直接操控原生DOM：当你需要调用DOM的原生方法或读取原生属性时，ref是唯一可行的方案——比如让输入框自动聚焦、获取canvas绘图上下文、操作第三方UI库的DOM实例。

    <template>
      <input ref="inputRef" placeholder="自动聚焦" />
    </template>
    <script setup>
    import { ref, onMounted } from 'vue'
    const inputRef = ref(null)
    onMounted(() => {
      inputRef.value.focus() // 直接调用DOM的focus方法
    })
    </script>
    

  • 访问子组件内部实例：如果子组件没通过props/emit暴露接口，ref能直接调用它的内部方法或读取内部状态（注意：这是兜底方案，优先用props/emit做组件通信）。
  • 处理非表单类组件数据：对于自定义的可视化组件、复杂交互组件这类非表单控件，ref可以直接绑定实例来获取内部运行数据。

• v-model的核心定位：

  • 表单场景的语法糖：针对input、select这类表单控件，v-model把:value和@input的组合写法简化成一行，代码更清爽。

    <!-- v-model写法 -->
    <input v-model="username" />
    <!-- 等价的原生写法 -->
    <input :value="username" @input="username = $event.target.value" />
    

  • 标准化组件通信：自定义组件用v-model时，遵循Vue默认的modelValue prop和update:modelValue emit规范，组件间数据传递的逻辑更统一，可读性更强。

高效使用的实操经验 #

• 表单数据优先用v-model：所有涉及用户输入的表单场景，v-model是最贴合Vue设计思路的选择，代码简洁还易维护。
• 仅在需要直接操作DOM/组件实例时用ref：比如自动聚焦、读取DOM尺寸、调用子组件内部方法这类场景，ref是不可替代的。
• 别用ref替代v-model处理表单：强行用ref去修改表单值会增加冗余代码，还违背了Vue响应式数据管理的初衷。
• 注意ref的生效时机：ref绑定的DOM/组件实例要等组件挂载后才会有值，所以操作逻辑要放在onMounted或者确保实例已存在的watch回调里。

内容的提问来源于stack exchange，提问作者Jonas Kahn