textarea不能仅靠height: auto实现自动撑高，因其是替换元素，不响应该CSS属性；必须用JS监听input事件，先设style.height='auto'再读取并赋值scrollHeight，否则旧高度会干扰计算导致异常。
textarea 自动扩高为什么不能只靠 height: auto？
因为 textarea 是替换元素（replaced element），它的默认渲染行为不响应 height: auto，设了也没用。浏览器不会根据内容自动撑开高度，必须靠 JS 主动读取滚动高度或用 CSS 的 min-height + overflow: hidden 配合 JS 动态调整。
用 scrollHeight + clientHeight 实现可靠自适应
核心思路是监听 input 事件，每次输入后把 textarea.scrollHeight 赋给 style.height，再微调防止抖动。关键点在于：要先重置 height 为 auto，再读 scrollHeight，否则会因旧高度干扰测量结果。
- 必须在设置新高度前执行
el.style.height = 'auto'，否则scrollHeight可能被截断 - 读完
scrollHeight后立即设el.style.height = el.scrollHeight + 'px' - 建议加
el.style.overflow = 'hidden'避免滚动条闪现 - 可配合
resize: none和box-sizing: border-box保证尺寸稳定
const textarea = document.querySelector('textarea');
textarea.addEventListener('input', () => {
textarea.style.height = 'auto';
textarea.style.height = textarea.scrollHeight + 'px';
});遇到 placeholder 或换行符时 scrollHeight 不准怎么办？
当 textarea 初始为空但有 placeholder，或输入含连续换行、空格时，scrollHeight 可能偏小——因为浏览器对空行/占位文本的布局计算不一致。这时需要手动触发一次重排（reflow）来强制刷新布局。
- 在设
height: auto后加一句textarea.offsetHeight，触发同步重排 - 若仍有偏差，可对
scrollHeight加 1–2px 补偿（仅限无边框或固定 padding 场景） - 避免用
rows属性，它会和 JS 扩高冲突；改用 CSS 控制最小行数：min-height: calc(1.5em * 3)
Vue/React 中该不该封装成指令或 Hook？
可以封装，但要注意副作用时机。比如 Vue 的 v-autosize 指令需在 mounted 后绑定事件，在 unmounted 清理；React 的 useAutosize 必须依赖 ref 且避开服务端渲染（SSR）下 scrollHeight 为 0 的问题。
立即学习“前端免费学习笔记（深入）”；
- SSR 环境下首次渲染时
scrollHeight总是 0，应延迟到useEffect或onMounted才启用 - 不要在
render函数里直接调用scrollHeight，会导致无限循环更新 - 移动端 iOS Safari 对
scrollHeight计算更保守，建议加setTimeout(..., 0)延迟一次读取
实际项目里最常漏掉的是重置 height 的那一步——没设 height: auto 就直接读 scrollHeight，结果越输越高停不下来。还有就是忘了清理事件监听，尤其在动态增删 textarea 的场景。
