Vue生命周期

生命周期介绍

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

简单说就是一个组件从开始到最后消亡所经历的各种状态，就是一个组件的生命周期

大体分为四个阶段（过程）

创建-挂载-更新-销毁。beforeCreate、create、beforeMount、mounted、beforeUpdate、update、beforeDestroy、destroyed、activated、deactivated，

其中前八个较为常用，最后两个一般应用于。

---

beforeCreate（创建前/ 初始化页面前 ）

详情：此阶段为实例化初始之后，this指向创建的实例，此时数据观察的机制都未形成，不能获得DOM节点，data，computed，watch、methods上的方法和数据均都不能访问。

场景：可以加入 loading 事件；在服务器端的应用场景中，这个时候发送数据请求比较多一些

created（创建后/ 初始化界面后 ）

详情：此阶段实例已经创建，完成数据（data、props、computed）的初始化导入依赖项，可以访问data、computed。watch、methods上的方法和数据。

场景：结束 loading 事件；推荐这个时候发送请求数据，尤其是返回的数据与绑定事件有关时

beforeMount（挂载前/渲染dom前）

详情：虽然得不到具体的DOM元素，但vue的根节点已经创建，下面vue对DOM的操作将围绕这个根元素继续进行。

场景：可以发送数据请求

注意：在服务器端渲染期间不会被调用

mounted（挂载后渲染dom后）

详情：完成创建vm.$el和双向数据绑定，完成DOM挂载和渲染，可以在此函数过程对挂载的DOM进行操作，例如请求后端拿回数据，配合路由钩子处理一些事情。

场景：获取 el 中 DOM 元素，进行 DOM 操作；如果返回的数据操作依赖 DOM 完成，推荐这个时候发送数据请求

注意：在服务器端渲染期间不会被调用

beforeUpdate（更新数据前）

详情：可以在更新前访问现有的DOM，例如手动移除添加的事件监听器。

场景：挂载完成之前访问现有DOM，比如手动移除已添加的事件监听器；也可以进一步修改数据

注意：在服务器渲染期间不会被调用，只有初次渲染会在服务端调用

updated（更新数据后）

详情：数据更新，完成虚拟DOM的重新渲染。

场景：可执行依赖与DOM的操作

注意：服务器端渲染期间不会被调用

beforeDestory（销毁前/卸载组件前）

详情：可以做一些删除提示，例如，您确定要删除xx吗？

场景：实例销毁之前，执行清理任务，比如：清除定时器等

注意：服务器端渲染期间不会被调用

destoryed（销毁后/卸载组件后）

详情：当前组件已经删除，销毁监听事件、组件、子实例也被销毁，此时无法操作里面的任何东西。

场景：提示已删除

注意：服务器端渲染期间不会被调用

activated

详情：在使用vue-router时有时需要使用来缓存组件状态，此时created钩子不会被重复触发，如果子组件需要在每次加载的时候进行操作，可以使用activated钩子触发。

注意：服务器端渲染期间不会被调用

deactiated

详情：被移除时使用。

注意：服务器端渲染期间不会被调用

扩展阅读：vue.js服务器端渲染指南

---

执行顺序：

    父组件开始执行到beforeMount 然后开始子组件执行，最后是父组件mounted。

    如果有兄弟组件，父组件开始执行到beforeMount，然后兄弟组件依次执行到beforeMount，然后按照顺序执行mounted，最后执行父组件的mounted。

    当子组件挂载完成后，父组件才会挂载。

    当子组件完成挂载后，父组件会主动执行一次beforeUpdate/updated钩子函数（仅首次）父子组件在data变化中是分别监控的，但是更新props中的数据是关联的。

    销毁父组件时，会先销毁子组件。

    兄弟组件的初始化（mounted之前）是分开进行的，挂在是从上到下依次进行。当没有数据关联时，兄弟组件之间的更新和销毁是互不关联的。