首页 > 其他分享 >Vue父子组件生命周期触发顺序是怎样的?

Vue父子组件生命周期触发顺序是怎样的?

时间:2022-09-24 09:46:46浏览次数:55  
标签:updated 生命周期 beforemounted beforeDestroy beforeUpdate destroyed Vue 组件

挂载阶段

父beforecreated->父created->父beforemounted->子beforecreated->子created->子beforemounted->子mounted->父mounted

更新阶段

父beforeUpdate -> 子beforeUpdate -> 子updated -> 父updated

销毁阶段

父beforeDestroy -> 子beforeDestroy -> 子destroyed -> 父destroyed

总结:

父组件先执行,然后子组件执行,等子组件执行完成,父组件收尾

标签:updated,生命周期,beforemounted,beforeDestroy,beforeUpdate,destroyed,Vue,组件
From: https://www.cnblogs.com/qianduan-Wu/p/16724951.html

相关文章

  • 说说Vue的keep-alive使用及原理。
    keep-alive是vue.js的一个内置组件,它将不活动的组件保存在内存中,而非只讲将其销毁,提供了include(缓存),exclude(不缓存)两个属性,可以有选择的保存组件语法:<keep-al......
  • VUE v-bind 数据绑定
    动态的绑定一个或多个attribute,也可以是组件的prop。缩写: : 或者 . (当使用 .prop 修饰符)期望: any(带参数)|Object(不带参数)参数: attrOrProp(可选的)......
  • Vue2项目解决-js/css文件无法引用问题
    打包:    在vue.config.js文件中  const{defineConfig}=require('@vue/cli-service')module.exports=defineConfig({  transpileDependencies:t......
  • .NET 文件系统(七)--vue3.0文件系统搭建与配置(router配置)
    不过多介绍node安装与vue-cli安装配置,自行百度1.新建vite项目npminitvite@latest选择vue,选择ts即可生成依赖:npminstall启动项目:npmrundev2.路由(router)配置......
  • Vuex 学习笔记
    组件之间共享数据的方式小范围父向子:v-bind属性绑定简写:子向父:v-on事件绑定简写@兄弟组件之间共享数据:EventBusVuex是实现组件全局状态(数据)管理的一种机制,可......
  • Vue3与Vue2的区别(面试题)
    模板指令1、v-if、v-for优先级区别3.0依然不建议写在一个元素上但是依然可以同时绑定Vue2:当在同一个元素上使用v-if时,将优先v-forVue3:v-if优先,再v-for 2、v-model......
  • Vue组件递归渲染
    父级菜单  数据格式  子组件递归(直接使用name) ......
  • vue页面嵌套iframe页面传值、调用、首次传值获取不到、有缓存数据问题
    在父组件中创建iframe <!--iframe-->   <!-- --><el-dialog:visible.sync="dialogVisible"width="500px"@close="closeDialog"v-if="dialogVi......
  • vue组件命名错误
    Componentname“Home“shouldalwaysbemulti-worde/multi-word-component-names报错的原因:在组件命名的时候未按照ESLint的官方代码规范进行命名,根据ESLint官......
  • vue3路由简单配置
    路由目录各文件内容【router/index】import{createRouter,createWebHashHistory,createWebHistory}from"vue-router";import{scrollBehavior}from"./helpe......