Vue3自定义指令中使用el.textContent导致响应式失效求助

核心原因 #

Vue 通过虚拟DOM管理DOM更新：模板中的{{a}}会被编译为虚拟节点，其内容完全由响应式数据a决定。当你在自定义指令的mounted钩子中直接修改el.textContent，相当于绕过了Vue的虚拟DOM机制手动修改了真实DOM。

当响应式数据a更新时，Vue会重新生成虚拟DOM，对比后将真实DOM的textContent强制更新为新的{{a}}值（即不带aaa前缀的内容），而你的updated钩子仅打印日志未重新添加前缀，因此最终DOM显示的是不带前缀的新值；你误以为旧值保留，本质是预期的前缀未被重新应用。

解决方案 #

如果需求是每次DOM更新后都保留aaa前缀，需在updated钩子中重复执行前缀添加逻辑：

<script setup>
import {ref} from 'vue'

const vTest = {
  mounted: (el) => {
    // 首次挂载时添加前缀
    el.textContent = 'aaa' + el.textContent
  },
  updated: (el) => {
    // 组件更新后，Vue已渲染新的{{a}}值，此时重新添加前缀
    el.textContent = 'aaa' + el.textContent
    console.log('updated')
  }
}

const a = ref({x:2})

setTimeout(()=>{ a.value={x:55}},1000)
</script> 

<template>
  <div v-test>{{a}}</div>
</template>

更优实践（推荐） #

避免直接操作DOM，改用Vue响应式API处理内容格式化，更符合Vue设计理念：

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

const a = ref({x:2})
// 用计算属性自动处理前缀，响应式更新时自动同步
const formattedA = computed(() => 'aaa' + JSON.stringify(a.value))

setTimeout(()=>{ a.value={x:55}},1000)
</script> 

<template>
  <div>{{formattedA}}</div>
</template>

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