如何获取动态创建组件的最新$refs？避免setTimeout的方法

这个问题我太熟了！核心原因就是Vue的DOM更新是异步批量执行的——当你往数组里加新项后，Vue并不会立刻把新组件渲染到DOM里，而是把这次DOM更新任务放进异步队列，等当前同步代码执行完了才会处理。这时候你立刻去拿$refs，新组件还没挂载，自然就是undefined，而setTimeout能凑效只是因为它把你的代码放到了DOM更新之后的事件循环里，但这绝对不是最优解。

解决方法很简单，直接用Vue官方提供的nextTick方法，它专门用来帮你等待DOM更新完成后再执行代码，完全不需要依赖setTimeout。

下面分两种常用的Vue写法给你示例：

1. Vue 2 选项式API写法 #

首先模板里注意用函数式的ref绑定（v-for里直接用字符串ref的话，Vue会自动收集成数组，但函数式绑定更可控）：

<div id="app">
  <button @click="addNewComponent">添加新组件</button>
  <my-component 
    v-for="(item, index) in items" 
    :key="item.id" <!-- 别用index当key，用唯一标识更稳妥 -->
    :ref="el => { if (el) componentRefs[index] = el }"
  ></my-component>
</div>

然后脚本部分：

new Vue({
  el: '#app',
  data() {
    return {
      items: [],
      componentRefs: []
    }
  },
  methods: {
    addNewComponent() {
      // 加个唯一id当key，避免v-for的复用问题
      this.items.push({ id: Date.now() });
      
      // 用$nextTick等待DOM更新完成
      this.$nextTick(() => {
        const latestComponent = this.componentRefs[this.componentRefs.length - 1];
        console.log('拿到最新组件引用：', latestComponent);
        // 这里就可以正常操作最新组件的方法或属性了
      });
    }
  },
  components: {
    'my-component': {
      template: '<div>我是动态生成的组件 {{ Math.random() }}</div>'
    }
  }
});

2. Vue 3 组合式API写法 #

模板和上面类似：

<template>
  <button @click="addNewComponent">添加新组件</button>
  <MyComponent 
    v-for="(item, index) in items" 
    :key="item.id"
    :ref="el => { if (el) componentRefs[index] = el }"
  ></MyComponent>
</template>

脚本部分（用setup语法糖更简洁）：

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

const items = ref([]);
const componentRefs = ref([]);

const addNewComponent = async () => {
  items.value.push({ id: Date.now() });
  
  // 等待DOM更新完成，这里用await更直观
  await nextTick();
  
  const latestComponent = componentRefs.value[componentRefs.value.length - 1];
  console.log('拿到最新组件引用：', latestComponent);
  // 执行你需要的操作，比如调用组件的方法
  // latestComponent?.someMethod();
};
</script>

额外提醒： #

• 别用index作为v-for的key，尽量用每个项的唯一标识（比如id），否则Vue可能会复用组件，导致ref绑定混乱。
• 函数式ref里要加if (el)判断，因为组件卸载时el会是null，避免把null塞进ref数组里。

这样就能完美解决你遇到的异步问题，完全不需要依赖setTimeout这种hack方式～

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