vue3中toRef和toRefs，shallowRef和shallowReactive

toRef：创建一个ref对象，其value值指向对象的某个属性

语法：

const name = toRef(person,'name')

toRefs：作用同toRef，可以同时创建多个ref对象

应用：要将响应式对象中的某个属性单独给外部使用时

使用：

1.在页面中引入

import {reactive, ref, toRef,toRefs} from 'vue'

2.在setup里使用，也可以在return里面使用

setup(){
    let sum = ref(0)
    let msg = ref('hello boys')
    let person = reactive({
      name:'章三',
      age:18,
      job:{
        j1:{
          salary:20
        }
      }
    })
    return {
      test,
      sum,
      msg,
      person,
      name:toRef(person,'name'),
      //展开person对象，在页面里使用不再写person.xx,可以直接写xx
      ...toRefs(person)
    }

  }    

shallowRef和shallowReactive

shallowRef：只处理基本数据类型的响应式，不处理对象类型的响应式

shallowReactive：只处理最外层的属性的响应式，如上面的person.job.j1就不是响应式数据，person.name还是响应式