Vue生命周期

becoreCreate

实例创建之后, 进行数据观测(data observer)和事件(event)/侦听器(watcher)的配置之前同步调用, data, computed, watch, methods上面的方法和数据均不能访问

用途: 可以做一些loading展示, 骨架图展示

created

实例创建完成(const vm = new Vue()), 数据观测(data observer「Object.defineProperty」)和event/watcher事件已配置, 可访问data, computed, watch, methods上的方法和数据, 未挂载dom, 不能使用el, ref

用途: 可以在这个生命周期结束骨架图, 初始化数据,异步请求数据 |

beforeMount

在挂载开始之前调用, render函数首次调用

mounted

完成挂载dom和渲染, 即有了DOM且完成了双向绑定可访问dom节点, $ref

可以调用echarts获取数据并渲染,因为echarts需要一个真实的dom节点

beforeUpdate

数据更新时调用, 虚拟dom重新渲染和打补丁之前

updated

虚拟dom重新渲染之后, 一定不要在这里面操作数据, 否则会陷入死循环

beforeDestroy

实例销毁之前调用, 可以使用实例 | 销毁定时器等

destroyed

实例销毁之后调用, 此时已经访问不到数据

Activated

官网说其是在服务器端渲染期间不被调用，说白了其就是在挂载后和更新前被调用的。但如果该组件中没有使用缓存，也就是没有被包裹的话，activated是不起作用的。

Deactivated

keep-alive组件停用时调用