vue3 onMounted异步函数同步请求async/await实现
作者：CUI_PING
项目需求
在项目中遇到一个问题，就是打开页面时，显示的不正确，在onMounted(挂载完数据) 中初始化来的数据没渲染上， 这是因为，数据重新赋值没在onUpdated（更新完data 数据）之前， 而是在之后执行的， 需要在onMounted钩子函数中增加async/await；
特别注意： 在onMounted中,从API请求到的数据， 赋值给响应式data 数据，建议只赋值一次
代码
//导入使用的API
import { reactive, toRefs, getCurrentInstance,onBeforeMount, onMounted,onBeforeUpdate,onUpdated,onBeforeUnmount, onUnmounted, watch,computed} from "vue"
export default{
components: {xx},
props: {},
setup(props, context){
console.log("*******setup******")
//获取当前实例
const {ctx, proxy} = getCurrentInstance()
// 定义响应式data 数据
const state = reactive({
})
console.log("*******end reactive******")
// 定义方法
const methods = {
async dealData(firstResData){
if(firstResData.status == "finished"){
state.collection_data = firstResData.data
state.colection_id = firstResData.id
await get(api+state.colection_id).then((resData) => {
state.layoutX = resData.x
state.layoutY = resData.y
console.log("state.layoutX"+state.layoutX)
console.log("state.layoutY"+state.layoutY)
})
}
},
// ***********async/await 实现请求同步功能**************
async refreshData(){
await get(api).then(firstResData=>{
console.log("state.curStatus="+firstResData.status)
methods.dealData(firstResData)
}).catch(()=>{
})
},
}
console.log("*******end methods******")
onBeforeMount(()=>{
// dom 挂载前
console.log("*******onBeforeMount******")
})
onMounted(async()=>{
//dom 挂载后
console.log("*******onMounted******")
state.collection_id = proxy.$route.query.id
await methods.init()
})
onBeforeUpdate(()=>{
//对响应式data数据有更新， 更新前
console.log("*******onBeforeUpdate******")
})
onUpdated(()=>{
//对响应式data数据有更新， 更新后
console.log("*******onUpdated******")
})
onBeforeUnmount(()=>{
//销毁页面组件前， 即关闭
console.log("*******onBeforeUnmount******")
})
onUnmounted(()=>{
//销毁后
console.log("*******onUnmounted******")
})
return {
...toRefs(state),
...methods,
}
}打印结果
*******setup******
*******end reactive******
*******end methods******
*******onBeforeMount******
*******onMounted******
*******onBeforeUpdate******
*******onUpdated******
state.curStatus=3
state.layoutX150
state.layoutY280
*******onBeforeUpdate******
##############################以下是子组件中打印的信息，可以不关注
*******setup in MyXgPlayer******
props.layoutX=150
props.layoutY=280
*******onBeforeMount in MyXgPlayer******
*******setup in MyXgPlayer******
props.layoutX=150
props.layoutY=280
*******onBeforeMount in MyXgPlayer******
*******onUpdated******
*******onMounted in MyXgPlayer*******
*******onMounted in MyXgPlayer*******
以上就是vue3 onMounted异步函数同步请求async/await实现的详细内容，更多关于vue3 onMounted async/await的资料请关注脚本之家其它相关文章！