【vue】关于vue里的生命周期钩子函数浅析

关于vue里的生命周期钩子函数浅析

一、什么是生命周期?什么是生命周期钩子函数?
生命周期：从诞生到销毁的过程，从开始创建、初始化数据、编译模板、挂载Dom→渲染、更新→渲染、销毁等一系列过程，称之为 Vue 的生命周期。它内部提供了8个回调函数，在对应的生命阶段会调用，这些就叫生命周期钩子函数。

总共分为 8 个阶段创建前/后，载入前/后，更新前/后，销毁前/后。创建前/后：

1. beforeCreate(创建前):Vue实例(或组件)创建并未初始化时触发,此时数据对象data和$el还没有挂载上来,都为undefined,所以在这里访问不到data数据
2. created(创建后):,data数据对象已经挂载上去,但$el还没有,触发该钩子,代表可以访问data数据,最早能访问data数据的,就在created
3. beforeMount(载入前):在DOM渲染之前触发,Vue实例的el和data都初始化了
4. mounted(载入后):DOM渲染完毕触发,Vue实例挂载完成,data数据对象成功渲染,这里能访问DOM元素,最早能访问DOM元素,就在mounted
5. beforeUpdate(更新前):数据发生改变,并且DOM还没发生变化之前触发
6. updated(更新后):数据发生改变,并且DOM发生变化后触发
7. beforeDestroy(销毁前):销毁之前触发
8. destroyed(销毁后):销毁完成触发