vue3 的ref和reactive的区别？

Elena_Lucky_baby2024-12-20 10:48

ref和reactive都是创建响应式数据的方式，它们的数据类型，使用场景以及性能有所不同，如：

1数据类型：

ref：主要用于创建单个变量的响应式引用，无论数据类型是基本数据类型还是引用数据类型，ref都能吧它封装一个响应式实体，它返回的是一个对象，如果访问需要使用value来读取对象中的数据

reactive：主要适用于复杂数据类型，比如数组对象，它返回的是proxy对象，可以直接访问

2使用场景：

ref：需要创建一个响应式的基本数据类型时使用，如简单的计数器或标志位

reactive：需要创建一个响应式的复杂对象或者数组时使用，如用户信息管理或嵌套数据结构

3性能：

ref：对基本数据类型，ref通常具有更高的性能，因为它减少了，proxy的使用，简化了应用系统的恶实现

reactive：对复杂的数据结构reactive通过使用proxy直接操作对象属性，提供了更好的灵活性能和响应式追踪机制

复制代码

import { ref, reactive } from 'vue';

// 使用ref创建响应式基本数据类型
let count = ref(0);
console.log(count.value); // 输出0
count.value++; // 增加计数器

// 使用reactive创建响应式复杂对象
let user = reactive({
  name: 'Alice',
  age: 30,
});
console.log(user.name); // 输出Alice
user.name = 'Bob'; // 修改属性值