Vue3实战笔记（49）—Vue 3响应式魔法：ref vs reactive深入对决

文章目录

• 前言
• 一、 ref 和 reactive主要差异
• 总结

  ---

  前言

  Vue 3 中的 ref 和 reactive 都是用于创建响应式数据的工具，但它们之间存在一些重要的区别。今天聊聊它们之间的主要差异：

  
  （图片来源网络，侵删）

  ---

  一、 ref 和 reactive主要差异

  数据类型：

  ref 主要用于处理基本数据类型（如 string、number、boolean 等）的响应式数据。当你使用 ref 创建一个响应式引用时，它返回的是一个对象，该对象具有一个指向内部值的 value 属性。

  reactive 则用于处理复杂数据类型（如对象、数组等）的响应式数据。它直接返回一个响应式代理对象，你可以直接访问和修改其属性。

  使用方式：

  对于 ref 创建的响应式数据，你需要通过 .value 来访问和修改其值。例如：const count = ref(0); console.log(count.value); count.value++;

  对于 reactive 创建的响应式数据，你可以直接访问和修改其属性。例如：const state = reactive({ count: 0 }); console.log(state.count); state.count++;

  模板中的使用：

  在 Vue 3 的模板中，当你使用 ref 创建的响应式数据时，你仍然需要通过 .value 来访问其值。但是，如果你是在 setup 函数中返回的响应式引用，Vue 会自动解包它，因此在模板中你不需要使用 .value。

  对于 reactive 创建的响应式数据，你可以在模板中直接访问其属性，无需任何额外操作。

  解构问题：

  当从 reactive 对象中解构出属性时，这些属性将失去其响应性。这是因为解构操作返回的是原始值的副本，而不是响应式代理。

  为了保持响应性，你可以使用 toRefs 函数来解构 reactive 对象。这将返回一个普通的对象，其属性是响应式引用，因此你可以在模板中直接访问它们而无需使用 .value。

  返回值：

  ref 返回一个对象，该对象具有一个指向内部值的 value 属性。

  reactive 返回一个响应式代理对象，你可以直接操作其属性。

  ---

  总结

  总的来说，ref 和 reactive 都是Vue 3中强大的响应式API，选择使用哪一个取决于具体的使用场景和性能考虑。对于基本数据类型或需要替换对象的场景，ref 是合适的选择；而对于需要创建一个响应式状态容器的对象，reactive 是更好的选择。

  轻挥一袖桃花雨，醉卧云水笑春阳。