ref，shallowRef，reactive，shallowReactive的区别

一、reactive和shallowReactive

reactive用来创建响应式对象，它接收一个对象/数组参数。代码示例如下，通过点击事件可以修改响应式对象触发视图更新。

// 通过reactive创建数组
const arr = reactive([1, 2, 3]);
const onClickArr = () => arr.push(4);

// 通过reactive创建对象
const obj = reactive({ a: 1 });
const onClickObj = () => obj.a = 2;

shallowReactive创建的响应式对象/数组参数不支持深度监听，也就是只支持第一层数据，比如下面示例想要修改深层数据，数据不会发生改变。

// 通过shallowReactive创建对象
const obj = shallowReactive({ a: 1, b: { c: 2 } });
const onClickObj = () => obj.b.c = 3;

// 通过shallowReactive创建数组
const arr = ref([1,2,3,[4]]);
const onClickArr = () => arr[3].push(5);

二、ref和shallowRef

ref底层的本质还是reactive，系统会自动根据我们给ref传入的值将它转换成reactive，比如ref(123) -> reactive({value:123})，这两者等价的。在js中获取ref的值需要通过value来获取，而在template则不用，因为vue3做过处理，如果通过ref声明的变量，在template中使用可以不用加value。

ref和reactive一样，也是用来实现响应式数据的方法，它接收原始类型数据，原始类型数据共7个，分别是String，Number，Boolean，Symbol，Null，Undefined，BigInt。

// 通过ref创建基本类型的数据
const num = ref(1);
const onClickNum = () => num.value = 2;

如果是用ref创建基本数据类型的数据的话使用ref和shallowRef并无区别。

const num1 = ref(1);
const num2 = shallowRef(1);
const onClickNum1 = () => num1.value = 2; //会更改数据
const onClickNum2 = () => num2.value = 2; //会更改数据

如果想要用ref创建对象的话，就不能用shallowRef了，因为会失效。

// 通过shallowRef创建对象
const origin = shallowRef({ a: 1 });
const onClickOrigin1 = () => origin.value.a = 2; //不会更改数据
const onClickOrigin2 = () => origin.value = 2; //会更改数据