关于this.$refs是undefined

问题

最近在做开发的时候，遇到这样一个问题：

从后端请求到一个图片列表，需要根据返回图片的情况设置元素的宽度，这就需要这样计算list的宽度imgList.length * imgElement.clientWidth（为了在各种移动端自适应，不能直接写死宽度，需要通过元素拿到宽度）。但是在mouted钩子中请求完数据之后，this.$refs.img是undefined。

原因及解决方案

后来查询原因，因为我的img元素使用了v-for命令，是根据后台返回数据动态响应的（还有类似的v-if、v-show），因此这些dom在mouted中找不到，即使我在mouted钩子中使用await请求数据，在数据返回后马上获取元素依然获取不到，原因是此时dom元素并没有更新渲染完成，ref并没有挂载完成。因此必须要在dom更新并挂载成功之后获取才可以获取得到。有两种解决办法：

1、在updated钩子中获取元素，此时数据已经更新并dom挂载成功，此时一定可以获取到更新的dom。但是有个缺点就是在每次数据更新之后都会被调用，不是很优

2、使用this.$nextTick

vue中对nextTick给的官方解释是

在下次 DOM 更新循环结束之后执行延迟回调。在修改数据之后立即使用这个方法，获取更新后的 DOM。 

本文地址：https://blog.csdn.net/weixin_42729843/article/details/107387971