Angular--父子组件生命周期钩子(lifecycle hooks)执行过程

这篇具有很好参考价值的文章主要介绍了Angular--父子组件生命周期钩子(lifecycle hooks)执行过程。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

1.angular 组件生命周期钩子执行过程

 组件初始化过程中,生命周期钩子执行顺序:

  1. constructor()构造函数,初始化class,(constructor不属于Angular生命周期钩子的范畴,这里只是说明组件组件初始化会先调用构造函数)。
  2. ngOnChanges()--如果组件没有输入属性(@Input()),或者使用时没有提供任何输入属性,那么angular不会调用它;会调用多次
  3. ngOnInit()--只调用一次,一般用来初始化数据,如请求数据。
  4. ngDoCheck()--紧跟在每次执行变更检测时的ngOnChanges()和首次执行变更检测的ngOnInit()后调用;会调用多次
  5. ngAfterContentInit()--当Angular把外部内容投影进组件视图或指令所在的视图之后调用,第一次ngDoCheck()之后调用,只调用一次。
  6. ngAfterContentChecked()--每当Angular检查完被投影到组件或指令中的内容之后调用,在ngAfterContentInit()和每次ngDoCheck()之后调用,会调用多次
  7. ngAfterViewInit()--当Angular初始化玩玩组件视图及其子视图之后调用,只调用一次。
  8. ngAfterViewChecked()--当Angular做完组件视图和子视图的变更检测之后调用;在ngAfterViewInit()和每次ngAfterContentChecked()之后调用,会调用多次
  9. ngOnDestroy()--当Angular每次销毁组件或指令之前调用并清扫。在这里取消订阅可观察对象和分离事件处理器,以防内存泄漏。

Angular--父子组件生命周期钩子(lifecycle hooks)执行过程

 文章来源地址https://www.toymoban.com/news/detail-807350.html

2.angular 父子组件生命周期钩子过程

 父子组件生命周期钩子执行顺序,如下图所示  

  1.首先调用父组件的构造函数,然后调用子组件的构造函数。

  2.当调用父组件的ngAfterContentChecked()钩子之后,会调用子组件的生命周期函数。

  3.子组件的ngAfterContentChecked()钩子执行完之后,会在调用子组件的子组件的生命周期钩子(如果有的话)。

  4.子组件执行ngAfterViewChecked()钩子后,父组件继续执行其余的生命周期钩子。

  5.当发生变更检测时,父组件先触发ngDoCheck() => ngAfterContentChecked(),然后子组件触发 ngOnChanges() => ngDoCheck() => ngAfterContentChecked() => ngAfterViewChecked(),最后父组件调用ngAfterViewChecked()。

Angular--父子组件生命周期钩子(lifecycle hooks)执行过程

 

到了这里,关于Angular--父子组件生命周期钩子(lifecycle hooks)执行过程的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • Android Jetpack中Lifecycle使用生命周期感知型组件处理生命周期

    在使用Kotlin实现Android Jetpack中Lifecycle使用生命周期感知型组件处理生命周期的功能时,你需要以下步骤: 首先,在app的build.gradle文件中添加Lifecycle相关库的依赖项: 然后,在你的Activity或Fragment中创建一个LifecycleObserver对象,并使用@OnLifecycleEvent注解来实现相应的生命周期方法

    2024年01月21日
    浏览(48)
  • 计算属性和监听属性,生命周期钩子,组件介绍

    # 计算属性是基于它们的依赖进行缓存的 # 计算属性只有在它的相关依赖发生改变时才会重新求值 # 计算属性就像Python中的property,可以把方法/函数伪装成属性 # 计算属性必须要有返回值 基本使用 首字母变大写 通过计算属性,重写过滤案例 只要属性发生变化,就会执行 函数

    2024年01月21日
    浏览(42)
  • Angular组件生命周期详解

    当 Angular 实例化组件类 并渲染组件视图及其子视图时,组件实例的生命周期就开始了。生命周期一直伴随着变更检测,Angular 会检查数据绑定属性何时发生变化,并按需更新视图和组件实例。当 Angular 销毁组件实例并从 DOM 中移除它渲染的模板时,生命周期就结束了。当 Ang

    2024年02月05日
    浏览(43)
  • 【微信小程序】父子组件的创建、通信与事件触发;组件生命周期

    关于微信小程序中父子组件的创建、传值,以及涉及到的组件生命周期。 组件的使用可以 提高开发效率 并 确保功能在各个页面上的应用和修改的一致性 。 例如,对于一些重复的功能,比如顶部导航栏或评论区,将其提炼成组件后,我们只需要在不同的页面中引用该组件,

    2024年02月03日
    浏览(56)
  • Vue - 实现类似小程序 onShow() 一样的生命周期钩子方法(监听页面的显示,只要页面显示就执行代码)

    我们都知道,在微信小程序和 uni-app 项目中,页面有一个 onShow() 生命周期,当页面显示时就会触发。 但在 Vue.js / Nuxt.js 项目中是没有这个钩子函数的, 本文将提供 最简单、高效 的解决方案, 另外兼容性亲测完美。 如下效果图所示,首页每次显示的时候都会触发(您看控制

    2024年02月11日
    浏览(44)
  • 面试中问:React中函数组件和class组件的区别,hooks模拟生命周期

    React 的函数组件和类组件在很多方面都相似,但它们也有一些关键的差异。以下是这两种组件之间的主要区别: 定义方式 : 函数组件 : 是简单的 JavaScript 函数,接受 props 为参数,并返回 React 元素。 类组件 : 是 ES6 的类,继承的时候要用到 extends React.Component,至少包含一个名

    2024年02月11日
    浏览(45)
  • Vue2-replace属性、编程式路由导航、缓存路由组件、两个新的生命周期钩子、路由守卫、路由器工作模式

    🥔:如果事与愿违,那一定是上天另有安排 更多Vue知识请点击——Vue.js 1.作用:控制路由跳转时操作浏览器历史记录的模式 2.浏览器的历史记录有两种写入方式:分别为 push 和 replace , push是追加历史记录,replace是替换当前记录 。路由跳转时候 默认为push 3.如何开启replace模

    2024年02月10日
    浏览(48)
  • VMware Aria Suite Lifecycle 8.12 - 应用生命周期管理

    VMware Aria Suite Lifecycle 8.12 - 应用生命周期管理 请访问原文链接:https://sysin.org/blog/vmware-aria-suite-lifecycle/,查看最新版。原创作品,转载请保留出处。 作者主页:sysin.org 应用生命周期管理 VMware Aria Suite Lifecycle (以前称为 vRealize Suite Lifecycle Manager) 通过全面的应用生命周期和

    2024年02月10日
    浏览(89)
  • 什么是Vue中的生命周期钩子函数?有哪些主要的生命周期钩子函数?如何监听DOM事件?

    Vue中的生命周期钩子函数是指在Vue实例创建、数据绑定、组件挂载等生命周期阶段中,可以执行一些特定操作的函数。这些函数在Vue实例的不同生命周期阶段被调用,可以帮助开发者更好地控制Vue实例的行为。 Vue的生命周期钩子函数包括: beforeCreate :在Vue实例创建之前调用

    2024年02月12日
    浏览(56)
  • vue3-生命周期钩子函数

    声明周期函数onMounted ,onUnmounted,onUpdated onMounted:页面渲染之前执行,执行完,页面就出来了 onUnmounted:组件注销之前执行,执行完组件就不在页面显示了。如果隐藏组件就行执行。 onUpdated:当组件内的内容发生变化时,就会执行这个更新钩子函数,比如删除数组中的某个元素

    2024年02月11日
    浏览(43)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包