ref与reactive的区别

ref 和 reactive 是 Vue 3 的 Composition API 中提供的两个响应式数据声明方法，它们都是 Vue 3 中实现响应式数据的关键手段。然而，它们在使用方式和适用场景上有所不同。

ref

ref 用于处理基本数据类型（如字符串、数字、布尔值等）的响应式数据。当你需要一个响应式的引用时，你可以使用 ref。

使用方式：

import { ref } from 'vue';

const count = ref(0);
console.log(count.value); // 输出 0

count.value++;
console.log(count.value); // 输出 1

注意，通过 ref 创建的响应式数据需要通过 .value 来访问或修改其值。

适用场景：

• 当你的数据是基本数据类型，并且你需要在模板或计算属性中引用它时。
• 在处理表单输入、计数器、布尔标志等简单数据时。

reactive

reactive 用于处理复杂数据类型（如对象、数组等）的响应式数据。它会返回一个响应式的代理对象，你可以直接在这个代理对象上操作数据，而不需要像 ref 那样通过 .value 来访问。

使用方式：

import { reactive } from 'vue';

const state = reactive({
  count: 0,
  name: 'Vue 3'
});

console.log(state.count); // 输出 0
console.log(state.name); // 输出 'Vue 3'

state.count++;
state.name = 'Vue';

适用场景：

• 当你的数据是复杂数据类型，如对象或数组，并且你需要在模板或计算属性中直接引用或修改其属性时。
• 在处理状态管理、列表渲染等复杂逻辑时。

总结

• ref 主要用于处理基本数据类型的响应式数据，需要通过 .value 来访问或修改其值。
• reactive 主要用于处理复杂数据类型的响应式数据，可以直接在返回的代理对象上操作数据。

在实际开发中，你可以根据数据的类型和需求来选择使用 ref 还是 reactive。对于简单的基本数据类型，使用 ref 会更加简洁；而对于复杂的数据结构，使用 reactive 会更加方便和直观。

本文地址：https://www.tides.cn/p_vue-the-difference-of-ref-and-reactive-of-vue3