Vuejs 生命周期

每个 Vue 实例在被创建时都要经过一系列的初始化过程。如需要设置数据监听、编译模板、将实例挂载到 DOM 并在数据变化时更新 DOM 等。同时在这个过程中也会运行一些叫做生命周期钩子的函数，这给了用户在不同阶段添加自己的代码的机会。

我们创建一个 Vue 实例，并在每个阶段验证 Vue 的生命周期函数。

Vue 实例的生命周期函数并不放置在 methods里，而是单独放置在 Vue 的实例之中。

生命周期函数就是Vue实例在某一个时间点会自动执行的函数

• Vue 初始化：beforeCreate 、created

• 页面渲染之前：beforeMount

• 挂载到页面之后：mounted

• 当数据发生改变时：beforeDestroy(重新渲染之前) 、destroyed(重新渲染之后)

• vm.$destroy()被调用时，即组件被销毁时：beforeDestroy 、destroyed

下图展示了 Vue 实例的声明周期，结合上一节的示例，可以更好的理解 Vue 的这八个声明周期钩子。

除此之外 Vue 还拥有 activated、deactivated 、errorCaptured 这三个生命周期钩子。

当页面重新显示的时候，执行。搭配 keep-alive、localStrage 和临时变量做页面性能优化。

当页面即将被隐藏或替换成其他页面时，执行。可以用来解绑在 activated 上绑定的全局事件。

作者：evenyao
链接：https://www.jianshu.com/p/c8a7306aa844