Vue底层元素数据存储机制及v-if导致dataset不更新问题

问题根源 #

你遇到的核心问题是DOM元素重新渲染导致缓存的DOM引用失效：

• 当v-if使用globalTest(n)时，该函数依赖响应式变量moves，点击move按钮后moves变化会触发Vue重新渲染。此时原来的<button>元素会被销毁，Vue会创建全新的元素匹配更新后的条件。
• 你在onMounted中缓存的items数组指向的是初始渲染的旧DOM元素，这些元素已经不在当前DOM树中，所以调用inspect时读取的是旧元素的dataset，自然看不到更新后的值。
• 而localTest(n)只依赖循环索引n，不涉及响应式变量，Vue只会更新现有元素的属性（比如data-transfer），不会销毁重建元素，所以缓存的items引用仍然有效，能读到更新后的dataset。

解决方案 #

根据你的需求（依赖响应式条件+访问更新后的dataset），提供三种可行方案：

方案1：实时获取DOM元素（最简单修复）

不要缓存items数组，每次需要访问时重新查询DOM：

<script setup>
// ... 其他代码不变
function inspect() {
  // 每次调用时重新获取最新的DOM元素
  const items = document.querySelectorAll('.swappable');
  for (let n = 0; n < 5; n++) {
    let data = items[n].dataset.transfer;
    const elem = document.getElementById(idString(n+100));
    elem.innerText = 'id: ' + items[n].id + ' :' + data;
  }
}
// ... 其他代码不变
</script>

方案2：使用Vue的ref管理DOM引用（更Vue化的方式）

通过v-for绑定ref，让Vue自动维护最新的DOM元素引用：

<script setup>
import { onMounted, ref, reactive } from 'vue'
const thisData = reactive(['AAA','BBB','CCC','DDD','EEE'])
const swappableRefs = ref([]) // 存储所有swappable元素的ref
let moves = 0;

function inspect() {
  for (let n = 0; n < swappableRefs.value.length; n++) {
    const item = swappableRefs.value[n];
    if (!item) continue;
    let data = item.dataset.transfer;
    const elem = document.getElementById(idString(n+100));
    elem.innerText = 'id: ' + item.id + ' :' + data;
  }
}
// ... 其他代码不变
</script>

<template>
  <template v-for="(item,n) in thisData" :key="n">
    <button v-if="globalTest(n)" style="background-color: lightblue;" 
      class="swappable"
      :data-transfer="dataTransfer(item)"
      :id="idString(n)"
      ref="swappableRefs"
    >{{ item }}</button>
    <button v-else style="background-color: lightgreen;" 
      class="swappable"
      :data-transfer="dataTransfer(item)"
      :id="idString(n)"
      ref="swappableRefs"
    >{{ item }}</button>
    <p :id="idString(n+100)"></p>
  </template>
  <!-- 其他按钮不变 -->
</template>

方案3：避免直接操作DOM（推荐的最佳实践）

既然Vue是数据驱动的，尽量不要依赖dataset传递数据，直接用响应式变量管理状态：

<script setup>
import { ref, reactive } from 'vue'
const thisData = reactive(['AAA','BBB','CCC','DDD','EEE'])
const displayInfos = ref([])
let moves = 0;

function inspect() {
  // 直接从响应式数据生成展示内容，无需操作DOM
  displayInfos.value = thisData.map((item, n) => ({
    id: idString(n),
    data: dataTransfer(item)
  }))
}
function move() {
  thisData[1] = thisData[0];
  ++moves;
}
// ... 其他代码不变
</script>

<template>
  <template v-for="(item,n) in thisData" :key="n">
    <button v-if="globalTest(n)" style="background-color: lightblue;" 
      class="swappable"
      :id="idString(n)"
    >{{ item }}</button>
    <button v-else style="background-color: lightgreen;" 
      class="swappable"
      :id="idString(n)"
    >{{ item }}</button>
    <!-- 直接绑定响应式数据，无需通过DOM读取 -->
    <p>id: {{ displayInfos[n]?.id }} : {{ displayInfos[n]?.data }}</p>
  </template>
  <button @click="inspect()">Inspect Element Data</button>
  <button @click="move()">Copy btn 1 to btn 2</button>
</template>

关于Vue底层如何存储数据 #

Vue并不会直接把响应式数据存储在DOM元素中，而是通过虚拟DOM（Virtual DOM）维护视图与数据的映射：

• 当响应式数据变化时，Vue会生成新的虚拟DOM树，并与旧树对比，计算出需要更新的DOM节点。
• 对于属性绑定（比如:data-transfer），Vue会直接更新对应DOM元素的属性，但只有当元素未被销毁重建时，这个更新才会作用到你之前获取的DOM引用上。
• 如果元素因为条件渲染（如v-if）被销毁重建，旧的DOM引用就会失效，必须重新获取最新的元素才能读到更新后的属性。

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