Vue.js入门系列（三十三）：深入理解 `ref` 与 `reactive` 函数

Vue.js入门系列（三十三）：深入理解 ref 与 reactive 函数

引言

在 Vue 3 中，ref 和 reactive 是两种核心的响应式 API，用于处理数据的响应式绑定。它们是组合式 API 的重要组成部分，帮助开发者更灵活地管理和追踪状态变化。在本文中，我们将深入探讨如何使用 ref 函数来处理基本类型和对象类型的数据，以及 reactive 函数的作用和最佳实践

一、ref 函数简介

1.1 什么是 ref？

ref 是 Vue 3 中提供的一个响应式 API，专门用于创建响应式数据。它可以将基本类型和复杂类型的数据包装成响应式对象，并在数据变化时自动更新对应的视图。

1.2 为什么需要 ref？

在 Vue 3 中，基本类型的数据（如字符串、数字、布尔值）无法直接成为响应式对象。ref 提供了一种方式，通过包裹这些基本类型，使其具备响应式特性。

二、ref 函数处理基本类型

2.1 ref 处理基本类型的用法

使用 ref 包裹基本数据类型（如字符串、数字、布尔值）时，返回的对象具有一个 .value 属性，用于访问和修改原始数据。

import { ref } from 'vue';

export default {
  setup() {
    const count = ref(0);  // 使用 ref 创建响应式的基本类型数据

    const increment = () => {
      count.value++;  // 更新 count.value 来改变数值
    };

    return { count, increment };
  }
};

在这个示例中，count 是通过 ref 创建的响应式数据，count.value 存储了实际的数值，且当 count.value 发生变化时，视图会自动更新。

2.2 使用 ref 在模板中绑定基本类型

在模板中，我们可以直接使用 ref 返回的对象，并在需要访问数据时使用 .value：

<template>
  <div>
    <p>Count: {{ count }}</p>  <!-- 这里可以直接使用 count，而不需要手动访问 .value -->
    <button @click="increment">Increment</button>
  </div>
</template>

在模板中，Vue 会自动解包 ref 的 .value，所以可以直接使用 count 变量，而不需要显式地添加 .value。

2.3 监听 ref 的变化

你可以通过 Vue 3 的 watch 函数来监听 ref 变量的变化：

import { ref, watch } from 'vue';

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

    watch(count, (newValue, oldValue) => {
      console.log(`Count changed from ${oldValue} to ${newValue}`);
    });

    return { count };
  }
};

当 count.value 发生变化时，watch 会监听到并执行回调函数。

三、ref 函数处理对象类型

3.1 使用 ref 处理对象

虽然 reactive 更常用于处理对象，但 ref 同样可以处理对象类型的数据。对于对象，ref 包裹后依然使用 .value 来访问整个对象。

import { ref } from 'vue';

export default {
  setup() {
    const person = ref({
      name: 'John',
      age: 30
    });

    const updateName = () => {
      person.value.name = 'Doe';  // 更新对象内部的属性
    };

    return { person, updateName };
  }
};

在这个例子中，person 对象被 ref 包裹后，依然需要通过 person.value 来访问或更新对象的属性。

3.2 ref 对象与 reactive 的对比

• ref 用于处理基本类型和对象：ref 可以包裹任何类型的数据，但在处理对象时，依然需要通过 .value 来访问对象属性。
• reactive 专用于处理对象：相比于 ref，reactive 直接返回一个深层响应式的对象，更加适合处理复杂的对象或数组。

四、reactive 函数

4.1 什么是 reactive？

reactive 是 Vue 3 提供的另一个核心 API，用于将一个对象转换为响应式对象。与 ref 不同，reactive 专用于处理对象，并且会递归地将对象的所有属性都转换为响应式的。

4.2 reactive 的基本用法

reactive 可以直接将一个普通对象转换为深层响应式对象，当对象属性发生变化时，视图会自动更新。

import { reactive } from 'vue';

export default {
  setup() {
    const user = reactive({
      name: 'Alice',
      age: 25
    });

    const updateAge = () => {
      user.age = 26;  // 直接修改对象的属性，视图会自动更新
    };

    return { user, updateAge };
  }
};

与 ref 不同，使用 reactive 包裹的对象不需要通过 .value 来访问属性，直接修改属性就可以触发响应式更新。

4.3 reactive 的深层响应式

reactive 会递归地使对象的所有层级变成响应式，即使嵌套的对象或数组也是响应式的。

import { reactive } from 'vue';

export default {
  setup() {
    const state = reactive({
      info: {
        name: 'Vue 3',
        details: {
          version: '3.0',
          language: 'JavaScript'
        }
      }
    });

    const updateVersion = () => {
      state.info.details.version = '3.1';  // 深层属性更新，视图会自动响应
    };

    return { state, updateVersion };
  }
};

在这个例子中，reactive 将整个对象及其嵌套的属性都转换为响应式。当嵌套对象中的属性发生变化时，Vue 也会自动追踪并更新视图。

4.4 处理数组

reactive 同样可以用于处理数组，数组的增删改操作也会触发响应式更新。

import { reactive } from 'vue';

export default {
  setup() {
    const items = reactive([1, 2, 3]);

    const addItem = () => {
      items.push(4);  // 添加元素会触发视图更新
    };

    return { items, addItem };
  }
};

在这个例子中，items 数组被 reactive 包裹，数组的变化会自动反映到视图中。

4.5 ref 和 reactive 的配合使用

在某些场景下，你可能需要将 ref 和 reactive 结合使用。ref 更适合处理基本类型，而 reactive 更适合处理对象和数组。

例如，你可以使用 ref 包裹一个响应式对象来处理整体状态的变化：

import { ref, reactive } from 'vue';

export default {
  setup() {
    const state = ref(reactive({
      user: {
        name: 'Alice',
        age: 25
      }
    }));

    return { state };
  }
};

在这个例子中，我们通过 ref 包裹了一个 reactive 对象，从而实现了对状态变化的双重管理。

五、总结

通过本文的学习，你应该掌握了以下关键点：

• ref 函数处理基本类型：了解了如何通过 ref 将基本类型（如字符串、数字、布尔值）变成响应式数据，并在视图中自动更新。
• ref 函数处理对象类型：掌握了使用 ref 处理对象时的 .value 访问方式，并与 reactive 处理对象的方式进行了对比。
• reactive 函数的使用：学习了如何使用 reactive 将对象和数组转换为响应式数据，并了解了 reactive 的深层响应式特性。
• ref 和 reactive 的配合使用：学会了在某些场景下如何结合 ref 和 reactive 来处理更复杂的数据结构和状态。

这些 API 是 Vue 3 组合式 API 的核心，为你开发 Vue 3 应用时提供了更大的灵活性和性能优势。在接下来的博客中，我们将继续深入探讨 Vue 3 的其他高级特性和应用场景。如果你有任何疑问或需要进一步讨论，欢迎在评论区留言。感谢你的阅读，期待在下一篇博客中继续与大家分享更多 Vue.js 和 Vue 3 的开发技巧与经验！