组合式API：Vue3中Ref和Reactive的抉择

前端

2023-12-27 17:26:33

Vue3中的响应式数据：ref与reactive的对比

在Vue3中，ref和reactive是用于定义响应数据的两个关键组合式API。虽然它们在目的上有一些相似之处，但它们在功能和用法上也存在着一些关键的区别。了解这些区别对于充分利用Vue3的响应式系统至关重要。

ref

ref API用于创建和管理一个可变的JavaScript引用。它可以指向任何类型的对象，包括简单类型（如字符串和数字）、数组和对象。与Vue2中的data选项类似，ref的值可以发生变化，而视图将自动更新。

使用ref的场景：

当需要一个在组件间共享的可变引用时
当需要一个在组件生命周期中持久存在的数据时
当需要一个可以随着时间的推移而改变的可变引用时

示例：

const count = ref(0);
count.value = 1;
console.log(count.value); // 输出：1

reactive

reactive API用于创建和管理一个响应式的JavaScript对象。这个对象可以包含多个属性，并且当任何属性的值发生变化时，视图将自动更新。与ref不同，reactive的对象可以具有嵌套结构，并且可以随时添加或删除属性。

使用reactive的场景：

当需要一个具有多个响应式属性的对象时
当需要一个在组件间容易访问的数据时
当需要一个可以随着时间的推移而改变的响应式对象时

示例：

const state = reactive({
  count: 0,
  user: {
    name: "John Doe",
    age: 30
  }
});
state.count = 1;
state.user.name = "Jane Doe";
console.log(state.count); // 输出：1
console.log(state.user.name); // 输出：Jane Doe

ref与reactive的比较

特性	ref	reactive
数据类型	可变JavaScript引用	响应式JavaScript对象
用法	`ref(initialValue)`	`reactive(initialObject)`
访问方式	`ref.value`	`reactive.property`
更新方式	`ref.value = newValue`	`reactive.property = newValue`
组件生命周期	在组件整个生命周期中存在	在组件销毁时销毁
共享数据	可以通过props或provide/inject在组件之间共享	可以通过props或provide/inject在组件之间共享