目录直通车
生命周期也叫钩子。
我在官网找了一张图，千万不要觉得这张图好复杂就不去认真的分析了，反而去看别人写的博客，反而越整越懵。
就下面这张图，为大家详解生命周期，然后贴出实例代码。
生命周期说白了就是一套流程，而这套流程里面的方法就会有先后顺序的执行（调用了就执行，不调用就不会执行），整个流程分为三个步骤。
请看下图：
一、 分三步流程解读
1、初始化显示
new Vue() 表示创建一个Vue实例，这里假设vm是新建的实例。
按照图上的流程是：beforeCreate() ➡ created() ➡ beforeMount() ➡ mounted()
2、更新状态
beforeUpdate() ➡ updated()
3、销毁Vue实例
vm.$destory()
beforeDestory() ➡ destoryed()
beforeDestory(): 做收尾工作（就是在结束之前做一些事情，如: 清除定时器）。
二、 常用的生命周期方法
mounted，初始化之后就会立即调用。
created()/mounted()：发送ajax请求, 启动定时器等异步任务。
三、 完整流程解读
① created表示已经创建结束了（过去式嘛），再创建完成之前会做一些准备工作（比如说，监视数据，数据到最后都会实现数据绑定的，会用到set用于监视数据的变化），在做准备工作之前会先调用beforeCreate()。
② created之后会判断是否存在“el”的配置，这里会涉及到一个自动挂载页面和手动挂载页面的概念，如果有el的话会自动挂载，指定了el之后，就指定了Vue管理的一片区域，假设没有指定区域的话，那vue为谁服务呢？当然谁都不服务了。所以另外一种方式，就需要手动调用 vm.$mount(el) 指定一片区域，基本上是不会这么做的。
③ 接着执行到判断我们是否有 “template”这个配置，如果没有就直接编译 el 这篇区域的HTML代码作为模板。要注意Vue转换成的HTML代码是没有直接挂载到页面上去的，它在内存里编译好了以后，才会全部挂载到页面上显示。在挂载之前，就有beforeMount()这个函数，挂载完成之后调用Mounted()。
④ 下面来到“更新”的一部分，挂载数据之后在页面更新之前会调用beforeUpdate()，页面发生变化之后会调用Updated()。
⑤ 最后执行到“死亡” ，当调用vm.$destory()的时候，所有的组件都会移除，在移除之前会调用beforeDestory() 来做一些收尾的工作，比如说前面也提到了清除定时器，死亡之后再调用destory()。
实例代码
打开浏览器的开发者然后调试工具分析代码。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>生命周期</title>
</head>
<body>
<div id="test">
<button @click="destroyVue">destory Vue</button>
<p v-if="isShow">Hello,World</p>
</div>
<script type="text/javascript" src="../js/vue.js"></script>
<script type="text/javascript">
new Vue({
el: '#test',
data: {
isShow: true
},
mounted () {
// 执行异步任务
this.intervalId = setInterval(() => {
console.log('-----')
this.isShow = !this.isShow
}, 1000)
},
beforeDestroy() {
console.log('beforeDestroy()')
// 执行收尾的工作
clearInterval(this.intervalId)
},
methods: {
destroyVue () {
this.$destroy()
}
}
})
</script>
</body>
</html>完整生命周期实例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>生命周期</title>
</head>
<body>
<div id="test">
<button @click="destroyVue">destory vue</button>
<p v-if="isShow">Hello,world!</p>
</div>
<script type="text/javascript" src="../js/vue.js"></script>
<script type="text/javascript">
new Vue({
el: '#test',
data: {
isShow: true
},
beforeCreate() {
console.log('beforeCreate()')
},
created() {
console.log('created()')
},
beforeMount() {
console.log('beforeMount()')
},
mounted () {
console.log('mounted()')
// 执行异步任务
this.intervalId = setInterval(() => {
console.log('-----')
this.isShow = !this.isShow
}, 1000)
},
beforeUpdate() {
console.log('beforeUpdate()')
},
updated () {
console.log('updated()')
},
beforeDestroy() {
console.log('beforeDestroy()')
// 执行收尾的工作
clearInterval(this.intervalId)
},
destroyed() {
console.log('destroyed()')
},
methods: {
destroyVue () {
this.$destroy()
}
}
})
</script>
</body>
</html>生命周期的原理的话，经得起折腾的朋友去了解一下吧~
如果您在阅读的过程中遇到了问题，欢迎评论留言告诉我。
最后，感谢您的阅读！