Vue3 shallowRef 和 shallowReactive

一、shallowRef

使用shallowRef之前需要进行引入：

import { shallowRef } from 'vue';

使用方法和ref 的使用方法一致，以下是二者的区别： 

1. 如果ref 和 shallowRef 都传入的是普通数据类型的数据，那么他们的效果是一样的，数据都能实现响应式。

2. 如果ref 和 shallowRef 传入的是对象数据类型的数据，那么ref 中的数据能够实现响应式，而shallowRef 中的数据无法实现响应。

因为很简单，如果ref中传入的是对象数据类型的数据，那么就会调用reactive 形成拥有对象响应式的Proxy 对象。

而shallowRef 并不会调用reactive，只是一般的数据。

 

二、shallowReactive

使用shallowReactive之前需要进行引入：

import { shallowReactive } from 'vue';

使用方法和ref 的使用方法一致，以下是二者的区别： 

shallowReactive 没有深度监视，而ref 自带深度监视。

也就是说在下面的代码中，person 和shallowPerson 中的name属性都能有响应式，而person.job.type 拥有响应式，shallowPerson.job.type 没有响应式。

setup() {
  let person = reactive({
    name: "张三",
    job: {
      type: "前端",
    },
  });
  let shallowPerson = shallowReactive({
    name: "张三",
    job: {
      type: "前端",
    },
  });

  return {
    person,
    shallowPerson,
  };
},