工作中用的比较多的还是vue2和react，最开始接触vue3时一看hooks，组合式函数，功能强大，代码整洁，复用性强，简直完美，但是在新项目实际使用中还是遇到了一些问题（最后也发现了都是我的问题）
关于异步请求结果的问题
问题描述：
用hooks异步来获取一个值，但是在组件中使用这个hook却获取不到值，只有异步会出现这个问题。console.log(mes.value)打印不出来值，{{mes}}却又能显示的出来。
console.log(mes)打印出来的是
RefImpl {**v_isShallow: false, dep: undefined,** v_isRef: true, *rawValue: null, _value: null}dep: undefined**v_isRef: true**v_isShallow: false_rawValue: "test_data"* value: "test_data"value: "test_data"[[Prototype]]: Object
原理：
寻找问题开始是从官网上阅读，在vue3中文官网上【逻辑复用-组合式函数】（cn.vuejs.org/guide/reusa…）部分中举了两个例子，一个是鼠标跟踪器的案例（cn.vuejs.org/guide/reusa…），重点解释功能逻辑的复用方法，一个是异步状态案例（cn.vuejs.org/guide/reusa…），就重点解释时机使用中复用请求的数据的方法。
我就明白我使用的有问题了，也看到其他大神对这个问题的解答，主要因为setup里面只会运行一次，它不像react会更新整个节点，所以你需要用watch或者watcheffect这种去监听你的msg。因为mes是响应式对象，所以它会更新在模版，但不会更新在setup，需要你在setup监听这个值才行
最终写法：
组件中：
import { singleCustomer } from './hooks/singleCustomer'
const { getFutureAppInfo } = singleCustomer()
onMounted(async ()=>{
let res = await getFutureAppInfo()
const { code = 0, records=[] }= res || {};
if (code > 0&&records[0]!=null) {
// 处理数据页面显示逻辑
}
})
hooks中：
import { getAppInfo } from '@/api/customerPanorama'
export const singleCustomer = (): any => {
// 发送请求获取数据
const getFutureAppInfo = async () => {
const res = await getAppInfo(请求参数)
// 比较正经的写法应该是在这里处理数据....
return { res }
}
return {
getFutureAppInfo
}
}
比较正经的写法应该是在这里处理数据，但是业务要求就是同一个接口返回的数据不同地方处理逻辑不同，所以将处理方法写在组件中，请求方法放在hooks中
总结
这也就是开头说发现最后都是我的问题，因为写到最后发现还是对官网的例子没有研究明白，还有对响应式原理在应用的时候理解的不透，而且其实一开始的设计也可以将请求数据放在父组件中进行父传子，就不需要这么费劲了😓
