Vue 双向数据绑定基础到实战

Vue.js 是一种前端框架，以其强大的数据绑定能力而著名。其中，双向数据绑定是 Vue 最重要的特性之一，它使得数据模型和视图之间的同步变得十分便捷。本文将带你深入理解 Vue 的双向数据绑定原理。

一、双向数据绑定原理

双向数据绑定是通过 v-model 指令实现的。v-model 不仅可以将数据模型的属性绑定到视图中，还可以在视图中的输入控件上捕获用户的输入并将其同步回数据模型。

实现双向数据绑定的原理如下：

1. 首先，Vue 会使用 Object.defineProperty 方法在数据模型的属性上定义一个 getter 和 setter。
2. 当属性被访问时，getter 会被触发，Vue 会将该属性的值返回给视图。
3. 当属性被修改时，setter 会被触发，Vue 会检测到数据的变化，并将新的值同步到视图中，以确保视图和数据的一致性。

二、双向数据绑定

双向数据绑定可以用于各种场景，例如表单输入、实时编辑等。

<template>
  <div>
    <input v-model="message" placeholder="请输入消息">
    <p>{{ message }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      message: ''
    }
  }
}
</script>

代码中使用 v-model="message" 将输入框的值与 message 属性进行双向绑定。当用户在输入框中输入消息时，message 的值会自动更新。同时，使用插值表达式 {{ message }} 将 message 属性的值展示在 <p> 标签中，实现数据的双向同步。

三、自定义组件中的双向数据绑定

除了在原生的输入控件上应用双向数据绑定外，Vue 还允许在自定义组件中使用双向数据绑定。要在自定义组件中实现双向绑定，需要使用 v-model 指令，并在组件中定义 value 属性和 input 事件。

<template>
  <div>
    <custom-input v-model="message"></custom-input>
    <p>{{ message }}</p>
  </div>
</template>

<script>
import CustomInput from './CustomInput.vue';

export default {
  components: {
    CustomInput
  },
  data() {
    return {
      message: ''
    }
  }
}
</script>

代码中，在父组件中使用 v-model="message" 将 message 属性与自定义组件 CustomInput 进行双向数据绑定。在自定义组件中，需要在 props 中定义 value 属性，并在输入控件的 input 事件中使用 $emit 方法触发 input 事件，并将新的值作为参数传递。

<template>
  <input :value="value" @input="$emit('input', $event.target.value)">
</template>

<script>
export default {
  props: ['value']
}
</script>

通过以上代码，实现了自定义组件中的双向数据绑定，确保了父组件和子组件之间数据的同步更新。