生命周期和模板引用

为什么需要

Vue 为我们处理了所有的 DOM 更新，这要归功于响应性和声明式渲染。然而，有时我们也会不可避免地需要手动操作 DOM。

这时我们需要使用模板引用——也就是指向模板中一个 DOM 元素的 ref。我们需要通过这个特殊的 ref attribute 来实现模板引用：

Lifecycle hook

这是因为当 <script setup> 执行时，DOM 元素还不存在。模板引用 ref 只能在组件挂载后访问。

要在挂载之后执行代码，我们可以使用 onMounted() 函数：

它允许我们注册一个在组件的特定生命周期调用的回调函数

Example 1

Answer

Example 2

完成一个组件，要求：

1. 挂载后（onMounted）：

   • 让 <p ref="pRef"> 的文本变成 “Ready”，并设置为绿色。
   • 让 <input ref="iptRef"> 自动获得焦点。
   • 启动一个 setInterval，每 1s 在 <p> 文本末尾追加一个点 "."。
2. 点击按钮时：

   • 把 <p> 的文本改为当前时间字符串。
   • 同时把 count 加一（用于演示 onUpdated）。
3. 更新后（onUpdated）：

   • 把 <p> 的 title 属性更新为 Updated {count}。
4. 卸载时（onUnmounted）：

   • 清理定时器。

Answer