面试题：Vue 表单绑定中如何实现双向数据绑定

Question

在 Vue 表单绑定场景下，阐述 v - model 实现双向数据绑定的原理，并举例说明如何在一个输入框和一个文本展示区域之间通过双向绑定实现数据实时同步。

Answer 1

v-model双向数据绑定原理

在Vue中，v-model本质上是语法糖。它结合了input事件和value属性来实现双向数据绑定。当表单元素的值发生变化时，会触发input事件，Vue监听到该事件后，更新绑定的数据；同时，当绑定的数据发生变化时，Vue会通过value属性更新表单元素的值，从而实现双向数据的实时同步。

示例代码

<template>
  <div>
    <input v-model="inputValue" type="text">
    <p>展示内容: {{ inputValue }}</p>
  </div>
</template>

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

在上述代码中，input输入框通过v-model绑定到inputValue数据。当在输入框中输入内容时，inputValue会实时更新，同时<p>标签中展示的inputValue也会实时变化；反之，当通过代码改变inputValue的值时，输入框中的内容也会同步改变，从而实现输入框和文本展示区域之间的数据实时同步。