watchEffect 可自动响应文本内容、样式、容器尺寸等变化，结合 nextTick 测高并判断折叠状态，再通过 resize 监听或 ref 追踪窗口/主题变更，辅以防抖避免频繁计算。
用 watchEffect 实现长文本折叠/展开状态的自动调整，核心在于让它“感知内容变化 + 渲染完成 + 高度条件”，而不是手动监听某个 prop 或调用方法。它天然适合这类依赖 DOM 实际尺寸的响应式逻辑。
自动触发测高与状态更新
当文本内容、容器宽度、字体大小或行高发生变化时，watchEffect 会重新执行内部逻辑，自动重判是否溢出、是否需要显示“展开”按钮。无需在 watch 里罗列所有可能影响高度的变量。
- 把
textContentRef.value的高度测量逻辑（如el.scrollHeight > lineHeight * maxLines）写进watchEffect回调中 - 只要回调里读取了
props.text、props.maxLines、textContentRef或getComputedStyle，这些都会成为依赖项 - 任意一个变动（比如父组件传入新文本、主题切换导致 font-size 改变），都会触发重测
配合 nextTick 确保 DOM 就绪
watchEffect 执行时机早于 DOM 更新完成，所以必须等渲染就绪再测高。直接在回调里调用 nextTick 是安全做法：
vue-component-analyzer
下载
递归分析 Vue 项目组件依赖，从入口文件生成组件层级图，支持 Vue 2/3，输出组件名、文件路径和属性。适用于分析组件结构、排查依赖或了解项目架构。
- 避免首次渲染时因 DOM 还未挂载而报错（
textContentRef.value为 null） - 确保测的是真实渲染后的
scrollHeight和lineHeight，不是初始空值或旧值 - 示例写法：
nextTick(() => { if (el) calculateOverflow() })
响应窗口缩放与样式变化
仅靠 props 变化还不够——用户缩放页面、切换暗色模式、调整浏览器宽度，都可能让原本不溢出的文本突然溢出。这时可结合 useResizeObserver 或原生 window.resize，并在其回调中触发 watchEffect 重运行：
立即学习“前端免费学习笔记（深入）”；
- 注册 resize 监听器，在
onBeforeUnmount中清理，防止内存泄漏 - 监听器内不直接改状态，而是简单调用一个空函数（如
triggerRerun()），该函数被watchEffect读取，从而触发重测 - 也可将
window.innerWidth或document.documentElement.clientWidth声明为 ref 并在watchEffect中读取，Vue 会自动追踪
避免重复计算与过度响应
watchEffect 默认每次依赖变更都执行，但测高是开销操作。可用防抖或节流控制频率：
- 对 resize 或频繁 prop 更新场景，用
lodash.debounce包裹测高逻辑，比如延迟 100ms 再执行 - 或在
watchEffect内部加守卫：仅当props.text非空且textContentRef.value存在时才运行 - 不需要手动 stop，组件卸载时 Vue 自动清理；如需提前终止，可返回
{ stop }并在合适时机调用
