Npcink Blog
切换菜单

生命周期 - Vue3

vue 中的生命周期一览

最后更新于
本页目录4 节

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

选项式 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
选项式 API 的生命周期选项和组合式 API 之间的映射

因为 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'));

参考文章