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 - 指令销毁前调用
答：总共分为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 >
li.li1 { margin: 0; font: 12px "Helvetica Neue" } span.s1 { font: 10px Menlo } ul.ul1 { list-style-type: disc }
查看更多关于angular、angular2、vue的生命周期的详细内容...