什么是 ref 和 reactive
在 Vue3 中，ref 和 reactive 是两个用于创建响应式数据的函数。它们是 Vue3 的核心功能之一，可以帮助开发者创建和管理响应式数据。
ref
ref 是一个用于创建一个响应式引用对象的函数。它接受一个内部值并返回一个响应式的且可变的引用对象（reference object）。这个引用对象具有一个指向内部值的单一属性 .value。
import { ref } from 'vue'
const count = ref(0)
console.log(count.value) // 输出: 0
count.value++
console.log(count.value) // 输出: 1ref 可以用来包裹任何类型的值，包括基本类型（如数字、字符串）和复杂类型（如对象、数组）。
reactive
reactive 是一个用于创建一个响应式对象的函数。它接受一个普通对象作为参数，并返回一个响应式的代理对象，该代理对象可以跟踪其依赖项的变化。
-- -------------------- ---- ------- ------ - -------- - ---- ----- ----- ----- - ---------- ------ - -- ------------------------ -- --- - ------------- ------------------------ -- --- -
reactive 主要用于处理对象或数组类型的数据，因为它会递归地遍历所有属性并为它们创建响应式代理。
ref 与 reactive 的区别
虽然 ref 和 reactive 都可以用来创建响应式数据，但它们之间存在一些关键的区别：
- 类型：
ref可以包裹任何类型的值，而reactive只能包裹对象或数组。 - 访问方式：
ref需要通过.value访问其内部值，而reactive对象可以直接通过属性名访问。 - 性能：由于
reactive不需要通过.value来访问，所以在模板中使用时性能更好。然而，在 JavaScript 代码中使用时，两者性能差异不大。 - 嵌套响应性：当一个对象的属性被
ref包裹时，其内部值的变化不会触发外部ref的重新渲染。而reactive对象则可以递归地追踪所有属性的变化。
如何选择使用 ref 还是 reactive
选择使用 ref 还是 reactive 取决于你的具体需求：
- 如果你需要创建一个简单的响应式变量，例如计数器或布尔值，那么使用
ref是合适的。 - 如果你需要创建一个复杂的响应式对象，例如包含多个属性的对象或数组，那么使用
reactive更合适。 - 在某些情况下，你可能需要结合使用
ref和reactive。例如，你可能有一个reactive对象，其中某个属性是一个需要单独操作的ref。
ref 和 reactive 在模板中的使用
在 Vue3 的模板中，你可以直接使用 reactive 对象的属性，而无需通过 .value 来访问 ref 的值。Vue3 会自动处理这些细节。
-- -------------------- ---- -------
----------
-----
--------- -- ----------- ------
------- -------------------------------------
------
-----------
--------
------ - -------- - ---- -----
------ ------- -
------- -
----- ----- - ----------
------ -
--
-------- ----------- -
-------------
-
------ -
------
---------
-
-
-
---------在这个例子中，state.count 直接在模板中使用，Vue3 会自动追踪其变化并重新渲染视图。
总结
ref 和 reactive 是 Vue3 中用于创建响应式数据的核心工具。理解它们之间的区别以及如何在不同的场景下使用它们，对于构建高效且易于维护的 Vue3 应用至关重要。希望这篇教程能够帮助你更好地理解和使用 ref 和 reactive。