一、前情提要
最近公司的项目逐步由vue2向vue3迁移,自己也在慢慢习惯vue3的写法。在Vue3中定义响应式数据,应该有两种方式,一种是ref包裹,一种是用reactive,一般来说,ref用于定义基本数据类型,reactive用于定义复杂数据类型。然而在实际开发中我却发现,定义数组和对象也用ref居多。
import { ref } from 'vue'
const modalVisiable = ref(false)
const storeList = ref([])
const storeInfo = ref({})
接下来我们来探讨一下,到底什么时候用ref ,什么时候用reactive
二、Ref() 的优势
从官网中可以得到以下信息:
- Ref 可以持有任何类型的值,包括深层嵌套的对象、数组;Ref 会使它的值具有深层响应性。这意味着即使改变嵌套对象或数组时,变化也会被检测到。
- 当 ref 的值是一个对象时,ref() 会在内部调用 reactive()
上面两点翻译过来就是:不管是对象还是数组,通过.value赋值均能够被检测到
import { ref } from 'vue'
// 能被检测到
const a = ref({})
a.value = { count: 0 }
// 能被检测到
const a = ref([])
a.value.push({ count: 0 })
a.value = [] // 直接赋值也能被检测到
三、reactive() 的局限性
- 有限的值类型:只能用于对象类型,不能持有基本数据类型
- 不能替换整个对象: let b = reactive({}); b = {}; 执行这段代码后对象失去原本的响应式
- 对解构操作不友好:将响应式对象解构为本地变量时失去响应式连接
其中第二点,不能直接替换整个对象,我想这是reactive()使用的主要阻力,当你想给对象置空{},或者想给数组置空[],则需要想想办法了。而ref则直接能通过a.value = {}, b.value = []实现并且不会丢失响应式。
这些局限性表明reactive更适用于对象属性存在,但属性值会发生变化的情况:
import { reactive } from 'vue'
const state = reactive(
{
count: 0,
show: false,
arr: []
}
)
state.count = 1
state.arr.push({ a: 1 })
state.arr = []
四、总结
- 对单个数组和对象需要置空操作时,用 Ref 更方便
- 对于嵌套对象或数组,Ref 和 Reactive 均可,根据习惯
- 官方建议使用 ref() 作为声明响应式状态的主要 API
参考文章: