【vue3】关于vue3中的数据双向绑定

Vue 3 的数据双向绑定是指将数据模型与视图之间建立起双向的关联关系，当数据发生变化时，视图会自动更新，反之亦然。Vue 3 采用了一种名为"响应式"的机制来实现数据的双向绑定。

在 Vue 3 中，你可以使用ref和reactive来创建响应式数据。ref函数用于创建一个简单的响应式数据，而reactive函数则可以创建一个包含多个属性的响应式对象。

首先，我们使用ref来创建一个响应式数据：

import { ref } from 'vue';

const count = ref(0);

在上述代码中，我们创建了一个名为count的响应式数据，并将其初始化为0。此时，count是一个包含一个值的响应式对象。

接下来，我们可以在 Vue 组件中使用这个响应式数据，并将其与视图进行绑定：

<template>
  <div>
    <p>{
  { count }}</p>
    <button @click="increment">增加</button>
  </div>
</template>

<script>
import { ref } from 'vue';

export default {
  setup() {
    const count = ref(0);

    const increment =