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

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

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

1. ref、toRefs、reactive

1. ref

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

1
2
3
4
5
6
7
8
9
10
11
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 而不用担心它们被意外地解构。

1
2
3
4
5
6
7
8
9
10
11
12
13
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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
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 适用于创建响应式对象,适用于对象和数组,属性可以直接访问。

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

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

在 Vue 3 中,除了 reftoRefsreactive,还有其他几种处理响应式数据的方法和概念:

1. computed

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

1
2
3
4
import { ref, computed } from 'vue';

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

2. watch

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

1
2
3
4
5
6
7
import { ref, watch } from 'vue';

const count = ref(0);

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

3. watchEffect

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

1
2
3
4
5
6
7
import { ref, watchEffect } from 'vue';

const count = ref(0);

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

4. onMountedonUnmounted

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

1
2
3
4
5
6
7
8
9
import { onMounted, onUnmounted } from 'vue';

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

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

5. provideinject

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

1
2
3
4
5
6
7
import { provide, inject } from 'vue';

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

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

6. nextTick

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

1
2
3
4
5
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收藏
打赏
  • 版权声明: 本博客所有文章除特别声明外,著作权归作者所有。转载请注明出处!
  • Copyrights © 2022-2024 何福海
  • 访问人数: | 浏览次数:

请我喝杯奶茶吧~

支付宝
微信