Vue3.0 Composition API 生命周期钩子

Composition API 生命周期钩子

阅读本篇内容之前，应先阅读Composition API 介绍以及响应性基本原理。

你可以通过在生命周期添加“on”的前缀来访问一个组件的生命周期钩子 。下面这个表格描述了如何在setup()内调用生命周期钩子：

选项 API	setup内部的钩子
beforeCreate	不需要
created	不需要
beforeMount	onBeforeMount
mounted	onMounted
beforeUpdate	onBeforeUpdate
updated	onUpdated
beforeUnmount	onBeforeUnmount
unmounted	onUnmounted
errorCaptured	onErrorCaptured
renderTracked	onRenderTracked
renderTriggered	onRenderTriggered

 TIP

由于setup是随着beforeCreate和created这两个生命周期钩子运行的，因此在你无需显式地定义它们。换句话说，任何想写进这两个钩子的代码，都应当直接写在setup方法里面。

这些方法接受一个回调函数作为参数，这些回调函数将在组件调用这些钩子的时候被执行：

// MyBook.vue

export default {
  setup() {
    // mounted
    onMounted(() => {
      console.log('Component is mounted!')
    })
  }
}