ref和reactive你必须要知道的使用场景和差异

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