Vue生命周期是指vue实例对象从创建之初到销毁的过程。
vue2的生命周期如下:
beforeCreate created beforeMount mounted beforeUpdate updated beforeDestroy destroyed activated deactivated errorCaptured
vue3新增了一个setup生命周期函数,setup执行的时机是在beforeCreate生命函数之前执行,因此在这个函数中是不能通过this来获取实例的;同时为了命名的统一,将beforeDestroy改名为beforeUnmount,destroyed改名为unmounted:
beforeCreate // 建议使用setup代替 created // 建议使用setup代替 setup beforeMount mounted beforeUpdate updated beforeUnmount unmounted
生命周期示例代码如下:
import { onBeforeMount, onMounted, onBeforeUpdate, onUpdated, onBeforeUnmount, onUnmounted, ref } from 'vue' export default { setup () { // 其他的生命周期 onBeforeMount (() => { console.log("App ===> 相当于 vue2.x 中 beforeMount") }) onMounted (() => { console.log("App ===> 相当于 vue2.x 中 mounted") }) // 注意,onBeforeUpdate 和 onUpdated 里面不要修改值 onBeforeUpdate (() => { console.log("App ===> 相当于 vue2.x 中 beforeUpdate") }) onUpdated (() => { console.log("App ===> 相当于 vue2.x 中 updated") }) onBeforeUnmount (() => { console.log("App ===> 相当于 vue2.x 中 beforeDestroy") }) onUnmounted (() => { console.log("App ===> 相当于 vue2.x 中 destroyed") }) return { } } }