Vue 子组件和父组件执行顺序

于 2024-01-18 20:20:56 发布
阅读量540 收藏 9
点赞数 10
文章标签： vue.js javascript 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/L197151_666/article/details/135683227
版权
本文详细解释了Vue中子组件和父组件在创建、渲染、更新和销毁过程中的执行顺序，强调了始终遵循父组件先于子组件的原则。
摘要由CSDN通过智能技术生成

文章目录

Vue 子组件和父组件执行顺序

组件的调用顺序、销毁操作 都是先父后子,渲染完成的顺序是先子后父。

加载渲染过程：
父组件 beforeCreate
父组件 created
父组件 beforeMount
子组件 beforeCreate
子组件 created
子组件 beforeMount
子组件 mounted
父组件 mounted
更新过程：

父组件 beforeUpdate
子组件 beforeUpdate
子组件 updated
父组件 updated
销毁过程：

父组件 beforeDestroy
子组件 beforeDestroy
子组件 destroyed
父组件 destoryed

8个生命期周期
简单记法父3—子4–父2–子2–父2–子2-父1

任朝一十六
关注
  • 10
    点赞
  • 踩
  • 9
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
Vue 的组件加载顺序和渲染顺序
小草莓的博客
09-23 2213
综上所述，Vue 中组件的加载和渲染顺序是先加载父组件，再递归地加载子组件，然后按照深度优先遍历的方式渲染子组件，再依次向上渲染父组件。
vue 父子组件生命周期执行顺序
热门推荐
m0_62012366的博客
04-09 1万+
挂载阶段 执行顺序为： 父beforeCreate -> 父created -> 父beforeMount -> 子beforeCreate -> 子created -> 子beforeMount -> 子mounted -> 父mounted 更新阶段 执行顺序为： 父beforeUpdate -> 子beforeUpdate -> 子updated -> 父updated 销毁阶段 执行顺序为： 父beforeDestroy -&gt
【vue】生命周期（包含父子组件）
前端学习博客
04-30 3321
【vue】生命周期（包含父子组件） 文章目录【vue】生命周期（包含父子组件）一、vue生命周期方法二、keep-alive 中的生命周期三、Vue 子组件和父组件执行顺序四、created和mounted的区别五、异步请求在哪一步发起？六、在什么阶段才能访问操作DOM？ 一、vue生命周期方法 生命周期就是 vue 从开始创建到销毁的过程，分为四大步（创建，挂载， 更新，销毁），每一步又分为两小步，比如：beforCreate和created,beforeMount和mounted,beforeUpda
vue组件及页面的生命周期
Sky_msk的博客
11-02 533
生命周期：父组件嵌套子组件的生命周期执行顺序 因为vue在解析时是逐行解析，最外层标签没有遇到闭合标签时是处于一个DOM没有完成加载的状态，所以还不能触发父组件的mounted，子组件包含于父组件中，优先完成DOM加载所以子组件的mounted会优先触发 组件深入 缓存组件生命周期触发的顺序 // 没有缓存，动态组件的实现 <component :is="currentCpn" /> // 有缓存，缓存组件的实现 <div id="app"> <keep-aliv
Vue父子组件生命周期执行顺序是什么？
qq_43648865的博客
02-28 5362
在父组件的created中的请求返回数据后，才会执行子组件的created，mounted。子组件先挂载，然后父组件挂载，即“父beforeCreate-> 父create -> 子beforeCreate-> 子created -> 子mounted -> 父mounted”。所以组件数据回显的时候，在父组件mounted中获取api的数据，子组件的mounted是拿不到的。子组件先挂载，然后父组件挂载。注意：在父组件传递接口的数据给子组件时，一定要在子组件标签上加上v-if="传递的接口数据"
父子组件生命周期的执行顺序
m0_74913905的博客
05-30 2113
关于生命周期，相信我们已经非常熟悉了，但是在书写项目时，如果生命周期出现在父子组件时，那么它的执行顺序又是怎么样的呢？以下分为三部分，加载渲染阶段——更新阶段——销毁阶段，我们来一一介绍。
Vue组件加载顺序
一蓑烟雨97的博客
06-20 3779
Vue组件加载顺序
vue 父组件和子组件生命周期执行顺序
weixin_45272820的博客
09-24 2812
Vue 的父组件和子组件生命周期执行顺序可以理解为以下 4 点： 加载渲染过程 父 beforeCreate -> 父 created -> 父 beforeMount -> 子 beforeCreate -> 子 created -> 子 beforeMount -> 子 mounted -> 父 mounted 子组件更新过程 父 beforeUpdate -> 子 beforeUpdate -> 子 updated -> 父 updated
vue3 项目的父子组件挂载顺序调整
wjyxiaocainiao的博客
05-19 788
但是，子组件在挂载的时候就要用到父组件提供的数据，这样就产生了问题，和正常的生命周期不符合，但是又必须要这么做。（其实这里也可以在子组件再请求一遍数据的，但是不能这么干，这么干会被自己的操作笑死），所以只能改变这个生命周期的执行顺序了。// 输出 'Hi' };在父组件中把数据通过provied 方法向下传递，然后，在子组件写一个async await 的延迟函数，然后再执行方法，场景：父组件和子组件在页面展示内容，按照正常的生命周期顺序是 =》父组件创建=》子组件创建=》子组件挂载=》父组件挂载。
vue父子组件创建的顺序问题，Mounted和Created的区别
MsimonBlowSnow的博客
12-01 1516
父子组件创建的顺序问题 1.组件创建的顺序 父组件先执行，执行到父组件执行到beforeMount之后,然后在去执行子组件的生命周期，beforeMount 和Mount ，执行完成了在执行父组件的Mount。 例如: 综上述说:如果父组件要获取数据，并使用props传入子组件中，将数据渲染的话，需要将数据的请求放在父组件的created生命周期中发起请求。 ...
vue组件封装指南
seimeii的博客
10-10 8964
vue组件封装指南
vue生命周期父子组件的渲染顺序
最新发布
weixin_54063136的博客
01-12 604
生命周期父子组件的渲染顺序
vue 子父组件周期顺序_vue中的父组件及子组件生命周期的执行顺序
weixin_39767645的博客
12-22 771
一、没有任何任何显示与隐藏限制条件的情况下:1.运行的顺序依次是:父组件created→父组件beforeMounted→子组件created→子组件beforeMounted→子组件mounted→父组件mounted;二、当用v-show来控制子组件显示与隐藏的时候:1.当用v-show='show',当show的默认值为true,执行顺序同上;2.当用v-if='show',当show的...
【vue】父子组件之间生命周期的执行顺序
weixin_44761091的博客
05-06 670
调用顺序都是先父后子, 渲染完成的顺序是先子后父。 销毁操作是先父后子， 销毁完成的顺序是先子后父。 组件的生命周期： 加载渲染过程 子组件在父组件的beforeMount和Mounted之间渲染 父breforCreate -> 父created -> 父beforeMounte -> 子breforCreate -> 子created -> 子beforeMounte -> 子mounted ->父mounted 子组件的更新过程 父beforeUpd.
vue3生命周期：父组件与子组件谁先挂在的问题
m0_57547754的博客
01-03 890
3.于是来到App.vue里面去解析这个组件，发现App里用到其他子组件，这时vue的机制会找到子组件，解析子组件里所有的东西，等到将最后一个子组件解析完了（该调用的钩子函数都调完了），App才会挂载。2.这时候main.ts开始工作，main.ts一工作就发现要把App塞到页面上去，1.入口是index.html,发现它里面引入了main.ts,
Vue父子组件和父兄子组件生命周期顺序
RistonTea的博客
05-01 1511
Vue父子组件和父兄子组件生命周期顺序
Vue父组件方法和子组件方法执行优先顺序
hikktn的博客
12-27 5692
vue父组件调用子组件方法时，当方法中用到父组件传入的数据，在调用方法之前修改数据，调用子组件方法时数据还是原来的数据，下一次调用时才会变成上一次修改的数据。
vue-父子组件生命周期的执行顺序
qq_71214810的博客
07-31 2235
父子组件生命周期顺序？
Vue 父子组件钩子的执行顺序是什么
小草莓的博客
10-16 475
在 keep-alive 组件中，子组件的 mounted 钩子只会在组件被首次渲染时执行，当组件被缓存并再次激活时，子组件的 mounted 钩子不会再次执行，而是执行 activated 钩子。父组件 beforeDestroy 钩子 => 子组件 beforeDestroy 钩子 => 子组件 destroyed 钩子 => 父组件 destroyed 钩子。父组件 beforeDestroy 钩子 => 子组件 beforeDestroy 钩子 =>
Vue2中 子组件和父组件执行顺序
09-28
在Vue2中，子组件和父组件的执行顺序如下： 1. 父组件的beforeCreate钩子函数会先于子组件的beforeCreate钩子函数执行。 2. 然后，子组件的created钩子函数会先于父组件的created钩子函数执行。 3. 接下来，父组件的beforeMount钩子函数会先于子组件的beforeMount钩子函数执行。 4. 子组件的mounted钩子函数会先于父组件的mounted钩子函数执行。 5. 当父组件的数据更新时，会触发父组件的beforeUpdate钩子函数，然后再触发子组件的beforeUpdate钩子函数。 6. 更新完成后，子组件的updated钩子函数会先于父组件的updated钩子函数执行。 7. 最后，当父组件被销毁时，会触发父组件的beforeDestroy钩子函数，然后再触发子组件的beforeDestroy钩子函数。 8. 子组件的destroyed钩子函数会先于父组件的destroyed钩子函数执行。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值