vue3 onMounted异步函数同步请求async/await实现

 更新时间:2023年07月03日 11:05:30   作者:CUI_PING  
这篇文章主要为大家介绍了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中常见循环遍历指令的使用 v-for

    浅析vue中常见循环遍历指令的使用 v-for

    这篇文章主要介绍了vue中常见循环遍历指令的使用 v-for,包括v-for遍历数组,v-for遍历json对象,本文给大家介绍的非常详细,需要的朋友可以参考下
    2018-04-04
  • vue大型项目之分模块运行/打包的实现

    vue大型项目之分模块运行/打包的实现

    这篇文章主要介绍了vue大型项目之分模块运行/打包的实现,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2020-09-09
  • Vue-pdf实现在线预览PDF文件

    Vue-pdf实现在线预览PDF文件

    这篇文章主要为大家详细介绍了Vue-pdf实现在线预览PDF文件,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2021-05-05
  • Vue axios 将传递的json数据转为form data的例子

    Vue axios 将传递的json数据转为form data的例子

    今天小编就为大家分享一篇Vue axios 将传递的json数据转为form data的例子,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2019-10-10
  • Jenkins自动化部署Vue项目的方法实现

    Jenkins自动化部署Vue项目的方法实现

    本文主要介绍了Jenkins自动化部署Vue项目的方法实现,文中通过示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2022-04-04
  • vue如何遍历data所有变量并赋值

    vue如何遍历data所有变量并赋值

    这篇文章主要介绍了vue如何遍历data所有变量并赋值,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2022-04-04
  • vue3中处理不同数据结构JSON的实现

    vue3中处理不同数据结构JSON的实现

    本文主要介绍了vue3中处理不同数据结构JSON的实现,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2023-06-06
  • vue 开发企业微信整合案例分析

    vue 开发企业微信整合案例分析

    这篇文章主要介绍了vue 开发企业微信整合,结合具体案例形式分析了vue.js使用企业微信JSSDK实现手机端程序可以和企业微信进行整合功能的相关操作技巧,需要的朋友可以参考下
    2019-12-12
  • vue router进行路由跳转并携带参数的实例详解(params/query)

    vue router进行路由跳转并携带参数的实例详解(params/query)

    在使用`router.push`进行路由跳转到另一个组件时,可以通过`params`或`query`来传递参数,这篇文章主要介绍了vue router进行路由跳转并携带参数(params/query),需要的朋友可以参考下
    2023-09-09
  • Vue中使用icon的几种常用方法

    Vue中使用icon的几种常用方法

    这篇文章主要给大家介绍了关于Vue中使用icon的几种常用方法,icon图标的使用 Vue是现在前端最流行的框架之一,作为前端开发人员应该要熟练的掌握它,需要的朋友可以参考下
    2023-07-07

最新评论