Ref 与 Reactive：Vue 3 Composition API 之利器
2023-09-11 14:19:00
导语
Vue.js 作为前端开发的明星框架，以其灵活性和易用性深受开发者的喜爱。随着 Vue 3 的发布，Composition API 这一激动人心的新特性横空出世，为 Vue.js 的开发带来了全新的可能性。Composition API 提供了 Ref 和 Reactive 这两种强大的工具，帮助开发人员编写出更加清晰、可读性更强的代码。
Ref 与 Reactive：殊途同归，各有所长
Ref：引用之魅
Ref（全称 Reference）顾名思义，是一种引用类型的变量，它可以存储任何类型的数据，包括基本类型（如字符串、数字、布尔值）、对象、数组，甚至其他 Ref。Ref 的最大特点在于它的可变性，即它的值可以随着时间的推移而改变。这意味着，您可以在组件的不同部分轻松地更新和操作 Ref 的值，而无需过多考虑数据流向。
举个例子，如果您有一个组件需要跟踪用户的输入，那么您可以使用 Ref 来存储用户的输入值。当用户输入时，您只需更新 Ref 的值，而组件的其他部分将自动更新，以反映最新的输入值。
Reactive：响应之灵
Reactive（全称 Reactive Data Structure）是一种响应式的数据结构，它可以自动追踪数据变化，并触发组件的重新渲染。与 Ref 不同，Reactive 只能存储基本类型（字符串、数字、布尔值）和数组，但它可以被嵌套，以实现更加复杂的数据结构。Reactive 的优势在于它的响应性，即当 Reactive 的值发生变化时，它会自动触发组件的重新渲染，确保组件始终保持最新的状态。
以同样的用户输入示例为例，如果您使用 Reactive 来存储用户的输入值，那么当用户输入时，组件将自动重新渲染，以反映最新的输入值。
何时使用 Ref，何时使用 Reactive？
那么，在实际项目中，我们应该何时使用 Ref，何时使用 Reactive 呢？
Ref 的适用场景
- 当您需要存储可变数据时，例如用户的输入值、组件的状态、计时器等。
- 当您需要在组件的不同部分访问和操作数据时。
- 当您需要在组件的子组件中共享数据时。
Reactive 的适用场景
- 当您需要存储基本类型（字符串、数字、布尔值）和数组时。
- 当您需要自动追踪数据变化并触发组件的重新渲染时。
- 当您需要在组件的不同部分使用相同的数据时。
实用技巧，锦上添花
- 使用 template ref ：在模板中使用 ref 属性，可以方便地访问 DOM 元素，从而进行各种操作，如获取元素的大小、位置、内容等。
- 使用 computed 和 watch ：computed 和 watch 可以帮助您更加方便地追踪和响应数据的变化，从而实现更加复杂的逻辑。
- 使用 provide 和 inject ：provide 和 inject 可以帮助您在组件之间共享数据，从而实现更加模块化、可重用的代码。
结语
Ref 和 Reactive 是 Vue 3 Composition API 中的两大重要特性，它们提供了更加灵活、模块化和可重用
