this.$refs获取不到dom的可能原因及方法解决

版权声明：转载请注明出处： https://blog.csdn.net/qq_38262910/article/details/85296932

背景

搞饿了么高仿APP时，使用this.$refs.wrapper.getElementsByClassName('food-list')
时获取不到dom节点
正常能获取到应该是如下图：

然后我又用了网上的方法:

this.$refs.foodList
（foodList是li的dom节点）

结果还是刷新页面时获取不到dom
然后我对比了网友访的饿了么的源码，下面是网友的

下面是我的：

而我又想了我每次都是修改vue文件代码保存的时候才能正常获取dom节点，加上网友的代码每次调用钩子函数时其实都会给data里面的属性赋值。然后我就想了：会不会是this.$refs这个方法只有当vue文件数据有改变时才能获取到dom呢？说做就做：

问题解决

1.在data里面写上一个属性：changValue=null，如下图

2.在mounted钩子函数里写一个超时调用

setTimeout(() => {
  this.changValue = 1;
  this.$nextTick(() => {
    this.calculateHeight();
  });
},0);
使得每次挂载完成时changValue这个属性的值获得改变

3.测验结果
当当当！ 如此一来，无论你怎么样刷新页面，都可以正常获取到dom节点啦

结论

平时我们都没遇到this.$refs获取不到dom节点，最大的可能是我们在当前组件用上了ajax/axios等方法，并且使得获取到的数据在挂载完成（mounted）时赋值给了data里面的属性，如此一来就是每次刷新页面data里面的属性值都有改变，所以this.$refs就可以获取到dom啦。