vue全家桶进阶之路31：Vue3 数据和方法的双向绑定ref、reactive、toRefs

ref

在 Vue 3 中，你可以使用 setup 函数来定义组件的数据和方法。在 setup 函数中，你可以使用 ref、reactive 和 computed 等 Vue 3 的响应式 API 来定义数据，并返回一个包含你需要公开的数据和方法的对象。下面是一个例子：

import { defineComponent, ref } from 'vue';
 
export default defineComponent({
  setup() {
    const message = ref('Hello World');
 
    function showMessage() {
      alert(message.value);
    }
 
    return {
      message,
      showMessage
    };
  }
});

在这个例子中，我们使用 ref 函数来定义了一个名为 message 的响应式数据，并将其初始化为字符串 'Hello World'。我们还定义了一个名为 showMessage 的方法，它在被调用时会弹出一个包含 message 的提示框。最后，我们在 setup 函数的返回值中将 message 和 showMessage 作为一个对象返回，这样它们就可以在组件的模板中使用了。

在组件的模板中，你可以使用插值语法和 v-on 指令来访问这些数据和方法。例如：

<template>
  <div>
    <p>{{ message }}</p>
    <button @click="showMessage">显示消息</button>
  </div>
</template>

在这个例子中，我们使用 {{ message }} 插值语法来显示 message 的值，并使用 @click 绑定了 showMessage 方法。当按钮被点击时，showMessage 方法就会被调用，弹出一个包含 message 的提示框。

需要注意的是，在 Vue 3 中，setup 函数是组件中定义数据和方法的主要方式。其他选项（如 data、methods 和 computed）仍然可以使用，但它们只是 setup 函数的语法糖。如果你使用这些选项来定义数据和方法，Vue 3 会将它们转换为 setup 函数中的等效代码。

以下是一个简单的 Vue 3 应用程序示例，点击按钮时会将数据加 1：

<template>
  <div>
    <p>{{ count }}</p>
    <button @click="increment">加 1</button>
  </div>
</template>
 
<script>
import { defineComponent, ref } from 'vue';
 
export default defineComponent({
  setup() {
    const count = ref(0);
 
    function increment() {
      count.value++;
    }
 
    return {
      count,
      increment
    };
  }
});
</script>

在这个例子中，我们使用 ref 函数来定义一个名为 count 的响应式数据，并将其初始化为 0。我们还定义了一个名为 increment 的方法，它在被调用时会将 count 的值加 1。最后，我们在 setup 函数的返回值中将 count 和 increment 作为一个对象返回，这样它们就可以在组件的模板中使用了。

在组件的模板中，我们使用 {{ count }} 插值语法来显示 count 的值，并使用 @click 绑定了 increment 方法。当按钮被点击时，increment 方法就会被调用，将 count 的值加 1，并且页面会自动更新显示最新的值。

可以将 increment 函数从普通函数改写为箭头函数，代码如下：

<template>
  <div>
    <p>{{ count }}</p>
    <button @click="increment">加 1</button>
  </div>
</template>
 
<script>
import { defineComponent, ref } from 'vue';
 
export default defineComponent({
  setup() {
    const count = ref(0);
 
    const increment = () => {
      count.value++;
    };
 
    return {
      count,
      increment
    };
  }
});
</script>

在这个例子中，我们使用箭头函数语法定义了 increment 方法，这与使用普通函数的效果是一样的。箭头函数通常可以更简洁地表示函数逻辑，并且不需要绑定 this，因此在 Vue 3 中使用箭头函数作为组件的方法是很常见的。

 reactive 

reactive 是 Vue 3 中用于创建响应式对象的 API，它将一个普通的 JavaScript 对象转换为响应式对象，使得对象的属性能够在变化时触发视图的更新。

使用 reactive 创建响应式对象非常简单，只需要调用 reactive 函数并传入普通的 JavaScript 对象即可。例如：

import { reactive } from 'vue';
 
const state = reactive({
  count: 0,
  message: 'Hello, World!',
});

以下是一个简单的示例，演示如何使用 reactive 创建响应式对象，以及如何在视图中使用它们：

<template>
  <div>
    <p>Count: {{ state.count }}</p>
    <p>Message: {{ state.message }}</p>
    <button @click="increment">Increment</button>
    <button @click="changeMessage">Change Message</button>
  </div>
</template>
 
<script>
import { reactive } from 'vue';
 
export default {
  setup() {
    const state = reactive({
      count: 0,
      message: 'Hello, World!',
    });
 
    function increment() {
      state.count++;
    }
 
    function changeMessage() {
      state.message = 'Hello, Vue!';
    }
 
    return {
      state,
      increment,
      changeMessage,
    };
  },
};
</script>

在上面的代码中，我们使用 reactive 创建了一个响应式对象 state，包含两个属性 count 和 message。我们还定义了两个方法 increment 和 changeMessage，分别用于增加 count 属性的值和修改 message 属性的值。在模板中，我们使用插值语法 {{ }} 和 v-on 指令绑定了 state 对象的属性和方法，以实现视图的响应式更新。@ 符号，它是 v-on 指令的缩写，用于绑定事件。

当我们点击 "Increment" 按钮时，increment 方法会将 count 属性的值增加 1，这会触发视图的响应式更新，使得 "Count" 文字后面的数字会自动更新为最新的值。

当我们点击 "Change Message" 按钮时，changeMessage 方法会将 message 属性的值修改为 "Hello, Vue!"，这也会触发视图的响应式更新，使得 "Message" 文字后面的内容会自动更新为最新的值。

ref和reactive 的差别：

ref 和 reactive 都是 Vue 3 提供的用于实现响应式数据的 API，但它们的使用方式和作用略有不同。

• ref：用于创建一个响应式的基本数据类型，如数字、字符串、布尔值等。ref 创建的响应式对象包装了一个基本类型的值，它提供了 .value 属性来访问包装的值，同时在模板中使用时，也需要通过 .value 来访问包装的值。
• reactive：用于创建一个响应式的对象，可以包含多个属性。reactive 创建的响应式对象本身就是一个 JavaScript 对象，可以直接访问其中的属性，而不需要使用额外的 .value 属性。在模板中使用时，直接使用对象的属性名即可。

下面是一个示例，展示了 ref 和 reactive 同时存在时的使用方法和区别。

<template>
  <div>
    <!-- ref 示例 -->
    <p>count 的值是：{{ count }}</p>
    <button @click="increment">+1</button>
 
    <!-- reactive 示例 -->
    <p>person 的名字是：{{ person.name }}</p>
    <p>person 的年龄是：{{ person.age }}</p>
    <button @click="changeName">修改名字</button>
    <button @click="changeAge">修改年龄</button>
  </div>
</template>
 
<script>
import { ref, reactive } from 'vue';
 
export default {
  setup() {
    // ref 示例
    const count = ref(0);
    const increment = () => {
      count.value++;
    };
 
    // reactive 示例
    const person = reactive({
      name: '张三',
      age: 20
    });
    const changeName = () => {
      person.name = '李四';
    };
    const changeAge = () => {
      person.age++;
    };
 
    return {
      count,
      increment,
      person,
      changeName,
      changeAge
    };
  }
}
</script>
 
<!-- 批注：
ref 用于创建单个数据的响应式值，需要使用 count.value 访问该值。
reactive 用于创建包含多个属性的响应式对象，可以通过 person.name 和 person.age 访问属性。 -->

 toRefs 

toRefs 是 Vue 3 中的一个 API，它可以将一个 reactive 对象中的所有属性都转换成 ref 对象，并返回一个包含这些 ref 对象的新对象。

在 Vue 3 中，由于 reactive 对象的属性是被代理的，所以无法直接通过解构的方式获取这些属性，并且也无法将它们传递给一些只接受 ref 对象的 API。而通过 toRefs，我们可以将这些属性都转换成 ref 对象，并且使用 ref 对象的方式来访问它们。

下面是一个使用 toRefs 的示例：

return{...toRefs(date)}这段代码的作用是将 reactive 对象 data 中的所有属性转换为 ref 对象，并将这些 ref 对象组成一个新的对象返回。

具体来说，toRefs 函数可以将 reactive 对象中的所有属性转换为 ref 对象，这样我们就可以像操作普通的 ref 对象一样操作 reactive 对象的属性。但是，由于 toRefs 返回的是一个对象，因此它并不能直接将这些 ref 对象合并为一个 reactive 对象。因此，我们需要使用 ES6 扩展运算符 ... 将这些 ref 对象组成一个新的对象并返回。

需要注意的是，使用 toRefs 转换出来的 ref 对象和原来的 reactive 对象中的属性绑定关系是保持一致的。也就是说，如果我们通过 ref 对象修改了某个属性的值，那么这个修改也会反映到 reactive 对象上。因此，toRefs 函数可以用来在模板中方便地使用 reactive 对象的属性，同时保持这些属性与 reactive 对象的绑定关系。

<template>
  <div>
    <p>count: {{ count.value }}</p>
    <p>message: {{ message.value }}</p>
    <button @click="increment">increment</button>
  </div>
</template>
 
<script>
import { reactive, toRefs } from 'vue'
 
export default {
  setup() {
    const data = reactive({
      count: 0,
      message: 'Hello, world!'
    })
 
    const increment = () => {
      data.count++
    }
 
    // 使用 toRefs 将 reactive 对象中的属性转换为 ref 对象
    // 然后将这些 ref 对象组成一个新的对象并返回
    return {
      ...toRefs(data),
      increment
    }
  }
}
</script>

在这个示例中，我们首先创建了一个 reactive 对象 data，其中包含了 count 和 message 两个属性。然后，我们使用 toRefs 将 data 中的属性转换为 ref 对象，并将这些 ref 对象组成一个新的对象并返回。最后，我们在 setup 函数中定义了一个 increment 函数，用于增加 count 的值。在模板中，我们可以通过 count.value 和 message.value 来访问这些 ref 对象的值，并通过 @click="increment" 来监听按钮的点击事件。