生命周期钩子

每个 Vitarx 组件从创建到销毁会经历一系列阶段——初始化、挂载、显示、隐藏、销毁。在这些阶段，你可以通过生命周期钩子执行特定的逻辑。

与 React 的关键区别

Vitarx 的函数组件只执行一次，不会因为数据变化而重新执行整个函数。这意味着：

  • 生命周期钩子只需注册一次
  • 不需要担心 hook 在每次渲染时重复注册
  • 响应式数据变化只会触发对应的视图更新，不会重新执行组件函数

可用的钩子

钩子调用时机典型用途服务端触发
onInit组件实例创建后，尚未挂载到 DOM初始化数据、发起异步请求是
onBeforeMount即将挂载到 DOM 之前挂载前最后的准备工作否
onShow组件显示时（首次挂载和从隐藏恢复时）启动动画、恢复定时器否
onMounted挂载到 DOM 之后访问 DOM 元素、启动第三方库否
onHide组件隐藏时暂停动画、暂停定时器否
onDispose组件销毁时清理资源、取消订阅是
onError组件内部发生异常时错误捕获与降级处理是
onViewSwitch视图切换事务触发时过渡动画控制是

基本用法

在组件函数体内直接调用钩子函数：

tsx
import { ref, onMounted, onDispose } from 'vitarx'

function Timer() {
  const count = ref(0)
  let timer: number | null = null

  // 挂载后启动定时器
  onMounted(() => {
    timer = window.setInterval(() => {
      count.value++
    }, 1000)
  })

  // 销毁时清理定时器
  onDispose(() => {
    if (timer !== null) {
      clearInterval(timer)
    }
  })

  return <div>计数: {count}</div>
}

生命周期钩子 API — 查看所有钩子的详细说明和完整示例