vue生命周期

先vue实例初始化，再进行以下过程：

1. beforeCreated ~ created 之间
   数据观测 (data observer) 和 event/watcher 事件配置之前被调用
   暴露属性和方法——就是vue实例自带的一些属性和方法
   注意：此时，无法获取 data中的数据、methods中的方法

2. created ~beforeMount
   模板编译完成，但未挂载
   注意：可以调用methods中的方法、改变data中的数据

3. mounted
   vue实例已经挂载到页面中，可以获取到el中的DOM元素，进行DOM操作

4.beforeUpdated()
数据更新时调用，发生在虚拟 DOM 重新渲染和打补丁之前。你可以在这个钩子中进一步地更改状态，这不会触发附加的重渲染过程。

5.updated()
组件 DOM 已经更新，所以你现在可以执行依赖于 DOM 的操作。

6.beforeDestroy()
实例销毁之前调用。在这一步，实例仍然完全可用。
使用场景：实例销毁之前，执行清理任务，比如：清除定时器等

7. destroyed()
   Vue 实例销毁后调用。调用后，Vue 实例指示的所有东西都会解绑定，所有的事件监听器会被移除，所有的子实例也会被销毁。

   
   image.png