vue 生命周期

什么是vue生命周期

Vue 实例从开始创建、初始化数据、编译模板、挂载Dom→渲染、更新→渲染、销毁等一系列过程，称之为 Vue 的生命周期，共八个阶段。

作用: 生命周期中有多个事件钩子，在控制整个 Vue实例 的过程时更容易形成好的逻辑。

beforeCreate: 完成实例初始化，this 指向被创建的实例，data，computed，watch，mothods方法 和 数据都不可以访问，数据观测之前(data observer)被调用。

created: 实例创建完成，data，computed，watch，methods 可被访问，未挂载Dom，可对 data进行操作，操作 Dom 需放到 nextTick中。

beforeMount: 有了el，找到对应的template 编译成 render 函数

mounted: 完成挂载 Dom 和 渲染，可对 Dom 进行获取节点等操作，可发起后端请求拿到数据。

beforeUpdate: 数据更新时调用，发生在虚拟Dom 重新渲染 和 打补丁之前之调用。

updated: 组件 Dom 已完成更新，可执行依赖的 Dom 操作，不要操作数据会陷入死循环。

beforeDestroy: 实例销毁之前调用，可进行优化操作，如销毁定时器，解除绑定事件。

destroyed: 组件已经被销毁，事件监听器和子实例都会被移除销毁。

首次页面加载会触发四个钩子函数: beforeCreate, created, beforeMount, mounted

且 DMO 渲染在 mounted 中就已经完成了。

可以使用 on('hook:') 或once('hook:') 来简化生命周期的注册