vue3双向绑定 写明详细注释

双向绑定是指数据的变化能够自动同步到视图中，同时视图中的变化也能够自动反映到数据中。在 Vue 3 中，双向绑定可以通过 v-model 指令来实现。下面是一个简单的例子：

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

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

在上面的代码中，我们使用了 v-model 指令来绑定一个输入框和一个 p 标签，它们都显示了 message 变量的值。当我们在输入框中输入文本时，message 变量的值会自动更新，而当我们修改 message 变量的值时，p 标签中的内容也会自动更新。

下面是一个更复杂的例子，可以演示双向绑定的实现原理：

<template>
  <div>
    <input :value="message" @input="updateMessage">
    <p>{{ message }}</p>
  </div>
</template>

<script>
import { ref } from 'vue'

export default {
  setup() {
    const message = ref('Hello Vue!')

    function updateMessage(event) {
      message.value = event.target.value
    }

    return {
      message,
      updateMessage
    }
  }
}
</script>

在这个例子中，我们使用了 :value 和 @input 两个指令来手动实现双向绑定。:value 指令绑定了输入框的值，它的值是 message 变量的值。@input 指令绑定了输入框的输入事件，它调用了 updateMessage 函数。updateMessage 函数将输入框的值赋值给了 message 变量，从而实现了双向绑定。

需要注意的是，在 Vue 3 中，数据的响应式是通过 reactive 或 ref 函数来实现的。在上面的例子中，我们使用了 ref 函数来创建了一个响应式的变量 message。在 updateMessage 函数中，我们需要使用 message.value 来获取或设置它的值。