【Vue】父子组件嵌套下各生命周期的执行顺序

最新推荐文章于 2024-03-12 17:45:28 发布
最新推荐文章于 2024-03-12 17:45:28 发布
阅读量724 收藏 8
点赞数 7
分类专栏： Vue 全家桶 文章标签： vue.js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_45677671/article/details/136643398
版权

文章目录

挂载阶段

父子组件总结：父组件先创建，然后子组件创建；子组件先挂载，然后父组件挂载

  1. 首先执行的是父组件的beforeCreate周期

  2. 执行的是父组件的created周期

  3. 执行的是父组件的beforeMount周期

  4. 执行的是子 组件的beforeCreate周期

  5. 执行的是子 组件的created周期

  6. 执行的是子 组件的beforeMount周期

  7. 执行的是子 组件的mounted周期

  8. 执行的是父组件的mounted周期

祖孙总结：父组件先创建，然后子组件创建，最后孙组件创建；孙组件先挂载，然后子组件挂载，最后父组件挂载

  1. 父组件 beforeCreate => created => beforeMount
  2. 子组件 beforeCreate => created => beforeMount
  3. 孙组件 beforeCreate => created => beforeMount
  4. 孙组件 mounted
  5. 子组件 mounted
  6. 父组件 mounted

更新阶段

  1. 先执行父组件的 beforeUpdate
  2. 再执行子组件的 beforeUpdate
  3. 再执行子组件的 updated
  4. 再执行父组件的 updated

销毁阶段

  1. 先执行父组件的 beforeDestroy
  2. 再执行子组件的 beforeDestroy
  3. 再执行子组件的 destroyed
  4. 再执行父组件的 destroyed
一颗不甘坠落的流星
关注
  • 7
    点赞
  • 踩
  • 8
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
深入理解Vue父子组件生命周期执行顺序及钩子函数
10-18
本文通过实例代码给大家介绍了Vue父子组件生命周期执行顺序及钩子函数的相关知识，非常不错，具有一定的参考借鉴价值，需要的朋友参考下吧
vue 父子组件生命周期执行顺序
m0_62012366的博客
04-09 1万+
挂载阶段 执行顺序为： 父beforeCreate -> 父created -> 父beforeMount -> 子beforeCreate -> 子created -> 子beforeMount -> 子mounted -> 父mounted 更新阶段 执行顺序为： 父beforeUpdate -> 子beforeUpdate -> 子updated -> 父updated 销毁阶段 执行顺序为： 父beforeDestroy -&gt
Vue父子组件生命周期执行顺序是什么？
qq_43648865的博客
02-28 5274
在父组件的created中的请求返回数据后，才会执行子组件的created，mounted。子组件先挂载，然后父组件挂载，即“父beforeCreate-> 父create -> 子beforeCreate-> 子created -> 子mounted -> 父mounted”。所以组件数据回显的时候，在父组件mounted中获取api的数据，子组件的mounted是拿不到的。子组件先挂载，然后父组件挂载。注意：在父组件传递接口的数据给子组件时，一定要在子组件标签上加上v-if="传递的接口数据"
vue 父子组件嵌套下的生命周期顺序
肖肖肖丽珠的博客
03-12 424
子组件beforeCreate-created-beforeMount-mounted。父组件执行beforeCreate-created-beforeMount。销毁时：父组件先做销毁准备。等子组件销毁以后再去销毁父组件。子组件beforeDestroy-destroyed。子组件 beforeUpdate-updated。父组件beforeDestroy。父组件beforeUpdate。父组件destroyed。父组件mounted。父组件updated。
vue 父组件和子组件生命周期执行顺序
weixin_45272820的博客
09-24 2782
Vue 的父组件和子组件生命周期执行顺序可以理解为以下 4 点： 加载渲染过程 父 beforeCreate -> 父 created -> 父 beforeMount -> 子 beforeCreate -> 子 created -> 子 beforeMount -> 子 mounted -> 父 mounted 子组件更新过程 父 beforeUpdate -> 子 beforeUpdate -> 子 updated -> 父 updated
vue同步父子组件和异步父子组件的生命周期顺序问题
10-17
主要介绍了vue同步父子组件和异步父子组件的生命周期顺序问题,需要的朋友可以参考下
vue父子组件的嵌套的示例代码
08-29
本篇文章主要介绍了vue父子组件的嵌套的示例代码，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
【Vue】template 模板用法
热门推荐
qq_45677671的博客
03-30 5万+
文章目录一、在HTML5中二、在JavaScript中三、在Vue中写在vue构造器里写在template标签里写在script标签里（官方推荐） 一、在HTML5中 template标签：其内容隐藏在客户端之外 该内容在加载页面是不会呈现，不会渲染出任何信息 相当于自带属性：template {display: none;} <body> <template> <!-- 该标签内容是不可见的 --> 内容模板元素 </
Vue vscode 创建 vue 项目流程【超详细】
qq_45677671的博客
04-02 4万+
文章目录一、安装node二、配置淘宝镜像三、配置 vscode（win10）四、全局安装脚手架五、创建项目六、进入项目七、项目结构 一、安装node 请在官网下载安装：https://nodejs.org/zh-cn/ vscode 中 点击 ( ctrl + `) 调出终端 输入指令node -v，能显示版本号，说明 node 已经装好了 输入指令npm -v，能显示版本号，说明 npm 可以使用了 点击链接查看图文教程 https://blog.csdn.net/qq_45677671/ar
【Vue】axios 配置详解
qq_45677671的博客
04-08 4880
文章目录1.axios 定义2. 特性3.安装和使用4.请求写法5.并发请求6.创建实例7.实例方法8. 请求配置9.响应结构10.配置默认值全局的 axios 默认值自定义实例默认值11.拦截器 1.axios 定义 Axios 是一个基于 promise 的 HTTP 库，可以用在浏览器和 node.js 中 2. 特性 axios 的优势： 从浏览器中创建 XMLHttpRequests 从 node.js 创建 http 请求 支持 Promise API 拦截请求和响应 转换请求数据和响应数据
【Vue】全局方法的使用
qq_45677671的博客
07-22 4688
Vue.component 组件、Vue.mixin 混入、Vue.filter 过滤、Vue.directive 自定义指令的使用
【Vue】自定义组件绑定 v-model
qq_45677671的博客
07-22 4188
自定义组件绑定 v-model 使用案例
【Vue】watch 监听 url 地址参数变化（路由变化）
qq_45677671的博客
07-28 3718
watch 监听 url 地址参数变化或路由变化使用案例
【Vue】export 导出用法
qq_45677671的博客
04-06 3171
在JavaScript ES6中，**export** 与 **export default** 均可用于导出常量、函数、文件、模块等，你可以在其它文件或模块中通过 **import+(常量 | 函数 | 文件 | 模块)名** 的方式，将其导入，以便能够对其进行使用...
【Vue】各v-指令用法
qq_45677671的博客
07-21 2177
v-html、v-text、v-show、v-if、v-for、v-on、v-bind、v-model、v-once、v-cloak、v-pre、v-slot 等指令的使用
【Vue】全套$...方法使用
qq_45677671的博客
07-25 1798
文章目录一、事件监听事件：$on监听一次：$once移除监听：$off触发事件：$emit二、数据监听数据：$watch添加数据：$set删除数据：$delete三、生命周期手动挂载：$mount()强制渲染：$forceUpdate()延迟更新：$nextTick()销毁实例：$destroy()四、属性根元素：$el根属性：$root父组件：$parent子组件：$children各组件：$refs各配置：$options() 一、事件 监听事件：$on $on：监听当前实例上的自定义事件。 事件可以
【Vue】＜component＞ 内置元素
qq_45677671的博客
06-15 1434
渲染一个“元组件”为动态组件。依 is 的值，来决定哪个组件被渲染。
前端vue2父子组件一起的生命周期执行顺序
最新发布
03-16
在Vue2中，父子组件的生命周期执行顺序如下： 1. 父组件的beforeCreate钩子函数被调用。 2. 父组件的created钩子函数被调用。 3. 父组件的beforeMount钩子函数被调用。 4. 子组件的beforeCreate钩子函数被调用。 5. 子组件的created钩子函数被调用。 6. 子组件的beforeMount钩子函数被调用。 7. 子组件的mounted钩子函数被调用。 8. 父组件的mounted钩子函数被调用。 在这个过程中，父组件的生命周期钩子函数会在子组件之前执行。父组件的beforeCreate和created钩子函数在子组件的beforeCreate和created钩子函数之前执行，而父组件的beforeMount和mounted钩子函数在子组件的beforeMount和mounted钩子函数之后执行。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

一颗不甘坠落的流星

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值