前端面试题（5）Vue生命周期

Vue生命周期

vue的生命周期就是vue实例的创建运行销毁的一个过程，在不同的阶段会触发不同的函数

基本的钩子：

1. beforeCreate：vue实例的挂载元素，el和数据data都为undefined，还没被初始化。可以在这个周期添加loading事件
2. Created：vue实例的数据data有了，el还没有，DOM未生成。结束了loading，还可以从服务器获取一些初始化的数据
3. beforeMount：vue实例的$el和data都初始化了，但还是虚拟的dom节点，页面还没被渲染。先把坑占住，到后面mounted挂载的时候再把值渲染进去
4. mounted：vue实例挂载完成，虚拟的DOM变成真实的DOM，在这发起后端请求，拿回数据，配合路由钩子做一些事情。可操作DOM节点
5. beforeUpdate：data中数据发送改变，还没有重新渲染之前调用
6. update：data中的数据发生改变，重新渲染之后调用，数据更新时，做一些处理（watch监听）
7. beforeDestroy：组件销毁前调用，给用户提示，比如“您确定删除xxx吗？”移除定时器或者事件绑定
8. destroy：组件销毁后调用，vue实例解除了事件监听以及dom的绑定（无响应了），但是dom节点依旧存在，当前组件已被删除，清空相关内容

还有另外两个：

1. activated：使用keep-alive，组件被激活时调用，每次进入都会执行钩子中的函数
2. deactivated：使用keep-alive，组件被移除时调用