Skip to content

生命周期钩子

每个 Vue 组件实例在创建时都需要经历一系列的初始化步骤,比如设置好数据帧听、编译模板、挂载实例到 DOM 以及数据改变时更新 DOM。在此过程中,它也会运行称为生命周期钩子的函数,让开发者有机会在特定阶段添加自己的代码。

注册周期钩子

例如,onMounted 钩子可以在组建完成初始渲染并创建 DOM 节点后运行代码。

js
<script setup>
import { onMounted } from 'vue'

onMounted(() => {
  console.log(`the component is now mounted.`);
})
</script>

还有一些其他的钩子,会在实例生命周期的不同阶段被调用,最常用的是 onMountedonUpdatedonUnmounted

当调用 onMounted 时,Vue 会自动将注册的回调函数与当前活动组件实例相关联。这要求钩子在组件设置时同步注册,请不要:

js
setTimeout(() => {
  onMounted(() => {
    // 这将不会正常工作
  })
}, 100)

onMounted() 也可以放在一个外部函数中调用,只要调用栈是同步的,且最终起源自 setup()

生命周期图示

Released under the MIT License.