在 vue3 中的组合式 api 中,针对响应式有了一些扭转,其中响应式 api 中,两个比拟重要的是 ref 和 reactive,然而对于这两个区别以及应用场景,大多数同学都比拟蛊惑,这个文章将给你具体讲述这两个区别以及应用场景
原始类型差别
在理解之前,咱们要晓得 js 中的原始类型有哪些,其中 number, string, boolean, undefined, null
是一些原始根本类型,对于这些值,ref 和 reactive 用法上有啥区别呢?
ref
对于 ref 来说,原始类型和对象都能够进行相应的数据做了响应式解决,比方这种写法是能够的
const ref1 = ref(0); // OK
const ref2 = ref({count: 0}) // OK
ref 能够解决原始类型的值,对于援用类型的值也不在话下,官网文档是这样解释的。如果给 ref 函数传递了一个对象,那么这个对象就会通过 reactive() 这个办法将其转换成具备深层次的响应式对象,也就是外部实质还是调用了 reactive 办法
reactive
reactive 办法是不容许传递原始类型的值的,它并没有和 ref 一样检测到原始类型之后做对应的转换
const reactive1 = reactive(0); // NOT OK
const reactive2 = reactive({count: 0}) // OK
reactive1 这种写法是不会报错的,你在页面也可能将这个值渲染进去,然而你是没有方法扭转它的,也就失去了意义,对于 reactive 只能是对象最次要的起因在于在 vue 外部的响应式的实现,是根据 proxy 实现的,然而 proxy 不适用于根本类型数据
所以 ref 对于根本类型和援用类型都能够,然而 reactive 只实用于援用类型
数据拜访形式不同
ref
对于 ref 来说,无论是原始类型还是对象,拜访数据都须要通过 .value 的模式进行,更新数据的话也是通过 .value 的模式
const ref1 = ref(0);
console.log(ref1.value); // 0
const ref2 = ref({count: 0})
console.log(ref2.value.count); // 0
ref1.value = 1
console.log(ref1.value); // 1
在 vue 的模版语法中,你大可不必带上 .value
<script setup>
import {ref} from 'vue'
const ref1 = ref(0)
</script>
<template>
<div>{{ref1}}</div>
</template>
reactive
因为是 proxy 代理的对象数据,你能够间接获取到数据,不用增加 .value
const reactive1 = reactive({num: 0});
console.log(reactive1.num); // 0
更新和拜访数据都可间接拜访
TS 类型
ref
ref 有一个非凡的属性 .value,所以对于它的类型,你能够间接从 vue 中导入,具体的写法这样
import {ref, Ref} from 'vue'
const ref1: Ref<number> = ref(0);
相熟 ts 的话这个不生疏,不赘述了
reactive
相对来说,reactive 的类型就比较简单了
import {reactive} from 'vue'
const reactive1: {num: number} = reactive({num: 0});
传给 reactive 函数的对象类型是什么,就给返回值对应的什么类型即可
须要留神的一点是,如果这个对象当中蕴含 ref,这个时候 ref 是不须要增加对应的类型的,vue 会主动将其解包
import {reactive} from 'vue'
const reactive1: {num: number} = reactive({num: ref(0)});
这种写法是没有问题的
监听形式区别
应用 watch 监听 ref 和 reactive 的形式是不同的
ref
你能够间接监听 ref 的数据,相似这样,当 ref 的数据发生变化的时候,就会执行 watch 函数对应的回调
const ref1 = ref(0)
watch(ref1, () => {console.log('changed!')
})
当然这里只是原始类型数据,后面提到过,ref 是能够传递对象的,如果是对象的话,还可能监听到么?
const ref1 = ref({num: 1})
watch(ref1, () => {console.log('changed!')
})
// ref1.value.num = 1
当我执行 ref1.value.num = 1
时,会打印 changed! 么?
答案是不会的,因为 watch 并没有对 ref1 进行深度监听,然而要留神的是,这个时候 dom 是可能更新的,后面提到 ref 会将其转换成 reactive 的模式
要想深刻监听,只须要加一个对应的参数即可
const ref1 = ref({num: 1})
watch(ref1, () => {console.log('changed!')
}, {deep: true})
有了上述的根底,那对于 reactive 来说就简略了
reactive
reactive 因为实质是对象,所以在 watch 的时候本能的会想增加 deep 属性,然而 vue 对其做了优化,应用 watch 监听 reactive 的时候能够不增加 deep 属性,也可能对其做深度监听
const reactive1 = reactive({num: 1})
watch(reactive1, () => {console.log('changed!')
})
// reactive1.num = 1
下面的写法是可能实现咱们想要的成果的
总结
那到底什么时候应用 ref,什么场景下应用 reactive 呢?
尽管没有严格的规定,但在某些状况下,应用一些特定的内容才是最佳实际,当然你也可能 ref 一把梭哈
- 如果你须要一个响应式原始值,那么应用 ref() 是正确的抉择,要留神是原始值
- 如果你须要一个响应式对象,层级不深,那么应用 ref 也能够
- 如果您须要一个响应式可变对象,并且对象层级较深,须要深度跟踪,那么应用 reactive
你能够把 reactive 看成 ref 的子集,ref 能够解决所有懊恼,如果你有什么认识或者见解,欢送留言,也欢送关注公众号【FE 情报局】
参考资料: https://dmitripavlutin.com/re…