vue 中 ref 与 reactive区别和使用场景

---

前言

ref和reactive都是Vue.js中用于响应式数据处理的工具函数。

ref是Vue.js 3中引入的新功能，用于创建响应式的引用。它返回一个对象，该对象的属性可以响应数据的变化。使用ref创建的引用可以作为函数参数传递，并且可以被解构。

---

一、ref

1、基本用法：

ref 主要用于创建对单个数据的响应式引用，通常是基本数据类型。

import { ref } from 'vue';

const count = ref(0);

2、获取和修改值：

使用 .value 属性来获取值。

console.log(count.value); // 获取值

直接修改 ref 的 .value 属性来更新值。

count.value++;

3、特性和限制：

• ref 可以包装任何值，包括基本类型和对象。
• 适用于单一的、简单的值。
• .value 的使用方式在代码中显得很明显

二、reactive

1、基本用法：

reactive 用于创建一个包装对象的响应式代理。

import { reactive } from 'vue';

const state = reactive({ count: 0 });

2、获取和修改值：

直接访问和修改对象的属性。

console.log(state.count); // 获取值

直接修改 ref 的 .value 属性来更新值。

state.count++;

3、特性和限制：

• reactive 可以包装对象，使对象的所有属性都变得响应式。
• 适用于复杂的、有多个属性的对象。
• 修改对象的属性时，不需要额外的.value。

4、嵌套响应式：

reactive 也会使嵌套的对象和数组变得响应式

const nestedState = reactive({ data: { count: 0 } });
console.log(nestedState.data.count); // 获取值
nestedState.data.count++;

总结

对于基本类型，ref 通常更直接，而对于对象，reactive 更适合。
总体而言，ref 主要用于单一的、简单的值，而 reactive 适用于复杂的、有嵌套结构的对象。在实际项目中，你可能会同时使用它们，根据不同的场景选择合适的响应式 API。