版本：vue2.X、ant design vue 1.7.8

1.vue的生命周期是什么？

答：vue的生命周期就是一个组件从创建开始的初始化、挂载、更新等步骤后，最后被卸载的过程；

相当于现实生活中拼图游戏，
先在初始化阶段准备拼图的图板、零散的拼图；
在挂载的阶段把拼图一个一个的拼凑成目标的图案；
在更新阶段相当于把拼图里有部分拼凑错图的扣出来或额外diy新的图放到需要放的地方；
在卸载阶段相当于把拼凑好的拼图欣赏完后再拆散收起来的过程

2.生命周期钩子函数分别有：

挂载阶段：
beforeCreate      //数据检测和数据代理的创建之前
created              //数据检测和数据代理的创建创建完毕
beforeMount      //挂载之前
mounted            //挂载完毕
 
更新阶段：
beforeUpdate    //更新之前
update              //更新完毕
 
卸载（销毁）阶段：
beforeDestroy   //卸载之前
destroyed         //卸载完毕
 
缓存(KeepAlive）阶段：
activated           //进入该组件的页面
deactivated       //停用或离开时（但组件并未被销毁）
 
错误提示阶段：
errorCaptured   //捕获子孙组件的错误时
errorHandler     //指定组件在渲染和观察期间未捕获错误处理函数

2.1计算属性

computed         //计算属性
watch              //数据监听

3.生命周期执行顺序

按官方文档的示例图解

在页面实践，代码如下
home父页面

homePage子页面

控制台的截图，打印顺序如下：

首先是beforeCreate创建之前，当前组件实例还未创建，通过用于创建开发初始化任务

再是watch数据监听，当前watch设置了immediate为true,该回调将会在侦听开始之后立即调用，默认是false

再是created创建完毕，在这个状态中我们的el，也就是Dom元素依旧是拿不到的，但是我们已经可以拿到data了，这意味着 created已经将数据加载进来了 ，通常这里用于发送异步数据请求

再是beforeMount挂载之前，DOM节点未创建，未执行渲染、更新，所以在这之前el还是拿不到

再是computed 计算属性，可为函数或对象{{get,set}}，一般函数即可；不会书写set,适合一个值受多个数据影响，一般会返回结果；具备缓存属性，多次在模板中使用只会计算一次；

//如果有子级组件
再是子组件beforeCreate
再是子组件create
再是子组件errorCaptured捕获子孙组件的错误时，提示了子组件哪里有问题
再是子组件beforeMount
再是子组件beforeMount
再是子组件activated

最后是mounted挂载完毕，DOM节点创建完成，通常可以使用$refs、$el来获取DOM节点，所以此阶段可以拿到el了。我们可以用console.dir去打印一些我们需要的元素的属性。

然后在更新阶段，在vue页面有如下代码

 
{{ message }}
csdn博主：{{ csdnName }}

然后我们在input输入框输入更改message数据，截图如下

//如果有计算属性watch
则会进入watch数据监听状态，可为函数或对象{{handler,immediate,deep}};默认初始化不会执行，除非将immediate设置为true；适合一个值影响多个数据，执行多个操作，可不返回任何结果；适合执行异步或开销比较大的操作

每当我们去改变页面元素的时候，就会进入更新阶段，也就是beforeUpdate,updated这两个状态。
beforeUpdate是更新前，通常用于获取更新前的各种状态
update是更新后，所有状态都是最新的

如果有子组件，则进行进入、离开（停用）子组件顺序

当点击隐藏/显示子组件按钮

先是进入父级组件beforeUpdate
再是进入子组件activated
再是进入子组件beforeDestroy
再是进入子组件destroyed
再是进入父级组件activated

然后在卸载（销毁）阶段，在vue父级新有下代码

//在template代码块增加如下按钮点击卸载//在script增加一个方法methods: {showtap() {this.$destroy('home')},},

点击卸载按钮后截图如下：

beforeDestroy销毁前状态，在销毁前元素、data都是可以打印出来的，通常用于定时器或取消订阅等，此时组件实例仍然存在。

//如果有子组件
则进入activated
再是子组件beforeDestroy 销毁前状态
再是子组件destroyed 销毁完成状态

destroyed销毁完成的状态也是什么都可以打印出来，组件已销毁，此时组件实例不存在

beforeDestroy和destroyed，都是我们离开这个组件才会被调用的生命周期。

4.总结

生命周期：

又名：生命周期回调函数、生命周期函数、生命周期钩子。
是什么：Vue在关键时刻帮我们调用的一些特殊名称的函数。
生命周期函数的名字不可更改，但函数的具体内容是程序员根据需求编写的。
生命周期函数中的this指向是vm 或 组件实例对象。
 
常用的生命周期钩子：

mounted: 发送ajax请求、启动定时器、绑定自定义事件、订阅消息等【初始化操作】。
beforeDestroy:清除定时器、解绑自定义事件、取消订阅消息等【收尾工作】。
 
关于销毁Vue实例
销毁后借助Vue开发者工具看不到任何信息。
销毁后自定义事件会失效，但原生DOM事件依然有效。
一般不会在beforeDestroy操作数据，因为即便操作数据，也不会再触发更新流程了。
 
官网：https://cn.vuejs.org/api/options-lifecycle.html#beforecreate