每个组件都可能会经历从创建、挂载、更新、卸载等一系列的过程; 在这个过程中的某一个阶段,有可能会想要添加一些属于自己的代码逻辑,但是我们如何可以知道目前组件正在哪一个过程呢?因此Vue给我们提供了组件的生命周期函数。
生命周期函数是一些钩子函数,在某个时间会被Vue源码内部进行回调,通过对生命周期函数的回调,我们可以知道目前组件正在经历什么阶段,那么我们就可以在该生命周期中编写属于自己的逻辑代码了;
vue3中可以使用setup来替代data、methods、computed、watch等等这些选项,当然也可以替代生命周期函数,那么如何在setup函数中去使用生命周期函数呢?可以使用直接导入的onX函数注册生命周期钩子,最后我们需要注意一下vue3和vue2版本生命周期的具体变化。
选项式API composition API
beforeCreate(移除) setup
created(移除) setup
beforeMount onBeforeMount
mounted onMounted
beforeUpdate onBeforeUpdate
updated onUpdated
beforeUnmount onBeforeUnmount
unmounted onUnmounted
之所以在vue3中会删除前两个生命周期函数是因为setup函数本身就是围绕着beforeCreate和created俩个生命周期函数执行的,所以不需要再去显式地定义它们。