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 - 掘金

你可能感兴趣的:(前端,javascript,vue)