Vue生命周期

vue生命周期

vue的生命周期分为8个阶段：实例创建前后、组件挂载前后、更新前后、销毁前后。

实例创建前后：

beforeCreated()——实例创建前。只有一些实例本身的事件和生命周期函数，vue实例的挂载元素DOM和数据对象 data 都为undefined，还未初始化。

created()——实例创建后。是最早使用data和methods中数据的钩子函数；但vue实例的数据对象data有了，DOM元素还没有。

组件挂载前后：

beforeMount——组件挂载前。指令已经解析完毕，内存中已经生成dom树。此时模板已经在内存中编译好了，但尚未挂载到页面中去，因此，页面还是旧的并未改变。

mounted()——组件挂载后。是在页面加载完成后执行的函数，加载的是节点，此时dom渲染完毕页面和内存的数据已经同步。

更新前后: 

beforeUptate() ——数据改变，视图更新前。当data的数据发生改变会执行这个钩子，内存中的数据是新的，页面是旧的。

updated()——视图更新之后。此时页面和data数据已经保持同步，都是最新的。

销毁前后：

beforeDestroy()——实例销毁之前。Vue实例就已经从运行阶段进入销毁阶段，此时，组建中所有data、methods、以及过滤器，指令等，都处于可用状态，此时还未真正执行销毁过程。

destroyed()——实例销毁之后。组件已经被完全销毁，此时组件中所有data、methods、以及过滤器，指令等，都已经不可用了。

 

在Vue3.0中的对生命周期做了一些改动：

beforeCreate -> setup() 开始创建组件之前，创建的是data和method

created -> setup()

beforeMount -> onBeforeMount 组件挂载到节点上之前执行的函数。

mounted -> onMounted 组件挂载完成后执行的函数

beforeUpdate -> onBeforeUpdate 组件更新之前执行的函数。

updated -> onUpdated 组件更新完成之后执行的函数。

beforeDestroy -> onBeforeUnmount 组件挂载到节点上之前执行的函数。

destroyed -> onUnmounted 组件卸载之前执行的函数。