（两个函数的应用场景：性能优化）
shallowReactive: 只处理对象最外层属性的响应式（浅响应式）
shallowRef：只处理基本数据类型的响应式，不进行对象的响应式处理

什么时候使用？
如果有一个对象数据，结构比较深，但变化时只是外层属性变化 ==> shallowReactive 
如果有一个对象数据，后续功能不会修改该对象中的属性，而是生成新的对象来替代 ==> shallowRef

具体案例代码如下：

<template>
  <div>{{ x }}</div>
  <div>{{ name }}</div>
  <button @click="name += '~'">按钮name</button>
  <div>{{ job.j1.salary }}</div>
  <button @click="job.j1.salary++">按钮salary</button>
</template>

<script>
import { reactive, shallowRef, toRefs } from 'vue'

export default {
  name: 'DemoComponent',
  setup() {
    // 与reactive相比，只该函数只考虑第一层响应式数据
    // let person = shallowReactive({
    //   name: '张三',
    //   job: {
    //     j1: {
    //       salary: 20
    //     }
    //   }
    // })

    let person = reactive({
      name: '张三',
      job: {
        j1: {
          salary: 20
        }
      }
    })

    /**
     *  ref与shallowRef的区别
     *  1. 如果是基本数据类型没区别
     *  2. 如果是引用数据类型，toRef不处理对象类型的响应式数据，ref会应用reactive处理成Proxy对象而成为响应式数据
     *  3. 
     */
    // 不对对象进行响应式处理，不能这样使用：shallowRef({a: 1})
    // 用法：
    let x = shallowRef('01');
    return {
      ...toRefs(person),
      x
    }
  }
}
</script>