生命周期 - Vue3

通过生命周期，我们可以在合适的适合执行自己需要的操作。

选项式API

组合式API映射

下表为 Options API 和 Composition API 之间的映射，包含如何在 setup () 内部调用生命周期钩子：

Options API（选项式 API ）	变化	Composition API（组合式 API ）
beforeCreate	→	setup()
created	→	setup()
beforeMount	→	onBeforeMount
mounted	→	onMounted
beforeUpdate	→	onBeforeUpdate
updated	→	onUpdated
beforeDestroy	→	onBeforeUnmount
destroyed	→	onUnmounted
errorCaptured	→	onErrorCaptured

因为 setup 是围绕 beforeCreate 和 created 生命周期钩子运行的，所以不需要显式地定义它们。换句话说，在这些钩子中编写的任何代码都应该直接在 setup 函数中编写。

这些函数接受一个回调函数，当钩子被组件调用时将会被执行:

setup() {
...
    // 组件被挂载时，我们用 onMounted 钩子记录一些消息
    onMounted(() => console.log('component mounted!'));
...
}

setup

setup()在创建组件之前执行。

• setup相当于之前的created周期：创建时
• onBeforeMount：DOM即将挂载
• onMounted：DOM挂载完毕
• onBeforeUpdate：DOM即将更新
• onUpdated：DOM更新完毕
• onBeforeUnmount：即将销毁
• onUnmounted：销毁完毕

使用方法

 setup () {
    onBeforeMount(() => {
      console.log("DOM即将挂载");
    })
    onMounted(() => {
      console.log("DOM挂载完毕");
    })
    // onBeforeUpdate(() => {})    DOM即将更新
    // onUpdated(() => {})   DOM更新完毕
    // onBeforeUnmount(() => {})   即将销毁
    // onUnmounted(() => {})   销毁完毕
     

    return {}
  }

用法一：若您和我一样，为了练习，您可以在setup中，通过给方法添加Vue.来使用该方法

Vue.onMounted(() => console.log('我是onMounted'));

方法二：若您在项目中开发，可直接使用，无需添加Vue.

onMounted(() => console.log('我是onMounted'));

参考文章

• Vue3 组合式 API
• vue基础 - 24 （vue3 生命周期
• Vue3.x中的生命周期和钩子函数（部分）