vue3获取动态宽度，刷新后动态宽度值为0

Question

Vue3+vite，使用的是setup语法糖，动态获取宽度值，在页面初次加载的时候，可以获取到最大值，但是点击刷新按钮之后，就无法获取到最大值，点击刷新按钮之后titleColNodes就为空了

<template>
  <div class="check-list-container" ref="checkListContainerRef">
    <template v-for="(item, index) in checkListData">
      <div class="list-row">
        <div class="list-col index">
          <span class="list-col-text index" v-html="index+1"/>
        </div>
        <div class="list-col title">
          <span class="list-col-text title" v-html="item.title"/>
        </div>
        <div class="list-col date">
          <span class="list-col-text date" v-html="item.date"/>
        </div>
      </div>
    </template>
  </div>
</template>

<script setup>
import {ref, defineProps, onMounted, nextTick, watch} from "vue";

onMounted(() => {
  console.log("----------")
  nextTick(() => {
    setCheckListStyle();
  });
})

const props = defineProps({
  checkListData: {
    type: Array,
    default: () => []
  }
})
const checkListContainerRef = ref();


const setCheckListStyle = () => {
  const checkListContainerNode = checkListContainerRef.value;
  const titleColNodes = checkListContainerNode.getElementsByClassName("list-col title");
  console.log(titleColNodes);
  let maxWidth = 0;
  for (let titleNode of titleColNodes) {
    console.log(titleNode)
    const offsetWidth = titleNode.offsetWidth;
    console.log("offsetWidth",offsetWidth)
    maxWidth = Math.max(maxWidth, offsetWidth);
  }
  console.log(maxWidth)
}


</script>

Answer 1

以下内容参考自 AICG 生成结果，并由 '栗筝i' 整理回复，相关结果及代码方法已验证可行，有用望采纳：

针对你提出的问题，我猜测你可能在 Vue 3 + Vite 项目中使用了 <script setup> 语法糖，并且你在组件中动态获取某个元素的宽度值，但在页面初次加载时可以获取到最大值，但在点击刷新按钮后无法获取到预期的最大值，且相关的 titleColNodes 变量可能为空。这个问题可能涉及到几个关键点：

1. 生命周期钩子：在 Vue 3 中，尤其是使用 <script setup> 语法时，需要正确使用生命周期钩子来确保在合适的时机执行代码。

2. DOM 更新与访问：在 Vue 中，DOM 元素的访问和更新需要在 Vue 完成渲染后进行。如果在数据更新后立即访问 DOM，可能会因为 Vue 还未完成渲染而导致访问到旧的或未更新的 DOM 状态。

3. 响应式数据：确保你的 titleColNodes 或其他相关数据是响应式的，以便 Vue 能够跟踪其变化并相应地更新 DOM。

以下是一些可能的解决方案和建议：

1. 使用 onMounted 和 onUpdated 钩子

在 <script setup> 中，你可以使用 onMounted 钩子来确保在组件首次挂载后执行代码，使用 onUpdated 钩子来确保在组件每次更新后执行代码。这两个钩子都来自 vue 包。

<script setup>
import { onMounted, onUpdated, ref, nextTick } from 'vue';

const titleColNodes = ref([]);
const maxWidth = ref(0);

// 假设你有一个方法用来获取宽度
const getWidths = () => {
  // 使用 nextTick 确保在 DOM 更新后访问
  nextTick(() => {
    const nodes = document.querySelectorAll('.some-class'); // 替换为实际的类名或选择器
    if (nodes.length > 0) {
      maxWidth.value = Math.max(...Array.from(nodes).map(node => node.offsetWidth));
      titleColNodes.value = Array.from(nodes); // 根据需要更新 titleColNodes
    } else {
      console.error('No nodes found');
    }
  });
};

onMounted(() => {
  getWidths();
});

onUpdated(() => {
  getWidths();
});
</script>

2. 确保响应式数据更新

确保 titleColNodes 是响应式的，并且任何影响它值的操作都在 Vue 的响应式系统控制之下。如果你从外部源（如 API 调用）更新数据，确保使用 Vue 的方法来处理这些更新。

3. 检查条件渲染和 v-if

如果你的 DOM 元素是通过 v-if 条件渲染的，确保在调用获取宽度的方法时这些元素是可见的。v-if 会完全移除 DOM 元素，直到条件为真时才重新创建它们。

4. 使用 watch 监听数据变化

如果 titleColNodes 的变化是由其他数据驱动的，你可以使用 watch 来监听这些变化，并在变化时调用获取宽度的方法。

<script setup>
import { watch, ref, nextTick } from 'vue';

const someData = ref(...); // 假设这是影响 titleColNodes 的数据
const titleColNodes = ref([]);
const maxWidth = ref(0);

const getWidths = () => {
  nextTick(() => {
    const nodes = document.querySelectorAll('.some-class');
    if (nodes.length > 0) {
      maxWidth.value = Math.max(...Array.from(nodes).map(node => node.offsetWidth));
      titleColNodes.value = Array.from(nodes);
    }
  });
};

watch(someData, (newVal, oldVal) => {
  if (newVal !== oldVal) {
    getWidths();
  }
});

onMounted(() => {
  getWidths();
});
</script>

通过以上方法，你应该能够解决在页面初次加载后无法正确获取宽度值的问题。如果问题仍然存在，可能需要更详细地检查你的代码和逻辑。