用过 Vue3 的同学肯定知道

那可真是个活宝，比老版本舒服多了。

我早就想找个机会好好聊聊它了。

咱们先别急着kan代码，先听我跟你唠叨唠叨以前的日子。

那时候啊，每次要操作 DOM dou得写一堆 ref 什么的，那个那个…

不对不对不对，应该是 const xxx = ref，然后在模板里绑定 :ref="xxx"。哎呀妈呀，这行业务逻辑写出来真丢人现眼！

封装 Hook 时特别难受，因为组件得知道 Hook 内部的变量名，改起来简直是地狱级体验。

这东西简直是救星啊！让我把所有操作 DOM 的逻辑dou抽离出来了～

import { useTemplateRef, onMounted } from 'vue' export function useAutoFocus { const inputEl = useTemplateRef // 这里关键就是用这个 API 把 ref 名字固定住了 onMounted => { inputEl.value?.focus // 自动聚焦 })}

<!-- 在组件里直接使用 --><input ref="auto-focus" placeholder="自动聚焦"/>

哈哈，是不是简单到爆炸？组件里不用写任何逻辑！

// useElementSize.jsimport { useTemplateRef, ref, onMounted, onUnmounted } from 'vue' export function useElementSize { const el = useTemplateRef // 注意这个字符串标识! const width = ref const height = ref const updateSize = => { if { width.value = el.value.offsetWidth height.value = el.value.offsetHeight } } onMounted => { updateSize window.addEventListener }) onUnmounted => { window.removeEventListener // 清理监听hen重要哦~}return { width, height }}

用的时候：

useTemplateRef Zui让我惊喜的是它彻底解除了组件和 Hook 的耦合关系。之前用传统 ref 时总觉得哪里不太对劲…现在终于明白原因了！组件只需要在模板里加上对应的字符串标识就行～Hook 内部封装所有操作 DOM 的逻辑。

为什么百度不收录？可Neng是内容质量不行、SEO 没Zuo好、网站权重低、或者被算法惩罚了。具体还要kan具体情况呢～不过说回来…还是谈谈我们的主角吧！

你懂的～这就是封装 Hook 的Zui高境界啦！

其实咱们平时遇到hen多需求dou是类似这种「获取 DOM + 操作 DOM」模式：

自动滚动到底部

拖拽交互

动画效果触发

外点击关闭菜单

这些全douKe以用 useTemplateRef 包装成通用 Hook。

不过有一点需要注意： - 在 SSR 中使用时要谨慎 - 生产环境记得Zuo空值检查

Zui后送给大家一句： 「好的工具让生活geng简单， useTemplateRef 是 Vue 开发者不可多得的利器！」