Composition API中的ref和reactive的妙用

Composition API是Vue 3中的一项强大功能，它允许我们在组件中更优雅地处理数据和功能。它提供了两种主要方法来存储数据：ref和reactive。在这篇文章中，我们将深入探讨这两种方法的不同之处，并了解它们如何在实际场景中使用。

ref：追踪基本类型

ref函数用于创建可变的原始JavaScript值，例如字符串、数字或布尔值。它返回一个带有.value属性的对象，该属性指向原始值。

优点：

• 跟踪基本类型数据。
• 响应式：对.value的更改会触发重新渲染。
• 在模板中使用简便：可以使用.value访问值。

示例：

import { ref } from 'vue';

const count = ref(0);

reactive：追踪对象和数组

reactive函数用于创建响应式对象和数组。它将对象或数组转换为一个代理对象，其中所有属性和索引都将被追踪。

优点：

• 追踪对象和数组。
• 响应式：对代理对象的任何更改都会触发重新渲染。
• 在模板中使用简便：可以使用点语法访问属性。

示例：

import { reactive } from 'vue';

const person = reactive({
  name: 'John Doe',
  age: 30
});

ref vs. reactive：何时使用

使用ref的情况：

• 跟踪基本类型数据。
• 只需要局部响应性（仅在组件内需要）。
• 性能优化：基本类型数据比对象和数组更轻量。

使用reactive的情况：

• 追踪对象和数组。
• 需要全局响应性（组件之间需要共享数据）。
• 访问对象属性更方便：可以使用点语法。

实战案例

案例 1：计数器

这是一个使用ref跟踪计数器的简单示例：

import { ref } from 'vue';

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

    const increment = () => {
      count.value++;
    };

    return {
      count,
      increment
    };
  }
};

案例 2：用户数据

这是一个使用reactive跟踪用户数据的示例：

import { reactive } from 'vue';

export default {
  setup() {
    const user = reactive({
      name: 'John Doe',
      age: 30
    });

    const changeName = (newName) => {
      user.name = newName;
    };

    return {
      user,
      changeName
    };
  }
};