在浏览器创建实例的过程中便会触发 VUE 生命周期中的钩子，VUE 框架的使用很大程度上依赖于生命周期中的钩子。
想要触发他们，首先需要实例化 VUE 对象
const app = new Vue({...})
下面是 VUE 官网给出的生命周期图
其中各个钩子的执行如下
创建前/后(beforeCreate/created)
beforeCreate 发生在组件实例化之后，数据观测(data observer)和 event/watcher 事件配置之前。此时数据还不是响应式，更新数据 data 数据无效，无法访问 DOM。
created 发生在组件实例创建之后，已完成配置：数据观测(data observer)、计算属性、方法、watch/event 事件回调。此时数据是响应式，不能访问。网络数据请求适合放在此处。
载入前/后(beforeMount/mounted)
beforeMount 发生在 DOM 挂载之前。此时模板或渲染函数已经编译好，相关的 render 函数首次被调用，不能访问 DOM。
mounted 发生在组件挂载到 DOM 之后。此时可以访问 DOM 节点，例如 this.$el，DOM 相关的操作适合放在此处。
更新前/后(beforeUpdate/updated)
beforeUpdate 发生在组件数据变化之后 DOM 更新之前。此时访问 DOM 是数据变化前对应的 DOM。
destoryed 发生在组件数据变化导致的 DOM 更新之后。此时可访问更新后的 DOM 节点，DOM 和 data 数据一致。
销毁前/后(beforeDestoryed/destoryed)
beforeDestoryed 发生在组件实例销毁之前。此时实例仍然完全可用。
destoryed 发生在组件实例销毁之后。此时组件所有东西都已绑定，所有的事件监听器都已被移除，还能访问 DOM。
执行过程
当浏览器遇到上面这段代码时，便会自动执行
beforeCreate() => created() => beforeMount() => mounted()
当某个元素的属性值更给时，便会执行
beforeUpdate() => updated()
当销毁这个实例时，便会执行
beforeDestroy() => destoryed()
其他钩子
activated
keep-alive 组件激活时调用，该钩子在服务器端渲染时不可用。
deactivated
keep-alive 组件停用时调用，改钩子在服务器端渲染时不可用。
keep-alive
用于对组件进行缓存(保存状态，如列表滑到的位置)，从而节省性能，是一个抽象组件。
引用文章与学习链接
https://ustbhuangyi.github.io/vue-analysis/components/lifecycle.html#beforemount-mounted
https://juejin.im/post/5c9db9af518825370e00f471
