Vue 3中如何监听div内部的变化（如样式、文本变更）

Vue的watch方法仅能监听响应式数据变化，直接监听DOM元素实例无法捕捉其内部的类名、文本等变更——因为DOM元素本身不是Vue的响应式对象。针对这个需求，有两种实用方案：

方案一：使用原生MutationObserver（通用场景） #

MutationObserver是浏览器原生API，能监听DOM树的所有变化，不管是Vue驱动还是外部JS修改的DOM都能捕捉到。

实现代码 #

<template>
  <div ref="targetDiv">
    <p :class="pClass">{{ pText }}</p>
    <button @click="updateContent">更新内容</button>
  </div>
</template>

<script setup>
import { ref, onMounted, onUnmounted } from 'vue'

const targetDiv = ref(null)
const pClass = ref('font-bold')
const pText = ref('My text')

// 模拟DOM变化操作
const updateContent = () => {
  pClass.value += ' color-red'
  pText.value = 'My updated text.'
}

let domObserver = null

onMounted(() => {
  // 配置监听规则，按需调整
  const observeConfig = {
    childList: true,        // 监听子节点的添加/移除
    attributes: true,       // 监听元素属性变化
    characterData: true,    // 监听文本内容变化
    subtree: true,          // 监听所有后代节点
    attributeFilter: ['class'] // 可选：只监听class属性变化
  }

  domObserver = new MutationObserver((mutations) => {
    mutations.forEach(mutation => {
      // 根据变化类型处理逻辑
      switch(mutation.type) {
        case 'attributes':
          console.log(`属性【${mutation.attributeName}】变更：旧值 ${mutation.oldValue} → 新值 ${mutation.target.getAttribute(mutation.attributeName)}`)
          break
        case 'characterData':
          console.log(`文本内容变更：旧值 ${mutation.oldValue} → 新值 ${mutation.target.data}`)
          break
        case 'childList':
          console.log('子节点发生添加/移除操作')
          break
      }
    })
  })

  // 启动监听目标元素
  targetDiv.value && domObserver.observe(targetDiv.value, observeConfig)
})

onUnmounted(() => {
  // 组件卸载时断开监听，避免内存泄漏
  domObserver?.disconnect()
})
</script>

方案二：监听Vue响应式变量（Vue驱动的DOM变化） #

如果DOM的变化完全由Vue的响应式数据驱动（比如类名、文本绑定了ref/reactive变量），直接监听这些变量更高效，符合Vue的响应式设计。

实现代码 #

import { ref, watch } from 'vue'

const pClass = ref('font-bold')
const pText = ref('My text')

// 监听响应式变量的变化
watch([pClass, pText], ([newClass, newText], [oldClass, oldText]) => {
  console.log(`类名变更：${oldClass} → ${newClass}`)
  console.log(`文本变更：${oldText} → ${newText}`)
}, { deep: true }) // 若变量是对象/数组，需开启deep监听

方案选择建议 #

• 若DOM变化由Vue响应式数据驱动：优先使用方案二，性能更优，代码更简洁。
• 若DOM变化来自外部JS/第三方库：必须使用方案一，因为这类变化无法被Vue的响应式系统感知。

内容的提问来源于stack exchange，提问作者Qais Wardag