面试必问-vue3中ref与这个reactive的区别

ref和reactive是Vue 3中两种不同的响应式数据处理方式。

• ref：ref函数可以将普通的Javascript值转换为一个响应式引用。它返回一个包含.value属性的对象，可以通过读取或修改.value来操作引用的值。当引用的值发生变化时，Vue会自动追踪依赖并更新相关的视图。ref适用于处理单个简单的值，如基本类型或对象。

  示例：

  import { ref } from 'vue';
  
  const count = ref(0);
  
  console.log(count.value); // 0
  
  count.value = 1;
  
  console.log(count.value); // 1
  

• reactive：reactive函数可以将一个普通的Javascript对象转换为具有响应性的代理对象。被代理的对象及其属性都会变成响应式的，当属性值发生变化时，Vue会自动追踪依赖并更新相关的视图。reactive适用于处理复杂的对象或数据结构。

  示例：

  import { reactive } from 'vue';
  
  const person = reactive({
    name: 'Alice',
    age: 25
  });
  
  console.log(person.name); // 'Alice'
  
  person.name = 'Bob';
  
  console.log(person.name); // 'Bob'
  

总结区别：

1. ref是用于处理简单的、独立的值，返回一个包含.value属性的响应式引用。reactive是用于处理复杂的对象或数据结构。

2. 对于访问和修改值，ref需要通过.value属性来进行，而reactive可以直接访问和修改被代理对象的属性。

3. 在模板中使用时，ref需要通过.value来访问引用的值，而reactive不需要。

需要注意的是，由于Vue 3的变化，当在模板或组合式API中使用响应式数据时，对于对象类型的值，通常更推荐使用reactive来创建。对于基本类型的数据，可以继续使用ref。