目录
前言：
1、什么是vue生命周期？
Vue 实例从创建到销毁的过程，就是生命周期。也就是从开始创建、初始化数据、编译模板、挂载Dom→渲染、更新→渲染、卸载等一系列过程，我们称这是 Vue 的生命周期。
2、vue生命周期的作用是什么？
让我们在控制整个Vue实例的过程时更容易形成好的逻辑。
3、vue生命周期总共有几个阶段？
它可以总共分为8个阶段：创建前/后, 载入前/后,更新前/后,销毁前/销毁后
4、第一次页面加载会触发哪几个钩子？
第一次页面加载时会触发 beforeCreate, created, beforeMount, mounted 这几个钩子
5、DOM 渲染在 哪个周期中就已经完成？
DOM 渲染在 mounted 中就已经完成了。
一、生命周期流程图详解
1.beforeCreate、Created
2.编辑模板过程
3.beforeMount、Mounted
4.beforeUpdate、Updated
5.beforeDestroy、Destroyed
二、生命周期代码
老规矩，先展示生命周期的执行效果
当点击button控件跳转后，befoeCreate、ceeated、beforeMount和mounted就已经执行了。在添加事件就会更新展示beforUpdate和updated；退出这个界面就执行销毁bdfoeDestroy、destroyed。
展示代码：
<template>
<div>
<div class="label-head">
<label>生命周期详解</label>
</div>
<div :data="count">{
{count}}</div>
<p>
<button @click="add">添加</button>
</p>
</div>
</template>
<script>
export default {
data() {
return {
count: "",
filter: "all",
states: ["all", "active", "completed"]
};
},
methods: {
add() {
this.count++;
}
},
beforeCreate() {
console.log("=========" + "beforeCreated:初始化之前" + "======");
console.log(this.$el);
console.log(this.$data);
console.log(this.filter);
},
created() {
console.log("==========" + "created：创建完成" + "===========");
console.log(this.$el);
console.log(this.$data);
console.log(this.filter);
},
beforeMount() {
console.log("==========" + "beforeMount：挂载之前" + "=======");
console.log(this.$el);
console.log(this.$data);
console.log(this.filter);
},
mounted() {
console.log("==========" + "mounted：被挂载之后" + "==========");
console.log(this.$el);
console.log(this.$data);
console.log(this.filter);
},
beforeUpdate() {
console.log("========" + "beforeUpdate：数据更新前" + "========");
console.log(this.$el);
console.log(this.$data);
console.log(this.filter);
},
updated() {
console.log("========" + "updated：被更新之后" + "============");
console.log(this.$el);
console.log(this.$data);
console.log(this.filter);
},
beforeDestroy() {
console.log("=========" + "beforeDestroy：销毁之前" + "========");
console.log(this.$el);
console.log(this.$data);
console.log(this.filter);
},
destroyed() {
console.log("==========" + "destroyed：销毁之后" + "===========");
console.log(this.$el);
console.log(this.$data);
console.log(this.filter);
},
activated() {
console.log("");
},
deactivated() {
console.log("");
}
};
</script>
<style scoped>
.label-head {
text-align: center;
font-size: 40px;
}
</style>
整体的函数知道后，遇到父子组件时他们的函数是如何执行的呢？
1.父子组件加载生命周期
父组件：parents
子组件：child、grandson
/*parents的打印代码*/
created () {
console.log('============"parents created"：我第一============')
},
beforeMount () {
console.log('============"parents befortemounted"我第二=======')
},
mounted () {
console.log('============"parents mounted"我第九==============')
},
/*child的打印代码*/
created () {
console.log('----------------"child created"我第三-------------')
},
beforeMount () {
console.log('----------------"child beforemounted"我第四-------')
},
mounted () {
this.$parent.panes.push(this)
console.log('----------------"child mounted"我第七-------------')
},
/*grandson的打印代码*/
created () {
console.log('~~~~~~~~~~~~~"grandson created"我第五~~~~~~~~~~~~~')
}
beforeMount () {
console.log('~~~~~~~~~~~"grandson beforemounted"我第六~~~~~~~~~')
},
mounted () {
console.log('~~~~~~~~~~~~"grandson mounted"我第八~~~~~~~~~~~~~~')
}
执行顺序：
第一圈：先执行父组件的created和beforemount函数；created和beforeMount再按子组件的使用顺序执行，
第二圈：折回去执行mounted，先子后父！
结论：
父组件准备挂载还没挂载时，子组件先完成挂载；
最后父组件再挂载！
2.父子组件更新生命周期
/*parents的销毁代码*/
beforeDestroy () {
console.log('============"parents beforDestroy"我第一=======')
},
destroyed () {
console.log('============"parents destroyed"我第四==========')
},
/*child的销毁代码*/
beforeDestroy () {
console.log('------------"child beforDestroy"我第二-------')
},
destroyed () {
console.log('------------"child destroyed"我第三-----------')
},执行顺序：
父beforeDestroy->子beforeDestroy->子destroyed->父destroyed
3.父子组件销毁生命周期
/*parents的销毁代码*/
beforeDestroy () {
console.log('============"parents beforDestroy"我第一=======')
},
destroyed () {
console.log('============"parents destroyed"我第四==========')
},
/*child的销毁代码*/
beforeDestroy () {
console.log('------------"child beforDestroy"我第二-------')
},
destroyed () {
console.log('------------"child destroyed"我第三-----------')
},执行顺序：
父beforeDestroy->子beforeDestroy->子destroyed->父destroyed
免责声明：本站所有文章内容,图片，视频等均是来源于用户投稿和互联网及文摘转载整编而成，不代表本站观点，不承担相关法律责任。其著作权各归其原作者或其出版社所有。如发现本站有涉嫌抄袭侵权/违法违规的内容,侵犯到您的权益，请在线联系站长,一经查实,本站将立刻删除。 本文来自网络,若有侵权，请联系删除，如若转载，请注明出处：https://yundeesoft.com/4700.html
