Vue 3.0 中的 v-model：深入浅出的全方位解析

前端

2023-10-05 16:39:45

在 Vue.js 3.0 中，v-model 作为一项核心指令，扮演着连接数据绑定和表单输入的重要角色。本文将深入剖析 v-model 的原理、使用方法和最佳实践，帮助开发者充分掌握这项强大的工具，从而轻松构建动态且响应式的数据驱动应用。

v-model 的工作原理

v-model 本质上是一个语法糖，简化了数据绑定和表单输入处理的过程。它允许开发者使用双向绑定语法（v-model="data"）将数据属性（data）与表单元素（例如 input、select、checkbox）进行关联。

当表单元素的值发生变化时，v-model 会自动更新关联的数据属性，从而实现数据的实时响应。反之，当数据属性值发生变化时，v-model 也能自动更新表单元素的值，确保视图与数据的同步。

单向与双向绑定

v-model 默认提供双向绑定，即数据属性和表单元素之间可以相互影响。但在某些情况下，可能需要使用单向绑定，即数据属性只能影响表单元素，而表单元素的值不会更新数据属性。

通过在 v-model 指令后添加修饰符 .sync 或 .once，即可实现单向绑定：

.sync：单向绑定，表单元素值的变化不会更新数据属性。
.once：仅在初始化时将数据属性值更新到表单元素，后续变化不更新。

自定义 v-model 实现

在某些场景中，默认的 v-model 实现可能无法满足特殊需求。此时，开发者可以自定义 v-model 实现，以满足特定需求。

自定义 v-model 需要在项目中定义一个全局指令，并实现以下方法：

get：从关联的表单元素中获取值。
set：将值更新到关联的表单元素。

例如，可以实现一个自定义 v-model 来处理多选框的数组数据：

Vue.directive('my-model', {
  get(el) {
    return Array.from(el.querySelectorAll('input[type=checkbox]:checked')).map(checkbox => checkbox.value)
  },
  set(el, value) {
    if (!Array.isArray(value)) {
      value = [value]
    }
    Array.from(el.querySelectorAll('input[type=checkbox]')).forEach(checkbox => {
      checkbox.checked = value.includes(checkbox.value)
    })
  }
})