目录
前言：
一、生命周期流程图详解
、Created
2.编辑模板过程
、Mounted
、Updated
、Destroyed
二、生命周期代码
1.父子组件加载生命周期
2.父子组件更新生命周期
3.父子组件销毁生命周期
前言：
1、什么是vue生命周期？
Vue 实例从创建到销毁的过程，就是生命周期。也就是从开始创建、初始化数据、编译模板、挂载Dom→渲染、更新→渲染、卸载等一系列过程，我们称这是 Vue 的生命周期。
2、vue生命周期的作用是什么？
让我们在控制整个Vue实例的过程时更容易形成好的逻辑。
3、vue生命周期总共有几个阶段？
它可以总共分为8个阶段：创建前/后, 载入前/后,更新前/后,销毁前/销毁后
4、第一次页面加载会触发哪几个钩子？
第一次页面加载时会触发 beforeCreate, created, beforeMount, mounted 这几个钩子
5、DOM 渲染在 哪个周期中就已经完成？
DOM 渲染在 mounted 中就已经完成了。
一、生命周期流程图详解
、Created
2.编辑模板过程
、Mounted
、Updated
、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 () {
-
('============"parents created"：我第一============')
-
},
-
beforeMount () {
-
('============"parents befortemounted"我第二=======')
-
},
-
mounted () {
-
('============"parents mounted"我第九==============')
-
},
-
/*child的打印代码*/
-
created () {
-
('----------------"child created"我第三-------------')
-
},
-
beforeMount () {
-
('----------------"child beforemounted"我第四-------')
-
},
-
mounted () {
-
this.$(this)
-
('----------------"child mounted"我第七-------------')
-
},
-
/*grandson的打印代码*/
-
created () {
-
('~~~~~~~~~~~~~"grandson created"我第五~~~~~~~~~~~~~')
-
}
-
beforeMount () {
-
('~~~~~~~~~~~"grandson beforemounted"我第六~~~~~~~~~')
-
},
-
mounted () {
-
('~~~~~~~~~~~~"grandson mounted"我第八~~~~~~~~~~~~~~')
-
}
执行顺序：
第一圈：先执行父组件的created和beforemount函数；created和beforeMount再按子组件的使用顺序执行，
第二圈：折回去执行mounted，先子后父！
结论：
父组件准备挂载还没挂载时，子组件先完成挂载；
最后父组件再挂载！
2.父子组件更新生命周期
-
/*parents的销毁代码*/
-
beforeDestroy () {
-
('============"parents beforDestroy"我第一=======')
-
},
-
destroyed () {
-
('============"parents destroyed"我第四==========')
-
},
-
/*child的销毁代码*/
-
beforeDestroy () {
-
('------------"child beforDestroy"我第二-------')
-
},
-
destroyed () {
-
('------------"child destroyed"我第三-----------')
-
},
执行顺序：
父beforeDestroy->子beforeDestroy->子destroyed->父destroyed
3.父子组件销毁生命周期
-
/*parents的销毁代码*/
-
beforeDestroy () {
-
('============"parents beforDestroy"我第一=======')
-
},
-
destroyed () {
-
('============"parents destroyed"我第四==========')
-
},
-
/*child的销毁代码*/
-
beforeDestroy () {
-
('------------"child beforDestroy"我第二-------')
-
},
-
destroyed () {
-
('------------"child destroyed"我第三-----------')
-
},
执行顺序：
父beforeDestroy->子beforeDestroy->子destroyed->父destroyed