VUE3使用ref绑定动态DOM元素；ref使用函数时动态修改数据出现重复；数据量大时会很卡；巧用nextTick（）；

我先直接贴代码：其他是项目抽的组件配置，只需要关注：

:ref="(el) => setItemRefs(el as HTMLElement, propsTable.row.language)"

              <FileUpload
                v-show="propsTable.row.pic_urls?.length > 0"
                :ref="(el) => setItemRefs(el as HTMLElement, propsTable.row.language)"
                :key="propsTable.rowIndex"
                v-model:img="propsTable.row.pic_urls"
                :hid-upload="true"
                :configuration-info="imgConfigurationInfo"
                @on-rejected="rejectedFun"
              >
              </FileUpload>

下面函数的代码：

const itemRefs: Ref = ref([]);
const setItemRefs = (
  el: HTMLElement | ComponentPublicInstance | HTMLAttributes,
  languageKey: string
) => {
  nextTick(() => {  // 直接在don更新之后再去push
    if (el) {
      itemRefs.value.push({
        languageKey,
        el,
      });

      // 下面代码是去重的，当然可能在上面判断在push，也可以直接用下标替换的方式  
      itemRefs.value = Array.from(
        new Map(itemRefs.value.map((obj) => [obj.languageKey, obj])).values()
      );
    }
  });
};