Vue3 Reactive和Ref

Vue3: 如何在 ref() 与 reactive() 之间做正确选择？ - 掘金 (juejin.cn)

• reactive和ref 区别

  在 Vue 3 中，ref 和 reactive 是用于数据响应式的两个函数。

  ref 函数用于创建一个响应式的引用，它接收一个参数作为初始值，并返回一个包装了该值的响应式对象。ref 可以用于包装基本类型的值或对象。

  import { ref } from 'vue';
  
  const count = ref(0); // 创建一个响应式引用
  console.log(count.value); // 读取响应式引用的值
  count.value += 1; // 修改响应式引用的值
  
  

  在上面的示例中，count 是一个响应式引用，可以通过 count.value 来访问和修改其值。当修改 count.value 时，Vue 会自动进行依赖追踪和重新渲染。

  reactive 函数用于创建一个响应式的对象，它接收一个普通对象作为参数，并返回一个包装了该对象的响应式代理对象。reactive 可以用于包装复杂的对象或嵌套结构。

  import { reactive } from 'vue';
  
  const state = reactive({
    count: 0,
    message: 'Hello',
  });
  console.log(state.count); // 读取响应式对象的属性
  state.count += 1; // 修改响应式对象的属性
  
  

  在上面的示例中，state 是一个响应式对象，可以直接访问和修改其属性。当修改 state 的属性时，Vue 会自动进行依赖追踪和重新渲染。

  需要注意的是，对于 ref 创建的响应式引用，访问其值时需要通过 .value 属性，而对于 reactive 创建的响应式对象，可以直接访问其属性，无需使用 .value。

• 注意：ref可创建响应式的各种类型包括对象 —— reactive只能创建响应式的对象

  在大多数情况下，使用 ref 和 reactive 可以满足大部分的数据响应式需求。但在某些特定情况下，例如需要对数组进行响应式处理，可以使用 reactive 结合 toRefs 或 readonly 函数来实现更细粒度的控制。