必须在组件挂载后执行html质量检查，vue中用onmounted包裹逻辑或确保usemounted正确实现，react中useeffect需判空ref并清理副作用，ssr需判断window环境，动态内容需watch或mutationobserver监听。
Vue 3 中 useMounted 与 onMounted 混用导致检查失效
组件挂载后才可安全访问 DOM 节点，但若在 setup() 里过早调用 HTML 质量检查逻辑（比如用 document.querySelector 查元素），会因节点未渲染而返回 null，导致检查跳过或报错。
- 用
onMounted包裹检查逻辑，确保 DOM 已就绪；useMounted（如某些组合式函数封装）若内部未正确 await nextTick 或未监听mounted钩子，也一样不可靠 - 避免在
onBeforeMount中触发检查——此时模板尚未解析，$el为空，querySelector必然失败 - 若检查逻辑依赖响应式数据（如
props或ref），需确认这些值在挂载时已确定；否则要配合watch+nextTick延迟执行
React useEffect 里 ref.current 为 null 的常见原因
用 ref 获取 DOM 元素做质量检查时，useEffect 第一次执行时 ref.current 可能还是 null，尤其在条件渲染或 Suspense 场景下。
使用HTML,CSS,JavaScript开发Android应用程序 英文文字pdf版附源文件
下载
如果你了解HTML，CSS和JavaScript，您已经拥有所需的工具开发Android应用程序。本动手本书展示了如何使用这些开源web标准设计和建造，可适应任何Android设备的应用程序 - 无需使用Java。您将学习如何创建一个在您选择的平台的Android友好的网络应用程序，然后转换与自由PhoneGap框架到一个原生的Android应用程序。了解为什么设备无关的移动应用是未来的潮流，并开始构建应用程序，提供更
- 必须加空值判断：
if (!ref.current) return，不能直接调用ref.current.querySelectorAll - 不要把检查逻辑写在自定义 Hook 内部却忽略 ref 绑定时机——例如
useHtmlQualityCheck(ref)若在 ref 尚未赋值时就运行，结果必错 - SSR 渲染时
ref.current在服务端永远为null，检查逻辑需包裹if (typeof window !== 'undefined')
检查脚本在 unmount 后仍尝试操作 DOM 的内存泄漏
HTML 质量检查若含定时器、事件监听或 MutationObserver，在组件卸载后未清理，会导致报错 Cannot read property 'querySelector' of null 或持续占用内存。
- Vue 中在
onUnmounted里显式调用observer.disconnect()或clearTimeout - React 中
useEffect的清除函数必须返回清理逻辑，且清理代码要判断 DOM 是否还存在（if (ref.current)） - 避免在检查函数内直接修改
ref.current.innerHTML——这会触发重渲染，可能让卸载中的组件再执行一次 effect
动态插入内容后未触发二次检查的遗漏场景
组件挂载时检查通过，但后续通过 v-html、dangerouslySetInnerHTML 或第三方富文本编辑器插入 HTML，原始检查不会自动重跑。
- 对
v-html绑定的响应式变量，用watch监听其变化，并在回调中手动触发检查函数 - 使用
MutationObserver监听容器节点子树变动，但注意过滤掉 Vue/React 自身的 patch 操作（如 class 切换），只关注childList和characterData - 第三方库（如 Quill、Tiptap）通常提供
onUpdate或onChange钩子，应在此类回调里调用检查，而非依赖 DOM 变动轮询
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
