Vue.js v-for场景下mounted()无法获取DOM的原因及解决方法

你之前对mounted的理解不完全准确：mounted触发时只保证当前组件的根DOM挂载完成，根本不会等所有动态内容、异步子组件渲染完——依赖异步数据渲染的v-for节点、第三方组件内部生成的DOM，都有可能在mounted执行时还没被渲染到页面上。

先解释你碰到的两个反常现象 #

• 为什么打印getElementsByClassName返回的空集合，展开后却能看到元素？
  这是浏览器控制台的懒加载特性：getElementsByClassName返回的是实时更新的DOM集合引用，控制台打印对象时不会立刻存下当时的内容，等你手动点展开的时候，页面早就渲染完了，所以你能看到元素；但代码执行到取[0]的那一瞬间，集合里确实啥都没有，自然返回undefined。
• 为什么v-for里的元素在mounted里拿不到？
  看你贴的代码，v-for遍历的数据源是getLayers，这个值明显不是组件初始化时就写死的静态数据——要么是接口请求回来的异步数据，要么是组件初始化阶段后期才赋值的响应式数据，再加上你用的第三方<Moveable>组件本身也有独立的渲染周期，mounted执行的时候，v-for可能压根还没开始渲染，当然找不到目标元素。你加500ms延迟能拿到，纯粹是碰运气等异步流程跑完了，网络差、设备卡的时候照样会失效。

正确等待v-for渲染完成的方法 #

别用固定时长的setTimeout，这俩方案稳定得多：

1. 监听数据源+$nextTick #

v-for的渲染完全是由它绑定的响应式数据触发的，你只要在数据源更新后，等Vue完成DOM重渲染再执行逻辑就行：
如果数据是接口请求回来的，就在赋值后调用$nextTick：

async loadLayerData() {
  // 接口请求拿到v-for需要的数据
  const res = await fetchLayerApi()
  this.getLayers = res.data
  // 等这次数据变更触发的所有DOM更新完成
  this.$nextTick(() => {
    this.buildTextTargetWidth() // 这时候就能正常拿到目标元素
  })
}

如果数据是被其他逻辑修改的，就加个watch监听，在回调里走$nextTick：

watch: {
  getLayers() {
    this.$nextTick(() => {
      this.buildTextTargetWidth()
    })
  }
}

2. 用ref绑定目标元素，替代原生选择器 #

给需要获取的元素直接绑ref，比写class/id选择器靠谱，还不会被页面上其他同名元素干扰：
先改模板，给v-for渲染的目标h2绑动态ref：

<h2 
  v-for="tile of typographyTiles" 
  :key="tile.uid"
  :ref="el => { if(el) this.textPreviewRefs.push(el) }"
  class="typographyTextPreview"
  :style="{color: tile.fontColor}"
>
  {{tile.text || "Please enter an initial text in the settings"}}
</h2>

记得在data里提前初始化textPreviewRefs: []，每次数据源更新前先清空这个数组，等DOM更新完直接读这个数组就能拿到所有目标元素，不用再调用原生DOM查询方法。

特殊情况处理 #

如果你要操作的是第三方组件（比如你代码里的Moveable、之前注释的VueDragResize）内部渲染的DOM，$nextTick可能还不够，这种情况直接查对应组件的文档，监听组件抛出的「挂载完成/渲染完成」事件，在事件回调里再执行你的DOM操作就不会有问题。

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