Vue 3响应式系统详解：ref、toRefs、reactive及更多

🌟 前言

欢迎来到我的技术小宇宙！🌌 这里不仅是我记录技术点滴的后花园，也是我分享学习心得和项目经验的乐园。📚 无论你是技术小白还是资深大牛，这里总有一些内容能触动你的好奇心。🔍

• 🤖 洛可可白：个人主页

• 🔥 个人专栏：✅前端技术 ✅后端技术

• 🏠 个人博客：洛可可白博客

• 🐱 代码获取：bestwishes0203

• 📷 封面壁纸：洛可可白wallpaper

Vue 3响应式系统详解：ref、toRefs、reactive及更多

在 Vue 3 中，ref、toRefs 和 reactive 是处理响应式数据的三种不同方式，它们各自有不同的用途和特点。

1. ref、toRefs、reactive

1. ref

ref 是用来创建响应式引用的主要方法。它通常用于基本数据类型（如字符串、数字、布尔值）的响应式包装。在模板中可以直接使用，但在 JavaScript 中需要通过 .value 属性来访问或修改它的值。

import { ref } from 'vue';

const count = ref(0);
const userName = '洛可可白';

// 在 JavaScript 中访问
console.log(count.value); // 0
count.value++; // 增加计数

// 在模板中访问
// <div>{{ count }}</div>

2. toRefs

toRefs 是用来将 reactive 对象中的每个属性转换为一个 ref 对象的函数。这样做的好处是，当你在组件的 setup 函数中使用 reactive 创建一个响应式对象，并希望在模板或子组件中访问这些属性时，可以直接使用 ref 而不用担心它们被意外地解构。

import { reactive, toRefs } from 'vue';

const state = reactive({
  count: 0,
  userName: '洛可可白'
});

// 在模板中使用 toRefs 转换后的属性
// <div>{{ count }}</div>
// <div>{{ userName }}</div>

// 将 reactive 对象转换为 ref 对象数组
const { count, userName } = toRefs(state);

3. reactive

reactive 是用来创建响应式对象的方法，适用于处理对象和数组。与 Vue 2 中的 data 函数类似，它允许你定义一个对象，对象中的所有属性都将是响应式的。reactive 对象的属性可以在模板和 JavaScript 中直接访问和修改，不需要 .value。

import { reactive } from 'vue';

const state = reactive({
  count: 0,
  userName: '洛可可白'
});

// 在 JavaScript 中访问和修改
console.log(state.count); // 0
state.count++; // 增加计数

// 在模板中直接访问
// <div>{{ state.count }}</div>
// <div>{{ state.userName }}</div>

4. 区别和作用

• ref 适用于基本数据类型的响应式包装，需要通过 .value 访问。
• toRefs 用于将 reactive 对象的属性转换为 ref 对象，以便在模板或子组件中使用。
• reactive 适用于创建响应式对象，适用于对象和数组，属性可以直接访问。

在实际开发中，可以根据需要选择使用 ref、toRefs 或 reactive。例如，如果你只需要处理基本数据类型，ref 就足够了。如果你需要处理一个对象，并且想要在模板中直接访问对象的属性，那么 reactive 是更好的选择。如果你需要在子组件中访问 reactive 对象的属性，那么使用 toRefs 将这些属性转换为 ref 是必要的。

2. 更多处理响应式数据的方法

在 Vue 3 中，除了 ref、toRefs 和 reactive，还有其他几种处理响应式数据的方法和概念：

1. computed

computed 用于创建计算属性，这些属性的值是基于其他响应式数据源派生出来的。计算属性是惰性求值的，只有当它们的依赖项发生改变时才会重新计算。

import { ref, computed } from 'vue';

const count = ref(0);
const doubleCount = computed(() => count.value * 2);

2. watch

watch 用于观察响应式数据的变化，并在数据变化时执行特定的函数。这对于执行数据变化后的处理逻辑非常有用。

import { ref, watch } from 'vue';

const count = ref(0);

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

3. watchEffect

watchEffect 是一个基于响应式数据源的观察者，它会立即执行一次，并且当响应式数据源变化时重新执行。它通常用于处理那些不需要立即获取值的副作用。

import { ref, watchEffect } from 'vue';

const count = ref(0);

watchEffect(() => {
  console.log(`Count is now: ${count.value}`);
});

4. onMounted 和 onUnmounted

onMounted 和 onUnmounted 是生命周期钩子，分别在组件挂载后和卸载前执行。它们可以用来处理需要清理的资源或执行一次性的初始化操作。

import { onMounted, onUnmounted } from 'vue';

onMounted(() => {
  console.log('Component is mounted!');
});

onUnmounted(() => {
  console.log('Component is unmounted!');
});

5. provide 和 inject

provide 和 inject 是用于组件间通信的 API，允许父组件提供数据，子组件注入并使用这些数据。

import { provide, inject } from 'vue';

// 父组件
provide('injectedValue', 'This is provided by parent');

// 子组件
const injectedValue = inject('injectedValue');

6. nextTick

nextTick 是一个全局方法，用于在下次 DOM 更新循环结束之后执行延迟回调。在修改了响应式数据之后，通常用于等待 DOM 更新。

import { nextTick } from 'vue';

nextTick(() => {
  console.log('DOM has been updated!');
});

这些方法和概念是 Vue 3 响应式系统的核心部分，它们提供了强大的数据管理能力，使得开发者能够构建高效且易于维护的应用程序。

🎉 往期精彩回顾

主流开发语言和开发环境、程序员如何选择职业赛道？

• 852阅读 · 27点赞 · 9收藏

VS code搭建C/C++运行环境简单易上手

• 2803阅读 · 5点赞 · 8收藏

Vue.2&Vue.3项目引入Element-UI教程&踩坑

• 9284阅读 · 22点赞 · 82收藏

Vue项目引入Echarts可视化图表库教程&踩坑

• 2209阅读 · 3点赞 · 5收藏

VirtualBox虚拟机搭建CentOS系统教程

• 4502阅读 · 4点赞 · 32收藏

VS Code上搭建Vue开发环境

• 10709阅读 · 13点赞 · 66收藏

Color-UI 简介及使用教程

• 5932阅读 · 2点赞 · 13收藏