Vue3中ref和reactive怎么选?

一、前情提要

最近公司的项目逐步由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() 的优势

从官网中可以得到以下信息：

1. Ref 可以持有任何类型的值，包括深层嵌套的对象、数组；Ref 会使它的值具有深层响应性。这意味着即使改变嵌套对象或数组时，变化也会被检测到。
2. 当 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() 的局限性

1. 有限的值类型：只能用于对象类型，不能持有基本数据类型
2. 不能替换整个对象： let b = reactive({}); b = {}; 执行这段代码后对象失去原本的响应式
3. 对解构操作不友好：将响应式对象解构为本地变量时失去响应式连接

其中第二点，不能直接替换整个对象，我想这是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

参考文章：

响应式 API：核心 | Vue.js

Vue3中观察ref定义的数组的用法大全 - 掘金

Vue 3中数组响应式用ref还是reactive - 掘金