zoukankan      html  css  js  c++  java
  • angular、angular2、vue的生命周期 F

    angular生命周期是什么

    1、Angular每个组件都存在一个生命周期,从创建,变更到销毁。Angular提供组件生命周期钩子,把这些关键时刻暴露出来,赋予在这些关键结点和组件进行交互的能力,掌握生命周期,可以让我们更好的开发Angular应用
    2、每个接口都有唯一的一个钩子方法,它们的名字是由接口名再加上ng前缀构成的,比如OnInit接口的钩子方法叫做ngOnInit.
    3、没有指令或者组件会实现所有这些接口,并且有些钩子只对组件有意义。只有在指令/组件中定义过的那些钩子方法才会被Angular调用。

    生命周期钩子分类

    基于指令与组件的区别来分类:
    1、指令与组件共有的钩子:
    ngOnChanges
    ngOnInit
    ngDoCheck
    ngOnDestroy
    2、组件特有的钩子
    ngAfterContentInit
    ngAfterContentChecked
    ngAfterViewInit
    ngAfterViewChecked

     
    生命周期钩子
    Angular 2 指令生命周期钩子的作用及调用顺序

    1、ngOnChanges - 当数据绑定输入属性的值发生变化时调用
    2、ngOnInit - 在第一次 ngOnChanges 后调用
    3、ngDoCheck - 自定义的方法,用于检测和处理值的改变
    4、ngAfterContentInit - 在组件内容初始化之后调用
    5、ngAfterContentChecked - 组件每次检查内容时调用
    6、ngAfterViewInit - 组件相应的视图初始化之后调用
    7、ngAfterViewChecked - 组件每次检查视图时调用
    8、ngOnDestroy - 指令销毁前调用

    vue生命周期的理解

    答:总共分为8个阶段创建前/后,载入前/后,更新前/后,销毁前/后。

    创建前/后: 在beforeCreated阶段,vue实例的挂载元素$el和**数据对象**data都为undefined,还未初始化。在created阶段,vue实例的数据对象data有了,$el还没有。

    载入前/后:在beforeMount阶段,vue实例的$el和data都初始化了,但还是挂载之前为虚拟的dom节点,data.msg还未替换。在mounted阶段,vue实例挂载完成,data.msg成功渲染。

    更新前/后:当data变化时,会触发beforeUpdate和updated方法。

    下面是所有钩子函数 的详解:

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <title>Vue的生命周期</title>
        <script src="https://cdn.bootcss.com/vue/2.6.10/vue.js"></script>
    </head>
    <body>
    <div id="app">
        <h1>{{msg}}</h1>
    <!--     触发更新钩子函数-->
        <input type="text" v-model="msg">
    </div>
    </body>
    <script>
        var vm = new Vue({
            el: '#app',
            data: {
                msg: 'Vue的生命周期'
            },
            beforeCreate: function() {
                console.group('------beforeCreate创建前的状态------');
                console.log("%c%s", "color:red" , "el     : " + this.$el); //undefined
                console.log("%c%s", "color:red","data   : " + this.$data); //undefined
                console.log("%c%s", "color:red","msg: " + this.msg);//undefined          
            },
            created: function() {
                console.group('------created创建完毕的状态------');
                console.log("%c%s", "color:red","el     : " + this.$el); //undefined
                console.log("%c%s", "color:red","data   : " + this.$data); //已被初始化
                console.log("%c%s", "color:red","msg: " + this.msg); //已被初始化
            },
            beforeMount: function() {
                console.group('------beforeMount挂载前的状态------');
                console.log("%c%s", "color:red","el     : " + (this.$el)); //已被初始化
                console.log(this.$el);
                console.log("%c%s", "color:red","data   : " + this.$data); //已被初始化
                console.log("%c%s", "color:red","msg: " + this.msg); //已被初始化
            },
            mounted: function() {
                console.group('------mounted 挂载结束状态------');
                console.log("%c%s", "color:red","el     : " + this.$el); //已被初始化
                console.log(this.$el);
                console.log("%c%s", "color:red","data   : " + this.$data); //已被初始化
                console.log("%c%s", "color:red","msg: " + this.msg); //已被初始化
            },
            beforeUpdate: function () {
                console.group('beforeUpdate 更新前状态===============》');
                console.log("%c%s", "color:red","el     : " + this.$el);
                console.log(this.$el);
                console.log("%c%s", "color:red","data   : " + this.$data);
                console.log("%c%s", "color:red","msg: " + this.msg);
            },
            updated: function () {
                console.group('updated 更新完成状态===============》');
                console.log("%c%s", "color:red","el     : " + this.$el);
                console.log(this.$el);
                console.log("%c%s", "color:red","data   : " + this.$data);
                console.log("%c%s", "color:red","msg: " + this.msg);
            },
            beforeDestroy: function () {
                console.group('beforeDestroy 销毁前状态===============》');
                console.log("%c%s", "color:red","el     : " + this.$el);
                console.log(this.$el);
                console.log("%c%s", "color:red","data   : " + this.$data);
                console.log("%c%s", "color:red","msg: " + this.msg);
            },
            destroyed: function () {
                console.group('destroyed 销毁完成状态===============》');
                console.log("%c%s", "color:red","el     : " + this.$el);
                console.log(this.$el);
                console.log("%c%s", "color:red","data   : " + this.$data);
                console.log("%c%s", "color:red","msg: " + this.msg)
            }
        })
    </script>
    </html>

      

     

     
  • 相关阅读:
    select查询语句
    springboot的热部署
    springboot入门
    java学习之Semaphore信号量
    Java学习之自定义线程池
    java学习之生产者消费者模式
    sql通过其中一个字段计算另一个字段的值
    activeMq用mysql实现持久化方式
    idea创建Hystrix入门实例
    idea创建Eureka Server入门实例
  • 原文地址:https://www.cnblogs.com/webdragon/p/9800256.html
Copyright © 2011-2022 走看看