Vue的生命周期函数

创建期间的生命周期函数

beforeCreate

实例刚在内存中被创建出来，此时还没有初始化好 data 和 methods 属性。

作用

执行 loading 动画。

created

实例已经在内存中创建完毕，data 和 methods 等属性也已经创建完成。但此刻还没有开始编译模板。

作用

• 结束掉 loading 动画
• 做一些初始化工作，比如函数自执行，发起异步请求获取数据

beforeMount

此刻已经完成了模板的编译，但还没有挂载到页面上。换句话说，此时页面中类似 的语法还没有被替换成真正的数据。

mounted

此刻已经将编译好的模板挂载到了页面中指定的容器中显示。用户已经可以看到渲染好的页面了。

作用

• 由于此刻已经把模板挂载到了页面，所以能够在此钩子函数中获取 DOM 节点。
• 此函数中也能发起异步请求

运行期间的生命周期函数

beforeUpdate

状态更新之前执行此函数，此刻 data 中的状态值是最新的，但是界面上显示的数据还是旧的。因此此时还没有开始重新渲染 DOM 节点。

updated

实例更新完毕后调用此函数，此刻 data 中的状态值和界面上显示的数据，都已经完成了更新，界面已经被重新渲染好了。

销毁期间的生命周期函数

beforeDestroy

实例销毁之前调用。此刻实例仍然完全可用。

作用

一切你想要在组件销毁之前做事，例如弹出确认窗：“你确认删除XXX吗？”

destroyed

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