VUE 生命周期

       在浏览器创建实例的过程中便会触发 VUE 生命周期中的钩子，VUE 框架的使用很大程度上依赖于生命周期中的钩子。

---

想要触发他们，首先需要实例化 VUE 对象

    const app = new Vue({...})

---

下面是 VUE 官网给出的生命周期图

a-6-1.PNG

其中各个钩子的执行如下

---

创建前/后(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()

a-6-2.PNG

当某个元素的属性值更给时，便会执行

    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