vue3 onMounted异步函数同步请求async/await实现
项目需求
在项目中遇到一个问题,就是打开页面时,显示的不正确,在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的资料请关注脚本之家其它相关文章!
相关文章
Vue使用Antd中a-table实现表格数据列合并展示示例代码
文章介绍了如何在Vue中使用Ant Design的a-table组件实现表格数据列合并展示,通过处理函数对源码数据进行操作,处理相同数据时合并列单元格2024-11-11antd Form组件方法getFieldsValue获取自定义组件的值操作
这篇文章主要介绍了antd Form组件方法getFieldsValue获取自定义组件的值操作,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧2020-10-10
最新评论