xiaohelikesleep · blog

Appearance

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

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

1. ref、toRefs、reactive ​

1. ref ​

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

javascript
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 而不用担心它们被意外地解构。

javascript
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。

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

javascript
import { ref, computed } from 'vue';

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

2. watch ​

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

javascript
import { ref, watch } from 'vue';

const count = ref(0);

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

3. watchEffect ​

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

javascript
import { ref, watchEffect } from 'vue';

const count = ref(0);

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

4. onMounted 和 onUnmounted ​

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

javascript
import { onMounted, onUnmounted } from 'vue';

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

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

5. provide 和 inject ​

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

javascript
import { provide, inject } from 'vue';

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

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

6. nextTick ​

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

javascript
import { nextTick } from 'vue';

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