Vue 3 v-model 深度剖析：一个重要的 breaking change

前端

2023-12-26 22:03:06

Vue 3 中 v-model 的全面解析

v-model：双向数据绑定的核心

在 Vue.js 的世界中，v-model 指令扮演着双向数据绑定的核心角色，无缝连接组件数据和用户界面元素。它允许开发人员轻松操作组件数据，并自动更新用户界面。

Vue 2 中的 v-model

在 Vue 2 中，v-model 依赖于 input 事件来实现双向数据绑定。当用户与输入元素交互时，会触发 input 事件，从而更新组件数据。这种机制虽然有效，但存在一些局限性，例如性能开销和跨平台兼容性差。

Vue 3 中 v-model 的重大革新

Vue 3 对 v-model 进行了重大更新，以解决这些局限性并提升整体性能。它引入了新的 modelValue 指令，使用原生 HTML value 属性来实现双向数据绑定。

modelValue 指令：更符合标准、性能优化

modelValue 指令遵循 HTML 标准，与 <input> 元素的 value 属性保持一致。它消除了 input 事件的依赖性，从而减少了事件处理的开销，提高了性能。此外，modelValue 指令在不同的平台上具有更好的兼容性，为跨平台开发奠定了基础。

在 Vue 3 中使用 v-model

使用 v-model 在 Vue 3 中非常简单，与 Vue 2 类似。以下示例演示了如何在组件中使用 v-model：

<template>
  <input v-model="message">
</template>

<script>
export default {
  data() {
    return {
      message: 'Hello, world!'
    }
  }
}
</script>

在这种情况下，输入元素的值与组件的 message 数据属性双向绑定。当用户更改输入内容时，message 数据将自动更新，并反映在输入元素中。

父子组件间的数据通信

Vue 3 中的 v-model 也支持父子组件间的数据通信。子组件通过 v-model 指令与输入元素绑定，而父组件通过监听子组件的 update:modelValue 事件来更新数据。

以下示例演示了父组件和子组件之间的 v-model 通信：

<!-- 子组件 -->
<template>
  <input v-model="message">
</template>

<script>
export default {
  props: ['message'],
  emits: ['update:message'],
  methods: {
    handleInput(e) {
      this.$emit('update:message', e.target.value)
    }
  }
}
</script>

<!-- 父组件 -->
<template>
  <child-component v-model="message"></child-component>
</template>

<script>
export default {
  data() {
    return {
      message: 'Hello, world!'
    }
  }
}
</script>