Vue3.0中常用的组合API有哪些？

（1）ref、toRefs、toRef、isRef

• ref 用于定义响应式变量、快捷DOM访问。
• 基本语法：const a = ref(1) // {value:1}
• 基础使用： 一般用于定义 String、Number、Boolean 这种基于数据类型，外在表现统一使用 .value 访问。
• 补充：ref 还可以访问 DOM对象或者组件实例对象，可做DOM操作。
• toRef、toRefs 用于把一个object的变量，变成响应式的变量。
• 基本语法：const msg = toRef(obj, key) // 把obj[key]变成响应式的
• 基本语法：const { msg } = toRefs(obj) // 把整个obj都变成响应式的
• unref 返回一个变量的值
• 基本语法：const x = unref(x) // 如果x是ref变量则返回x.value，如果x不是ref变量则直接返回x。
• isRef 用于判断一个变量是不是ref响应式变量
• 基本语法：const bol = isRef(x)

function useUpdBoxStyle() {
   
  const el = ref(null)
  const updateStyle = color => {
   
    el.value.style.color = color
  }
  return [el, updateStyle]
}

（2）shallowRef、triggerRef

• shallowRef 用于性能优化，只对对象的第一层进行proxy
• 基本语法：const obj = shallowRef({a:1,b:{c:{d:{e:2}}}})
• triggerRef 用于手动触发那些shallowRef的变量进行更新视图
• 基本语法：triggerRef(obj) // 当obj.value.b.c.d发生变化，triggerRef(obj) 强制更新视图。
• customRef 自定义ref，把ref变量拆成get/set的写法
• 基本语法：customRef((track, trigger) =>({get,set})

function useObj() {
   
  const obj = {
    a: 1, b: {
    c: {
    d: 2 }}}
  const obj1 = ref(obj)
  const obj2 = shallowRef(obj)
  // console.log('obj1', obj1)
  // console.log('obj2', obj2)

  const changeObj = (obj,