在 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 &#