Vue3编写

单组件中的编写

在编写一个组件时可以将组件使用的变量统一放在一个reactive对象中来管理，另外如果解构此reactive对象中的某个属性时需要调用toRefs来保持属性的响应性，具体看如下代码

<script setup lang='ts'>
let data = reactive({
  name: '',
  age: '',
  sex: '',
  sexOpt: []
})
// 从data解构出来的数据会失去响应性需要使用toRefs重新变成响应式数据
let { sex} = toRefs(data)
console.log('org_id-----', isRef(sex))
</script>

封装异步组合式函数

“组合式函数”(Composables) 是一个利用 Vue 的组合式 API 来封装和复用有状态逻辑的函数。

async function callSysCode(_key: 'code'|'code_cat'|'code_ext'|'sub_item') {
  const data = ref([''])
  const res = await sysCodeApi(param)
  const temp = formatObjToArr(res.codeinfos.code_info)
  data.value = temp.length > 0 ? formatSysCodeRes(temp, _key) : []
  return data
}
export function useStatusOpt() {
  return new Promise((resolve, reject) => {
    param.xxx = "2"
    const data = callSysCode('code') // 调用接口获取数据
    resolve(data)
  })
}
// 在.vue文件中使用
useStatusOpt().then(res => {
  data.xxx= res.value
})