VueJS中如何在v-for循环渲染完成后调用指定函数

方法1：结合$nextTick监听v-for绑定数据源的更新 #

当你更新v-for绑定的数组数据源后，直接调用$nextTick，它会在本次DOM更新完全完成后触发回调：

// 假设userSvgList是v-for绑定的数据源数组
this.userSvgList = 新的SVG数据数组
this.$nextTick(() => {
  // 此处调用你封装的清除SVG宽高属性的函数
  clearSvgDefaultAttrs()
})

如果使用Vue3，直接从vue包中引入nextTick方法使用即可，用法完全一致

方法2：监听v-for最后一项的渲染完成状态 #

给v-for的子项绑定渲染完成判断，当最后一项渲染结束后触发目标函数：
模板代码示例：

<div v-for="(item, index) in userSvgList" :key="item.id">
  <svg-component 
    :data="item"
    @mounted="index === userSvgList.length -1 && clearSvgDefaultAttrs"
  />
</div>

只需要在svg子组件自身的mounted/onMounted生命周期中向上emit mounted事件即可。

方法3：针对异步加载的SVG补充加载状态监听 #

由于你使用的是用户上传的外部SVG资源，就算v-for的DOM结构渲染完成，SVG资源本身可能还在加载中，可补充全局加载监听逻辑：

function waitAllSvgLoaded(callback) {
  // 可以给目标SVG加专属类名缩小选择范围，避免选中页面其他SVG
  const targetSvgs = document.querySelectorAll('.user-upload-svg')
  let loadedCount = 0
  targetSvgs.forEach(el => {
    if (el.complete) {
      loadedCount++
      if(loadedCount === targetSvgs.length) callback()
    } else {
      el.addEventListener('load', () => {
        loadedCount++
        if(loadedCount === targetSvgs.length) callback()
      })
    }
  })
}
// 结合nextTick使用，覆盖所有场景
this.$nextTick(() => {
  waitAllSvgLoaded(clearSvgDefaultAttrs)
})

上述方案都可以完全替代你当前使用的setTimeout延迟方案，不会出现执行时机提前的问题，也没有不必要的等待耗时。

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