首页 > 其他分享 >vue中created mounted 与 异步任务

vue中created mounted 与 异步任务

时间:2023-02-20 14:01:46浏览次数:32  
标签:异步 vue created 放在 组件 mounted

两个生命周期

  • created:data属性,methods属性,watch监听等都初始化好了,也就是可以使用了。

  • mounted:已经把内存中编译好的模板替换到页面中,也就是视图层已渲染成最新的,vue 实例完全创建完毕。可以操作DOM。理论上内部的子组件也执行完了mounted。

异步任务与它两的关系

vue会先将created和mounted里的同步代码先执行完,才会开启下一轮的事件循环去执行这俩钩子里异步请求的方法。

关于异步任务放在那个周期

如果是单单的一个父级组件,放哪里都无所谓。
但是如果涉及到了要控制子父组件先后显示正确内容的时候,就可以考虑下父组件的请求要放在哪个钩子里了。想要子组件先拿到数据渲染就放在mounted中,想要父组件先拿到数据就放在created中。

标签:异步,vue,created,放在,组件,mounted
From: https://www.cnblogs.com/coderz1/p/17137117.html

相关文章

  • vue管理系统项目
    项目来源:https://github.com/renrenio/renren-fast-vue/wiki/Getting-started 解决npm安装windows-build-tools时卡在SuccessfullyinstalledPython  遇到的问题:n......
  • typescript+vue3使用vue-ls
    npmivue-ls新建storage.tsimportStoragefrom'vue-ls';constoptions={namespace:'vuejs__',//keyprefixname:'ls',//namevariableVue.[ls]ort......
  • 基于Vue3+TS的Monorepo前端项目架构设计与实现
    写在前面你好,我是前端程序员鼓励师岩家兴!去年在另一个项目https://juejin.cn/post/7121736546000044046中,我向读者朋友们介绍了结合npm包管理工具yarn作vue3项目的monorep......
  • Vue3集成axios分环境调用
    版本node16.18.0Vue3配置基础环境安装axiosnpminstallaxios编写dev与prod环境文件devNODE_ENV='development'prodNODE_ENV='production'动......
  • Vue3根据菜单动态生成路由
    前言学无止境,无止境学。大家好,我是张大鹏,之前在抖音有5万多粉丝,不过现在不拍视频,专心写公众号了。笔者目前是高级Python工程师,之前是全栈工程师,主要擅长Golang和Python开......
  • Vue3开箱即用中后台管理资源推荐
    Vue3-admin-element-template基于Vue3、Vite2、Element-Plus、Vue-i18n、Vue-router4.x、Vuex4.x、Echarts5等最新技术开发的中后台管理模板官方文档:文档地址Gin-vue-a......
  • vue中使用vis.js制作流程图
    效果安装vis.jsnpmivis.js--save中文文档:https://ame.cool/pages/a7d858/#network-关系图示例:https://visjs.github.io/vis-network/examples/在vue2中使用impor......
  • vue + cesium 洪水淹没分析完整示例_向着太阳往前冲的博客
    目录一、洪水淹没分析效果二、部分核心代码1、绘制多边形范围2、处理多边形区域的最大和最小高程三、JS完整代码一、洪水淹没分析效果二、部分核心代码1、绘制多......
  • vue——使用$router.push跳转无效
    我的情况:登录组件A,点击登录后,跳转首页无效,在全局路由守卫router.beforeEach中打印,也没有跳转信息。原因:登录组件A中,有个beforeRouteLeave生命周期函数,没有写next()回调......
  • Vue的六种基本通信方式
    1props父组件Father子组件Son//父组件给子组件传递参数<Sonname="何世蟒"sex="男":age="22"/>//子组件接收参数//方式一props:['name','sex','age']//方式二限......