# 练习 4：生命周期和模板 ref

## 目标

学会在组合式 API 里使用生命周期钩子，并通过模板 `ref` 获取 DOM。

## 你要练什么

- `onMounted`
- `onUpdated`
- `onUnmounted`
- 模板 `ref`

## 任务

- 页面挂载后自动聚焦输入框
- 数据更新后输出日志
- 页面卸载前清理定时器

## 文件

- [starter.html](/Users/lijiaqing/home/wwwroot/front-end-example/08-vue3/04-lifecycle-and-template-ref/starter.html)
- [starter.js](/Users/lijiaqing/home/wwwroot/front-end-example/08-vue3/04-lifecycle-and-template-ref/starter.js)