Vue3中数组ref监听失效：动态滚动组件监听器未触发排查

核心原因 #

你监听entryComponentsRefs的监听器没触发，是因为Vue中v-for绑定的数组ref只会更新内部元素，不会改变数组本身的引用，而默认的watch只会监听引用变化，不会追踪数组内部元素的增减。另外，就算开启深度监听，也可能因为组件渲染时机（entries更新后DOM还没完成渲染）导致拿到的refs是空的。

解决方法 #

方法一：监听数据源entries，结合nextTick获取refs #

这是最可靠的方式，因为entries是驱动组件渲染的数据源，等它更新后再等待DOM渲染完成，就能拿到完整的组件refs：

<script setup>
// ...imports
import { ref, watch, onMounted, nextTick } from 'vue';

const entries = ref([]);
const entryComponentsRefs = ref([]);

// 监听entries的变化
watch(entries, async () => {
  // 等待DOM更新完成，组件渲染完毕后refs才会被填充
  await nextTick();
  console.log(entryComponentsRefs.value);
  entryComponentsRefs.value.forEach(e => {
    console.log(e.root);
  });
});

onMounted(async () => {
  entries.value = await fetchEntries();
});
</script>

方法二：给watch开启深度监听 #

如果非要监听entryComponentsRefs，可以开启deep选项，但这种方式不如监听数据源可靠：

watch(entryComponentsRefs, (value) => {
  console.log(value);
  value.forEach(e => {
    console.log(e.root);
  });
}, { deep: true }); // 开启深度监听数组内部变化

额外注意点 #

确保你的Entry组件已经通过defineExpose暴露了root引用，否则父组件无法访问到e.root：

// Entry.vue
<script setup>
import { ref, defineExpose } from 'vue';
const root = ref(null);

// 必须显式暴露才能被父组件的ref获取到
defineExpose({ root });
</script>

<template>
  <div ref="root">Entry内容</div>
</template>

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