vue3 reactive() 和 ref()的区别

在 Vue 3 中，reactive() 和 ref() 都用于创建响应式数据，但它们有以下区别：

1. 数据类型支持
   • reactive() 主要用于处理对象类型（包括普通对象、数组等）的响应式。
   • ref() 可以用于处理基本数据类型（如字符串、数字、布尔值等）以及对象类型。
2. 内部结构和访问方式
   • reactive() 创建的响应式对象，其属性的访问和修改是直接进行的。
   • ref() 创建的响应式数据，在访问时需要通过 .value 来获取和修改实际的值。

例如：

import { reactive, ref } from 'vue';

// reactive
const person = reactive({ name: 'John', age: 30 });
person.age = 31;  // 直接修改属性

// ref
const count = ref(0);
count.value = 1;  // 通过.value 修改值

3. 嵌套对象处理

   • 对于嵌套对象，reactive() 可以自动递归地使嵌套对象的属性也成为响应式的。
   • ref() 中的对象如果有嵌套属性，也会自动递归调用 reactive() 来使其具有响应式，访问时也需使用.value属性来访问

假设我们有一个复杂的数据结构，下方为两个函数的使用示例：

const user = reactive({
  info: {
    address: {
      street: '123 Main St'
    }
  }
});
// 可以直接修改嵌套对象的属性,相应式数据
user.info.address.street = '456 Elm St';

const complexData = ref({
  info: {
    address: {
      street: '123 Main St'
    }
  }
});
// 需要使用.value属性访问,相应式数据
complexData.value.info.address.street = '456 Elm St';

4. 局限性
   • reactive() 不能进行整个对象的替换，会使第一个响应式引用连接丢失

   let state = reactive({ count: 0 }) 
   // 上方的引用 ({ count: 0 }) 将不再被跟踪 
   // (响应式连接丢失) 
   state = reactive({ count: 1 })
   

   • reactive() 对解构支持不够友好

   const state = reactive({ count: 0 }) 
   // 解构时count会从seate.count失去响应式连接
   let { count } = state 
   // 执行自增操作不会影响原始的count值，即state.count
   count++ 
   // 如果把count作为参数给函数使用，函数只是接受了普通的变量而非响应式的
   // 如果需要保留响应式特性，则必须像下面这样使用对象.属性的方法给函数调用
   callSomeFunction(state.count)
   

结论：区别如上，因为reactive()的一些局限性，所以Vue3官方文档更加推荐使用ref()函数来创建响应式变量
参考官方文档：vuejs.org/guide/essen…