Vue 3.0 ref 和reactive 区别

ref的使用

ref 的作用就是将一个原始数据类型（primitive data type）转换成一个带有响应式特性(reactivity)的数据类型，原始数据类型共有7个，分别是：

• String

• Number

• Boolean

• Null

• Undefined

• Symbol : 它用来生成一个独一无二的值，它Symbol数据常用来给对象属性赋值，让对象属性具备唯一性，不容易被覆盖。

• BigInt : 解决精度缺失的问题,提供了一种方法来表示大于2^53-1的整数。BigInt可以表示任意大的整数

相比于Vue2，用ref的好处就是传值时可以不用再写this

reactive的使用

Vue3提供了一个方法：reactive （等价于Vue2中的Vue.observable() ）来赋予对象(Object) 响应式的特性，那么我们可以将上述代码用对象的形式改写为：

toRefs的作用 省去data

总结

ref 和 reactive 一个针对原始数据类型，而另一个用于对象，这两个API都是为了给JavaScript普通的数据类型赋予响应式特性(reactivity)。

使用 ref 还是 reactive 可以选择这样的准则

第一，就像刚才的原生 javascript 的代码一样，像你平常写普通的 js 代码选择原始类型和对象类型一样来选择是使用 ref 还是 reactive。
第二，所有场景都使用 reactive，但是要记得使用 toRefs 保证 reactive 对象属性保持响应性。