使用customRef自定义ref，解决setup中处理异步问题。

setup中不允许使用async、await使用customRef可以让请求到的数据自动获取响应式状态。

<template>
  <div>{{ num }}</div>
  <button @click="change">change</button>
</template>
 
<script>
/* customRef用于自定义ref，setup不允许使用async和await */
import { customRef } from 'vue'
function useMyRef(value) {
  return customRef((track, trigger) => {
    /* 
      在此处进行请求，并将请求的数据赋值给value，请求到的数据自动获取响应式状态。
      需要注意的是不要将请求代码放在get内，否则将会死循环（渲染数据->调用get->发送请求->赋值请求到的数据并保存->更新界面->调用get） 
    */
    //  this.$axios...
    return {
      get() {
        track() //此数据需要被追踪
        console.log('get', value)
        return value
      },
      set(newValue) {
        console.log('set', newValue)
        value = newValue
        trigger() //更新视图
      },
    }
  })
}
export default {
  name: 'App',
  setup() {
    let num = useMyRef(18)
    function change() {
      num.value++
    }
    return {
      num,
      change,
    }
  },
}
</script>