欢迎大家来到IT世界,在知识的湖畔探索吧!
生命周期 （ Life Cycle ）是指一个组件从 创建 -> 更新 -> 销毁 的整个阶段。
一、生命周期的分类
生命周期大致可以分为三个阶段：
1. 创建阶段 beforeCreate –> created –> beforeMount –> mounted
2. 更新阶段 beforeUpdate –> updated
3. 销毁阶段 beforeDestroy –> destroyed
生命周期图示如下图所示：
二、生命周期函数&生命周期钩子
1. 创建阶段
beforeCreate –> 创建阶段的第1个生命周期函数,组件的methods，data尚未定义，处于不可用。
created –> 创建阶段的第2个生命周期函数,data和methods定义，无法操作真是DOM。
beforeMount –> 创建阶段的第3个生命周期函数,内存编译好的HTML结构准备渲染到浏览器中，此时浏览器中还没有当前组件的DOM结构，无法操作DOM。
mounted –> 创建阶段的第4个生命周期函数，已经渲染内存的HTML结构到浏览器中，可操作真是DOM。
2. 更新阶段
beforeUpdate –> 运行阶段的第1个生命周期函数，将要根据数据变化后、最新的数据，重新渲染组件的模板结构,数据是最新的，但页面不是最新的
updated –> 运行阶段的第2个生命周期函数，完成了最新数据重新渲染到组件的DOM结构，数据和页面都是最新的
3.销毁阶段
beforeDestroy –> 销毁阶段的第1个生命周期函数，组件还处于正常工作状态
destroyed –> 销毁阶段的第2个生命周期函数,组件销毁完成
三、生命周期函数补充
keep-alive
添加 keep-alive 标签后会增加 activated 和 deactivated 这两个生命周期函数，初始化操作放在 activated里面，一旦切换组件，因为组件是缓存的而没有被销毁，所以它不会执行销毁阶段的钩子函数，所以移除操作需要放在 deactivated 里面，在里面进行一些善后操作，这个时候 created 钩子函数只会组件首次加载时执行一次，销毁的钩子函数一直没有执行。
activated(组件激活时)：被 keep-alive 缓存的组件激活时调用，可以初始化一些数据。
deactivated(组件停用时)：被 keep-alive 缓存的组件停用时调用。在deactived里面，在里面进行一些善后操作。
四、父子组件生命周期
父组件：
import livechidren from “./livechidren.vue”;
export default {
components: { livechidren },
data() {
return {
text: “”,
};
},
methods: {
handle() {
this.$destroy();
},
},
beforeCreate() {
console.log(“父组件————beforeCreate…”);
},
created() {
console.log(“父组件————create…”);
},
beforeMount() {
console.log(“父组件————beforeMount…”);
},
mounted() {
console.log(“父组件————mounted…”);
},
beforeUpdate() {
console.log(“父组件————beforeUpdate…”);
},
updated() {
console.log(“父组件————updated…”);
},
beforeDestroy() {
console.log(“父组件————beforeDestroy…”);
},
destroyed() {
console.log(“父组件————destroyed…”);
},
};
子组件：
export default {
data() {
return {};
},
props:{
text: {
type: String,
}
},
beforeCreate() {
console.log(“子组件————beforeCreate…”);
},
created() {
console.log(“子组件————create…”);
},
beforeMount() {
console.log(“子组件————beforeMount…”);
},
mounted() {
console.log(“子组件————mounted…”);
},
beforeUpdate() {
console.log(“子组件————beforeUpdate…”);
},
updated() {
console.log(“子组件————updated…”);
},
beforeDestroy() {
console.log(“子组件————beforeDestroy…”);
},
destroyed() {
console.log(“子组件————destroyed…”);
},
};
结果显示：
父子组件生命周期执行顺序：
父beforeCreate -> 父created -> 父beforeMount -> 子beforeCreate -> 子created -> 子beforeMount -> 子mounted -> 父mounted->父beforeUpdate->子beforeUpdate->子updated->父updated->父beforeDestroy->子beforeDestroy->子destroyed->父destroyed
总结
1. 生命周期函数又名：生命周期回调函数、生命周期函数、生命周期钩子。
2. 生命周期函数是什么：Vue在关键时刻帮我们调用的一些特殊名称的函数。
3. 生命周期函数的名字不可更改，但函数的具体内容是程序员根据需求编写的。
4.生命周期函数中的this指向是vm 或 组件实例对象。
常用的生命周期钩子：
1.mounted: 发送ajax请求、启动定时器、绑定自定义事件、订阅消息等【初始化操作】。
2.beforeDestroy: 清除定时器、解绑自定义事件、取消订阅消息等【收尾工作】。
免责声明：本站所有文章内容,图片，视频等均是来源于用户投稿和互联网及文摘转载整编而成，不代表本站观点，不承担相关法律责任。其著作权各归其原作者或其出版社所有。如发现本站有涉嫌抄袭侵权/违法违规的内容,侵犯到您的权益，请在线联系站长,一经查实,本站将立刻删除。 本文来自网络,若有侵权，请联系删除，如若转载，请注明出处：https://itzsg.com/83919.html
