vu e数据双向绑定

Vue 的双向数据绑定可以让数据在模型层和视图层之间保持同步，即当视图层的数据变化时，模型层的数据也会相应地发生改变，反之亦然。

在 Vue 中，可以通过 `v-model` 指令来实现双向数据绑定。`v-model` 指令用于在表单元素（如 input、textarea、select 等）上创建双向数据绑定。例如，下面的代码展示了一个 input 元素与 Vue 实例中的 message 属性之间的双向数据绑定：

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

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

在上面的代码中，当用户在 input 元素中输入内容时，Vue 会自动将输入的内容赋值给 message 属性，并更新视图中对应的插值表达式（即 `{{message}}`）。

除了通过 `v-model` 指令来实现双向数据绑定外，Vue 还提供了一个 `$watch` 方法，用于监听数据的变化。例如，可以通过以下代码监听 message 属性的变化：

export default {
  data() {
    return {
      message: ''
    }
  },
  watch: {
    message(newValue, oldValue) {
      console.log('message changed:', newValue, oldValue)
    }
  }
}

当 message 属性的值发生变化时，Vue 会自动调用 watch 中对应的函数，并传入新值和旧值作为参数。