【学习笔记31】Vue的生命周期

记录一下自己对生命周期的理解。

生命周期概念：  vue每个组件都是独立的，每个组件都有一个属于它的生命周期，从一个组件创建、数据初始化、挂载、更新、销毁，这就是一个组件所谓的生命周期。

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

生命周期包括：beforeCreate,created,

beforeMount,mounted,

beforeUpdate,updated,

beforeDestroy,destroyed

这八个过程，它们也叫做钩子函数，其中beforeCreate,created,beforeMount,mount这四个步骤只进行一次，后四个步骤在整个生命周期中会执行多次，因为它们和数据的变化有关。

https://cn.vuejs.org/images/lifecycle.pnghttps://cn.vuejs.org/images/lifecycle.png
上面网址为官方生命周期过程图，以下是我自己的理解

beforeCreate：Vue实例还没完全创建，没有el属性，无法访问methods，data，computed等属性和方法，因此也无法通过this调用data中的数据

create：此时已创建实例，此时仍没有el属性，但有了methods，data，computed等属性和方法了，能够使用this，然而该周期并不能对实例化过程进行拦截，所以若向后端发送请求是有风险的

beforeMount：该周期对el，template进行了判断并对其进行了初始化，已经有了虚拟DOM，只是还没有进行挂载

mounted：渲染已经完成，有了el,template，也成功挂载到虚拟DOM上了

以上四个周期只会进行一次

beforeUpdate：该周期在数据更新之前被调用

updated：该周期在数据更改导致虚拟DOM重新渲染和打补丁时被调用

beforeDestroy：该周期在实例被销毁之前调用，但此时实例仍然可以使用，这一步还可以用this来获取实例，一般在这一步做一些重置的操作，比如清除掉组件中的定时器 和 监听的dom事件

destroyed：该周期在实例销毁之后调用，调用后，所有的事件监听器和子实例都会被销毁，但在服务器端渲染期间不被调用