VUE中父子组件中的生命周期先后顺序

最新推荐文章于 2024-04-26 00:52:41 发布
最新推荐文章于 2024-04-26 00:52:41 发布
阅读量637 收藏 3
点赞数 3
文章标签： vue.js 前端 javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_44490656/article/details/126115329
版权

VUE的生命周期

在说父子组件的生命周期之前，先了解一下单个组件的生命周期
官网都有
然后在说一下父子组件生命周期的顺序
首先是
1.父组件 beforeCreate
2.父组件 created
3.父组件 beforeMount
4.子组件 beforeCreate
5.子组件 created
6.子组件 beforeMount
7.子组件 mounted
8.父组件mounted
…
这样记忆有点乱，而且很容易记混
Vue的生命周期分为了三个阶段：初始化阶段，更新阶段，销毁Vue的实例，每个阶段又有着自己的钩子函数

初始化阶段钩子函数:
beforeCreate()实例创建前：数据和模板均未获取到
created()实例创建后：最早可以访问到data数据，但模板未获取到
beforeMount()挂载数据前：模板已经获取到，但是数据未挂载到模板上
mounted()数据挂载后：数据已经挂载到模板中
更新阶段钩子函数:
beforeUpdate() 模板更新前:data改变后,更新模板前调用
updated()模板更新后:将data渲染到数据模板中
销毁阶段钩子函数:
beforeDestory()实例销毁前
destoryed()实例销毁后
这样的话我们可以从原理来理解，
首先执行父子件初始化阶段钩子，但是到数据挂载的时候，就会发现里面有子组件，因为要将子组件的数据
挂载到父组件上，但是子组件还没有创建，于是开始创建子组件，并进行相应的钩子函数。
看到这里在看上面的执行顺序是不是容易记忆多了，而且也不会混乱！

说梦话能治吗
关注
  • 3
    点赞
  • 踩
  • 3
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
Vue父子组件生命周期执行顺序是什么？
qq_43648865的博客
02-28 5359
在父组件的created中的请求返回数据后，才会执行子组件的created，mounted。子组件先挂载，然后父组件挂载，即“父beforeCreate-> 父create -> 子beforeCreate-> 子created -> 子mounted -> 父mounted”。所以组件数据回显的时候，在父组件mounted中获取api的数据，子组件的mounted是拿不到的。子组件先挂载，然后父组件挂载。注意：在父组件传递接口的数据给子组件时，一定要在子组件标签上加上v-if="传递的接口数据"
vue同步父子组件和异步父子组件的生命周期顺序问题
10-17
主要介绍了vue同步父子组件和异步父子组件的生命周期顺序问题,需要的朋友可以参考下
Vue父子组件生命周期执行顺序
細水、長流√的专栏
11-06 2454
vue2 中 执行顺序 ：vue3 中 执行顺序对应关系。
vue父子组件的生命周期（执行顺序）
qq_63605379的博客
06-21 1277
父子组件的生命周期（执行顺序）更新（元素或组件的变更操作）
vue3生命周期（父子执行顺序）及其他钩子函数
最新发布
weixin_50961467的博客
04-26 2818
父组件beforeDestroy => 子组件beforeDestroy =>子组件destroyed => 父组件destroyed。父组件beforeUpdate => 子组件beforeUpdate =>子组件updated => 父组件updated。为了保证父组件的视图与子组件的数据同步，Vue 在子组件数据变化后先触发父组件的生命周期钩子函数，然后再更新子组件的视图。父组件beforeCreate => 父组件created => 父组件beforeMount =>
vue3-基础-父子组件生命周期(life-cycle)
YogaMiller的博客
11-07 701
vue3生命周期
vue 父子组件生命周期执行顺序
热门推荐
m0_62012366的博客
04-09 1万+
挂载阶段 执行顺序为： 父beforeCreate -> 父created -> 父beforeMount -> 子beforeCreate -> 子created -> 子beforeMount -> 子mounted -> 父mounted 更新阶段 执行顺序为： 父beforeUpdate -> 子beforeUpdate -> 子updated -> 父updated 销毁阶段 执行顺序为： 父beforeDestroy -&gt
深入理解Vue父子组件生命周期执行顺序及钩子函数
10-18
本文通过实例代码给大家介绍了Vue父子组件生命周期执行顺序及钩子函数的相关知识，非常不错，具有一定的参考借鉴价值，需要的朋友参考下吧
20.（vue3.x+vite）Vue子组件和父组件执行顺序.rar
09-21
Vite是一个基于Vue的现代化构建工具，它提供了更快的热重载和模块按需编译，但组件的生命周期顺序仍然是遵循Vue的规则。使用Vite开发Vue3项目时，可以享受到更快的开发体验，同时生命周期的理解和应用仍然相同。 在...
vue中的属性执行顺序 props -＞ data -＞ computed -＞ watch -＞ created -＞ mounted -＞ methods
06-14 4481
综上，选项的执行顺序是 props -> data -> computed -> watch -> created -> mounted -> methods。2. data ：在处理完 props 之后，Vue 会处理数据对象中的所有属性，并将它们添加到 Vue 实例中。3. computed ：计算属性会在处理完 data 之后被计算，并添加到 Vue 实例中。7. methods ：实例方法会在 mounted 之后被处理，并添加到 Vue 实例中。
vue父子组件生命周期执行顺序_深入理解Vue父子组件生命周期执行顺序及钩子函数...
weixin_39641386的博客
12-18 196
先附一张官网上的vue实例的生命周期图，每个Vue实例在被创建的时候都需要经过一系列的初始化过程，例如需要设置数据监听，编译模板，将实例挂载到DOM并在数据变化时更新DOM等。同时在这个过程中也会运行一些叫做生命周期钩子的函数(回调函数)，这给了用户在不同阶段添加自己代码的机会。1、vue的生命周期图在vue实例的整个生命周期的各个阶段，会提供不同的钩子函数以供我们进行不同的操作。先列出vue官网...
Vue 父子组件钩子的执行顺序是什么
小草莓的博客
10-16 468
在 keep-alive 组件中，子组件的 mounted 钩子只会在组件被首次渲染时执行，当组件被缓存并再次激活时，子组件的 mounted 钩子不会再次执行，而是执行 activated 钩子。父组件 beforeDestroy 钩子 => 子组件 beforeDestroy 钩子 => 子组件 destroyed 钩子 => 父组件 destroyed 钩子。父组件 beforeDestroy 钩子 => 子组件 beforeDestroy 钩子 =>
Vue3：组件通信、组件生命周期
孤安先生的博客，作者主站正在重构中，敬请期待！
06-16 115
props 只读，子组件改不了父组件传递过来的值，需要传递给父组件，由父组件进行更改。setup 在组件初次挂载前、重新挂载前都会执行。实现祖孙组件之间的通信。提供数据，孙组件通过。
Vue父组件生命周期和子组件生命周期触发顺序
JackieDYH的博客
04-26 1186
beforeCreate：实例创建前执行。el 和 data 都为 undefined，还未初始化。methods、computed 以及 watch 上的数据或方法均不能被访问。created：实例初始化完成后执行。页面还没开始渲染，不可访问 DOM 节点。el 仍然为 undefined。但可以操作 data 与 methods 等。可以做一些初始数据的获取，在当前阶段无法与 DOM 进行交互，如果需要，可以通过 $nextTick 来访问 DOM。beforeMount：挂载前执行。
父子组件生命周期及子组件获取数据问题
weixin_57528449的博客
10-21 1708
父子组件生命周期及子组件获取数据问题
Vue父子组件的生命周期执行顺序
zebrar的博客
01-18 954
本文主要介绍了Vue父子组件的生命周期执行顺序，并且简单介绍了生命周期的概念提示：以下是本篇文章正文内容，下面案例可供参考从Vue实例从创建、运行到销毁期间，总是伴随着各种各样的事件，这些事件统称为生命周期。伴随vue的创建、运行到销毁，有八个重要的生命周期钩子函数，分别是beforeCreate() 初始化之前执行created() 初始化之后beforeMount() 挂载到页面之前mounted() 渲染到页面之后beforeUpdate() 数据更新前。
关于VUE props传值问题 created mounted watch
zmx12100423的博客
08-20 5709
props 传值在子组件定义props 关于mounted created获取问题 export default{ props:["name"], data(){ return{ data:this.name } }, created(){ console.log(data); // 小明 console.log(this.name) // 小明 }， mounted(){ console.log(data); // 小明 console.log(this.name) // 小明 }
vue组件的生命周期和父子组件生命周期执行顺序
qq_64454072的博客
05-09 1952
什么是组件的生命周期？ 一个组件从创建到销毁的整个过程就叫生命周期。 生命周期函数(钩子函数) 生命周期函数是vue框架的内置函数，随着组件的生命周期，自动按序执行。 作用 特定的时间点，执行某些特定的操作。 生命周期的四个阶段 初始化阶段 该阶段是为了创建组件，里面又有两个钩子函数，beforeCreate、created beforeCreat==>创建前 created==>创建后，一般用于ajax发送请求 挂载阶段 该阶段是为了渲染显示组件，里面又有两个钩子函
【vue3 组件生命周期流程 & 功能】13个生命周期详解
从今年开始写写博客~~
02-27 5329
单一组件、父子组件的生命周期。 仅限开发环境下有效的生命周期。 不讲SSR的生命周期：serverPrefetch。也就是只讲客户端的13个生命周期！ this的数据：除了`beforeCreate`，其他12个生命周期的 this 都能获得组件实例对应初始化完成的内容。 `beforeUpdate()` 永远只在所有父子组件的 `mounted() `之后才会触发！ 例子里的生命周期根据功能进行了划分，生命周期的顺序都标了数字！ setup() 调用时间，与调用时间相关功能的讲解。onMounted之类的
vue中父子组件的生命周期执行顺序
07-27
在Vue中，父子组件的生命周期钩子函数执行顺序如下： 1. 父组件的beforeCreate钩子函数先于子组件的beforeCreate钩子函数执行。 2. 父组件的created钩子函数先于子组件的created钩子函数执行。 3. 父组件的beforeMount钩子函数先于子组件的beforeMount钩子函数执行。 4. 子组件的mounted钩子函数先于父组件的mounted钩子函数执行。 5. 父组件的beforeUpdate钩子函数先于子组件的beforeUpdate钩子函数执行。 6. 子组件的updated钩子函数先于父组件的updated钩子函数执行。 7. 父组件的beforeDestroy钩子函数先于子组件的beforeDestroy钩子函数执行。 8. 子组件的destroyed钩子函数先于父组件的destroyed钩子函数执行。 需要注意的是，当父组件销毁时，其所有子组件也会被销毁。因此，在父组件的beforeDestroy和destroyed钩子函数中对于子组件的操作可能会出现一些问题，需要谨慎处理。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值