Vue3 深入解析：ref 与 reactive 的使用差异与选择策略

🧙‍♂️ 诸位好，吾乃诸葛妙计，编程界之翘楚，代码之大师。算法如流水，逻辑如棋局。

📜 吾之笔记，内含诸般技术之秘诀。吾欲以此笔记，传授编程之道，助汝解决技术难题。

📄 吾之文章，可使汝在编程之路上，少走弯路，更上层楼，攀技术之巅峰。

🚀 若此篇文章对阁下有所裨益， 敬请👍🏻-点赞 ⭐ - 收藏 👀 - 关注

在Vue 3中，ref和reactive是两种不同的响应式API，它们用于创建和管理响应式数据。尽管它们的目的相同，即使数据变化能够自动更新视图，但它们在使用方式和适用场景上有所不同。

ref

ref用于为基本数据类型创建响应式引用。当你需要处理字符串、数字、布尔值等基本类型时，你会使用ref。ref返回一个包含value属性的响应式对象，你需要通过.value来访问或修改它的值。

import { ref } from 'vue';

const count = ref(0);

console.log(count.value); // 0
count.value++;

在模板中使用ref时，Vue 会自动解包，所以你不需要使用.value来访问值。

<template>
  <div>{{ count }}</div>
</template>

reactive

reactive用于创建复杂类型（如对象或数组）的响应式版本。当你想要使一个对象或数组成为响应式时，你会使用reactive。

import { reactive } from 'vue';

const state = reactive({
  count: 0,
  items: ['apple', 'banana']
});

state.count++;
state.items.push('orange');

在模板中，你可以直接访问reactive对象的属性，无需.value。

<template>
  <div>{{ state.count }}</div>
  <div v-for="item in state.items" :key="item">{{ item }}</div>
</template>

主要区别

• 数据类型：ref通常用于基本数据类型，而reactive用于对象和数组。

• 访问方式：ref返回的是一个包含value属性的对象，你需要通过.value来获取或设置值。reactive返回的是一个响应式的对象，你可以直接访问或修改它的属性。

• 嵌套对象：如果你在reactive对象中嵌套了另一个对象，嵌套的对象也会自动变成响应式。而在ref中嵌套对象不会自动变成响应式，除非你也对嵌套的对象使用reactive或ref。

• 模板解包：在模板中，Vue 会自动解包ref，而reactive对象的属性可以直接访问。

选择使用ref还是reactive

• 如果你处理的是基本数据类型，选择ref。

• 如果你处理的是对象或数组，并且希望它们的属性或元素也是响应式的，选择reactive。

• 如果你需要在响应式对象中包含基本数据类型，并且希望这些基本类型也是响应式的，可以在reactive对象中使用ref。

总的来说，ref和reactive提供了灵活的方式来创建响应式数据，你可以根据具体的使用场景选择最合适的API。

若阁下觉此文有益，恳请施以👍🏻-点赞 ⭐ - 收藏 👀 - 关注之礼，以资鼓励。倘若有疑问或建言，亦请在评论区💬评论 赐教，吾将感激不尽。