Vue 生命周期及子组件生命周期执行过程

最新推荐文章于 2023-12-26 15:44:18 发布
最新推荐文章于 2023-12-26 15:44:18 发布
阅读量437 收藏 1
点赞数
分类专栏： vue 文章标签： vue
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_15902869/article/details/108462121
版权

Vue 生命周期及子组件生命周期执行过程

  • 正常情况下 vue 中的生命周期执行顺序
    • beforeCreate
    • created
    • beforeMount
    • mounted
    • beforeUpdate
    • updated
    • beforeDestroy
    • destroyed
  • 如果在项目中父组件在调用自组建时生命周期的执行顺序
    • 父组件 beforeCreate 父组件创建前
    • 父组件 created 父组件创建后
    • 父组件 beforeMount 父组件挂载前
    • 子组建 beforeCreate 子组件创建前
    • 子组建 created 子组件创建后
    • 子组建 beforeMount 子组件挂载前
    • 子组建 mounted 子组件挂载后
    • 父组件 mounted 父组件挂载后
    • 父组件 beforeUpdate 父组件更新前
    • 子组建 beforeUpdate 子组件更新前
    • 子组建 updated 子组件更新后
    • 父组件 updated 父组件更新后
    • 父组件 beforeDestroy 父组件销毁前
    • 子组建 beforeDestroy 子组件销毁前
    • 子组建 destroyed 子组件销毁后
    • 父组件 destroyed 父组件销毁后

附上官方声明周期图
官方生命周期图

不太现实
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
Vue.js 组件销毁有几种情况？
千锋教育
03-06 7539
显式销毁：在组件实例上调用 $destroy() 方法可以显式销毁一个组件实例，它会解除所有的绑定并移除 DOM 中的元素。在组件销毁时，Vue.js 会自动执行一些生命周期钩子函数，包括 beforeDestroy() 和 destroyed()。路由切换：当使用 Vue.js 路由切换时，旧的组件实例会被销毁，新的组件实例会被创建并挂载到 DOM 中。条件渲染：当一个组件通过 v-if 或 v-show 指令被移除时，它会被销毁。父组件销毁：当一个父组件被销毁时，它的所有子组件也会被销毁。
vue父子组件生命周期
qq_25503949的博客
07-15 1万+
vue父子组件生命周期 一.生命周期（单个组件） 分为 挂载，更新，销毁 三个阶段 生命周期演示 二.生命周期（父子组件）：
vue2父子组件生命周期执行顺序
最新发布
m0_61093181的博客
12-26 822
父组件：beforeCreate -> created -> beforeMount -> 子组件beforeCreate -> 子组件created -> 子组件beforeMount -> 子组件mounted -> 父组件mounted。当父组件销毁时，子组件的生命周期执行顺序为：beforeDestroy -> 子组件beforeDestroy -> 子组件destroyed -> destroyed。在子组件中，如果需要访问父组件的生命周期钩子函数，可以使用$parent来访问父组件的实例。
vue父子组件的生命周期（执行顺序）
qq_63605379的博客
06-21 1277
父子组件的生命周期（执行顺序）更新（元素或组件的变更操作）
【Vue学习】Vue组件的生命周期
zx1041561837的博客
02-24 778
本文介绍Vue组件生命周期的相关知识。组件生命周期指的是组件从创建到销毁的整个过程。分为四个阶段：1. 创建阶段 2. 更新阶段 3. 销毁阶段 4. 激活和停用阶段。钩子函数就是不同阶段下，调用的相应函数，能够实现对组件的控制。
Vue父组件监听子组件生命周期
10-14
总结来说，Vue 父组件监听子组件生命周期是通过自定义事件和`@hook`修饰符实现的，这为开发者提供了更精细的控制，以确保组件之间的交互按预期进行。了解并熟练掌握这些机制，能够帮助开发者构建更复杂、响应更快的...
深入理解Vue生命周期、手动挂载及挂载子组件
08-29
总结，深入理解Vue生命周期有助于优化组件管理和更新逻辑，而手动挂载和挂载子组件则提供了更大的灵活性，尤其在处理动态渲染和复杂场景时。同时，通过自定义指令，可以实现更强大的DOM操作和验证功能。
深入理解Vue父子组件生命周期执行顺序及钩子函数
10-18
本文通过实例代码给大家介绍了Vue父子组件生命周期执行顺序及钩子函数的相关知识，非常不错，具有一定的参考借鉴价值，需要的朋友参考下吧
vue组件生命周期详解
08-28
Vue组件生命周期是指从组件创建到销毁的整个过程，分为四个阶段：create、mount、update和destroy，每个阶段都有其对应的处理函数。下面我们将详细介绍每个阶段的处理函数和生命周期函数。 Create 阶段 在create...
20.（vue3.x+vite）Vue子组件和父组件执行顺序.rar
09-21
Vue的生命周期是每个组件从创建到销毁的过程，其中包括了初始化、挂载、更新和卸载等阶段。在父子组件的关系中，这种顺序对于协同工作和数据传递至关重要。 首先，我们来看Vue3.x的生命周期变化。Vue3引入了全新的...
vue组件生命周期销毁过程,vue监听子组件生命周期
神经网络爱好者
09-09 1817
在由于数据更改导致地虚拟DOM重新渲染和打补丁只会调用，调用时，组件DOM已经更新，所以可以执行依赖于DOM的操作，然后在大多是情况下，应该避免在此期间更改状态，因为这可能会导致更新无限循环，该钩子在服务器端渲染期间不被调用。挂在开始之前被调用，相关的render函数首次被调用（虚拟DOM），实例已完成以下的配置：编译模板，把data里面的数据和模板生成html，完成了el和data初始化，注意此时还没有挂在html到页面上。mounted：在这发起后端请求，拿回数据，配合路由钩子做一些事情。
Vue父子组件生命周期执行顺序及钩子函数的个人理解
weixin_30616969的博客
08-11 1万+
先附一张官网上的vue实例的生命周期图，每个Vue实例在被创建的时候都需要经过一系列的初始化过程，例如需要设置数据监听，编译模板，将实例挂载到DOM并在数据变化时更新DOM等。同时在这个过程中也会运行一些叫做生命周期钩子的函数(回调函数)，这给了用户在不同阶段添加自己代码的机会。 1、vue的生命周期图 在vue实例的整个生命周期的各个阶段，会提供不同的钩子函数以供我们进行不同的操作...
【vue】父子组件生命周期执行顺序以及销毁和更新
OneILove的博客
08-03 3244
父子组件执行顺序： 父组件beforeCreate --> 父组件created --> 父组件beforeMount --> 子组件beforeCreate --> 子组件created --> 子组件beforeMount --> 子组件 mounted --> 父组件mounted 父组件代码： <template> <div id="app"> <img alt="Vue logo" src="./a...
Vue——父子组件的生命周期（执行顺序）
热门推荐
leilei__66的博客
07-19 2万+
Vue——父子组件的生命周期（执行顺序） 一个组件的生命周期： 挂载（初始化相关属性） beforeCreate created beforeMount mounted 更新（元素或组件的变更操作） beforeUpdate updated 销毁（销毁相关属性） beforeDestroy destroyed 结合父子组件之后 一个完整的父子组件生命周期： 父beforeCreate -> 父created -> 父beforeMount -> 子beforeCrea
vue2页面及组件的生命周期执行过程及销毁过程随笔
weixin_57044893的博客
12-27 2027
执行顺序： （父）beforeCreate() (父) created() (父) beforemount() (子) beforeCreate() (子) created() (子) beforeMounte() (子) mounted() (父) mounted()
vue-父子组件执行流程
weixin_44754351的博客
06-10 160
创建初始化阶段： 父：beforeCreate 父：created 父：beforeMount 子：beforeCreate 子：created 子：beforeMount 子：mounted 父：mounted 更新组件阶段： 父：beforeUpdate 子：beforeUpdate 子：updated 父：updated 销毁阶段： 父：beforeDestroy 子：beforeDestroy 子：destroyed 父：destroyed ...
vue 生命周期4 销毁流程 beforeDestroy destroyed
MCCLS的博客
07-19 1万+
销毁流程： 当调用了vm.$destroy 则触发销毁流程 验证下： 加一个按钮和销毁事件 效果： 发现点击了vm销毁,但是页面上仍不变 因为虽然vm没了但是vm的工作成果还是在的 并不是vm销毁后,它的生成的dom也销毁掉,只不过是没有人帮你去管理了 再点加1就发现不好用了 发现vue的开发者工具上也没有了任何东西了 验证：指令也不奏效 点击n加1发现页面都不变了说明指令也不奏效了 验证事件监听器也不奏效了 ...
关于Vue实例的生命周期created和mounted的区别
weixin_33896069的博客
03-04 1829
关于作者 程序开发人员，不拘泥于语言与技术，目前主要从事PHP和前端开发，使用Laravel和VueJs，App端使用Apicloud混合式开发。合适和够用是最完美的追求。个人网站：http://www.linganmin.cn 最近刚写了一个手机在线播放的H5电影站：https://ifilm.linganmin.cn 生命周期先上图...
Vue 组件的生命周期
aoshisen的博客
06-24 2053
1、组件生命周期 组件生命周期指的是组件从创建到销毁的过程，在这个过程中的一些不同的阶段，vue 会调用指定的一些组件方法。 基本生命周期函数有下面几个阶段： 创建阶段 挂载阶段 更新阶段 卸载阶段 其它 每一个阶段都对应着 之前 和 之后 两个函数。 2、创建阶段 2-1、beforeCreate() 在实例初始化之后，数据观测 (data observer) 和 event/watcher 事件配置之前被调用。初始化阶段，应用不多。 2-2、created() 在实例创建完成后被立即调用。在这一步
vue生命周期钩子及父子组件 钩子执行顺序
09-02
Vue 的生命周期钩子函数指的是在组件实例化、渲染、更新和销毁等不同阶段执行的一些特定函数。下面是 Vue 组件的生命周期钩子函数及其执行顺序： 1. beforeCreate：在实例创建之前被调用。此时组件的数据和方法都还未初始化。 2. created：在实例创建完成之后被调用。此时组件的数据已经初始化，但 DOM 还未渲染。 3. beforeMount：在组件挂载到 DOM 之前被调用。此时模板已经编译完成，但还未挂载到页面中。 4. mounted：在组件挂载到 DOM 后被调用。此时组件已经被渲染并插入到页面中，可以进行 DOM 操作。 5. beforeUpdate：在数据更新之前被调用。此时组件还未重新渲染，但数据已经更新。 6. updated：在数据更新之后被调用。此时组件已经重新渲染，可以进行 DOM 操作。 7. beforeDestroy：在组件销毁之前被调用。此时组件还存在，可以进行一些清理工作。 8. destroyed：在组件销毁之后被调用。此时组件已经从 DOM 中移除，事件监听和定时器等资源都已经被销毁。 对于父子组件，它们的生命周期钩子函数的执行顺序如下： 1. 父组件的 beforeCreate 和 created 钩子函数执行。 2. 子组件的 beforeCreate 和 created 钩子函数执行。 3. 子组件的 beforeMount 钩子函数执行。 4. 子组件的 mounted 钩子函数执行。 5. 父组件的 beforeMount 钩子函数执行。 6. 父组件的 mounted 钩子函数执行。 7. 数据更新时，先执行父组件的 beforeUpdate 钩子函数，然后执行子组件的 beforeUpdate 钩子函数，再执行子组件的 updated 钩子函数，最后执行父组件的 updated 钩子函数。 8. 组件销毁时，先执行父组件的 beforeDestroy 钩子函数，然后执行子组件的 beforeDestroy 钩子函数，最后执行子组件的 destroyed 钩子函数，再执行父组件的 destroyed 钩子函数。 这是 Vue 组件生命周期钩子函数的一般执行顺序，但在实际开发中可能会有特殊情况，需要根据具体需求来使用。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值