VUE 生命周期

作者: 94very | 来源:发表于2019-07-05 22:29 被阅读0次

vue生命周期
vue生命周期
Vue生命周期
vue3较vue2的特别之处 - 生命周期
前端之路-VUE面试题
Vue.js入门（二）：生命周期
vue生命周期
Vue 生命周期
vue学习记录
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
       用于对组件进行缓存(保存状态，如列表滑到的位置)，从而节省性能，是一个抽象组件。