textarea高度自适应最稳妥方案是用textarea+动态高度控制，核心是监听@input、重置height为auto后读取scrollheight并赋值，需在nexttick中执行以确保dom更新。
直接用 textarea + 动态高度控制是最稳妥、最轻量的方案。Vue 3 的响应式机制和组合式 API 让封装过程清晰可控，无需第三方库，也不用 contenteditable 这类易出问题的替代方案。
核心逻辑：监听输入 + 重置高度 + 读取 scrollHeight
textarea 高度自适应的本质不是“预测”，而是“测量”——每次内容变化后，先清空 height 样式（设为 auto），再读取其真实内容高度（scrollHeight），然后赋值回去。这个过程必须在 DOM 更新后执行，所以要用 nextTick 或 ref 回调确保时机准确。
- 不要直接监听 value 变化，而应监听
@input事件（更及时，兼容粘贴、拖入等操作） - 避免在 mounted 中一次性设置高度，需响应后续所有输入行为
- 初始
rows="1"可作为最小行数提示，但实际高度由 JS 控制，CSS 中可忽略
推荐封装方式：函数式组合 + 指令复用
把高度调整逻辑抽成可复用的组合函数，便于多个组件共享。例如定义 useAutoResizeTextarea：
- 接收 ref 和可选配置（如 minRows、maxRows、delay）
- 内部自动绑定 @input，并在 nextTick 中执行高度计算
- 支持手动触发更新（比如外部修改 v-model 后调用 refresh()）
- 配合 CSS 设置
min-height和max-height，防止过高失控
样式与边界处理要点
光有 JS 不够，CSS 是体验关键：
- 给 textarea 设
box-sizing: border-box，避免 padding 影响高度计算 - 用
min-height保证至少显示一行，用max-height+overflow-y: auto防止无限拉伸 - 移除默认 resize 手柄：
resize: none - 若需圆角或边框，统一通过外层容器包裹实现，避免干扰内部高度测量
集成到自定义表单组件中
在你的多行文本控件（比如 MyTextarea）里，只需：
- 暴露 v-model，使用 defineModel（Vue 3.4+）或 props + emit 兼容旧版
- 模板中写
<textarea ref="el" v-model="modelValue" ...></textarea> - setup 中调用
useAutoResizeTextarea(el)，无需额外逻辑 - 可扩展：加 loading 状态、字数统计、禁用时保持当前高度等
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
