什么是Vue的生命周期
先看一看官方文档对Vue生命周期的说明：
每个 Vue 实例在被创建时都要经过一系列的初始化过程——例如，需要设置数据监听、编译模板、将实例挂载到 DOM 并在数据变化时更新 DOM 等。同时在这个过程中也会运行一些叫做生命周期钩子的函数，这给了用户在不同阶段添加自己的代码的机会。
简单来说就是Vue实例和组件在被创建的时候所经历的过程，Vue通过生命周期钩子将这些过程暴露出来，方便开发者针对组件的状态做出编码
Vue生命周期的顺序
beforeCreate->created->beforeMount->mounted->beforeDestroy->destroyed
下面用代码展示一下：
子组件用来显示生命周期：
<template>
<div>
{{msg}}
<button @click="msg='组件更新了'">更新组件内容</button>
</div>
</template>
<script>
export default {
name: 'HelloWorld',
data(){
return {
msg:"测试"
}
},
beforeCreate() {
console.log("组件创建前-beforeCreate")
},
created() {
console.log("组件创建后-created")
},
beforeMount() {
console.log("组件挂载前-beforeMount")
},
mounted() {
console.log("组件挂载完成-mounted")
},
beforeDestroy() {
console.log("组件销毁前-beforeDestroy")
},
destroyed() {
console.log("组件销毁-destroyed")
},
beforeUpdate() {
console.log("组件更新前-beforeUpdate")
},
updated() {
console.log("组件更新后-updated")
}
}
</script>
父组件用来销毁子组件：
<template>
<div id="app">
<img alt="Vue logo" src="./assets/logo.png">
<button @click="deleteZ()">销毁组件</button>
<HelloWorld v-if="helloShow" msg="Welcome to Your Vue.js App"/>
</div>
</template>
<script>
import HelloWorld from './components/HelloWorld.vue'
export default {
name: 'app',
components: {
HelloWorld
},
data(){
return {
helloShow:true
}
},
methods:{
deleteZ(){
this.helloShow = !this.helloShow;
}
}
}
</script>
项目启动之后如图：
控制台打印如下：
可以看到一共触发了4个生命周期，
beforeCreate, created,beforeMount,mounted
点击更新组件内容按钮之后：
可以看到控制台又打印了两条记录，触发了组件的
beforeUpdate,updated最后点击销毁组件按钮：
可以看到触发了销毁的生命周期，至此，Vue的8个生命周期全部跑完，下面将对每个生命周期进行详细分析
Vue生命周期详解
1.beforeCreate
作为Vue实例创建过程中的第一个生命周期，它到底有什么用那？还记得有次面试，面试官问我，“这个boforeCreate有什么用那？” 我想了想，就说“没有什么用啊”，然后就没有然后了，所以我特地去查了查，发现确实并没有什么卵用，可能是太菜了吧，如果有大佬读到这篇文章，还望评论告诉我一下它到底有啥用！
我们还是看看这个生命周期钩子可以访问到实例的那些内容吧！
修改刚才写的beforeCreate生命周期钩子函数：
beforeCreate() {
console.log("组件创建前-beforeCreate")
console.log(this);
console.log(this.$el);
console.log(this.$data);
console.log(this.msg);
}
运行效果：
可以看到在
beforeCreate中只能访问到this，也就是Vue实例，data和DOM都不能拿到，所以不能去修改data和操作DOM，如果非要去操作，可以用$nextTick等DOM渲染完成之后操作
2.created
继续修改代码：
created() {
console.log("组件创建后-created")
console.log(this);
console.log(this.$el);
console.log(this.$data);
console.log(this.msg);
}
我们看一看控制台打印：
可以看到在这个生命周期钩子中已经可以访问到
data中定义的数据，可以进行初始数据的获取，在这里更改数据不会触发beforeUpdate,updated两个生命周期钩子（同步的情况下），异步更改data数据就要看走起是否已经走到mounted生命周期了，如果走到mounted生命周期，就会触发更新
3.beforeMount
接着修改代码：
beforeMount() {
console.log("组件挂载前-beforeMount");
console.log(this);
console.log(this.$el);
console.log(this.$data);
console.log(this.msg);
}
从控制台的打印来看，似乎和
created生命周期打印的东西差不多？╮(￣▽￣)╭，其实不然，在这个生命周期钩子触发的时候，虚拟DOM已经创建完成，马上就要渲染了，在这里更改数据依然不会触发更新的生命周期，情况和created一样
4.mounted
我们再来看一看mounted生命周期：
mounted() {
console.log("组件挂载完成-mounted")
console.log(this);
console.log(this.$el);
console.log(this.$data);
console.log(this.msg);
}
控制台打印：
可以看到在mounted生命周期钩子触发的时候，真实的DOM已经渲染完成，组件已经完全渲染完成，在此处更改data就会触发更新
5.beforeUpdate和updated
当vue发现data中的数据发生了改变，会触发对应组件的重新渲染，先后调用beforeUpdate和updated钩子函数。切记，千万不要在beforeUpdate和updated钩子函数中更改data的数据，否则会进入死循环！
6.beforeDestroy和destroyed
beforeDestroy钩子函数在实例销毁之前调用。在这一步，实例仍然完全可用。可以用来清除一些定时器，或者做一些状态的保存
destroyed钩子函数在Vue 实例销毁后调用。调用后，Vue 实例指示的所有东西都会解绑定，所有的事件监听器会被移除，所有的子实例也会被销毁。也就是说这个组件木得了
至此，Vue的生命周期钩子已经说了一遍了，仅代表个人理解，有理解的不对的地方欢迎各位大佬指正，下面放上完整代码
<template>
<div id="msg">
{{msg}}
<button @click="msg='组件更新了'">更新组件内容</button>
</div>
</template>
<script>
export default {
name: 'HelloWorld',
data(){
return {
msg:"测试"
}
},
beforeCreate() {
console.log("组件创建前-beforeCreate")
console.log(this);
console.log(this.$el);
console.log(this.$data);
console.log(this.msg);
},
created() {
console.log("组件创建后-created")
console.log(this);
console.log(this.$el);
console.log(this.$data);
console.log(this.msg);
//this.msg="test"
// setTimeout( () => {
// this.msg = "test2"
// },1000)
},
beforeMount() {
console.log("组件挂载前-beforeMount");
console.log(this);
console.log(this.$el);
console.log(this.$data);
console.log(this.msg);
},
mounted() {
console.log("组件挂载完成-mounted")
console.log(this);
console.log(this.$el);
console.log(this.$data);
console.log(this.msg);
},
beforeDestroy() {
console.log("组件销毁前-beforeDestroy")
},
destroyed() {
console.log("组件销毁-destroyed")
},
beforeUpdate() {
console.log("组件更新前-beforeUpdate")
},
updated() {
console.log("组件更新后-updated")
}
}
</script>
再放上生命周期图示
