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

背景

搞饿了么高仿APP时，使用

this.$refs.wrapper.getElementsByClassName('food-list')

时获取不到dom节点

正常能获取到应该是如下图：

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

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

结果还是刷新页面时获取不到dom

然后我对比了网友访的饿了么的源码，下面是网友的

下面是我的：

然后官网的解释是：因为 ref 本身是作为渲染结果被创建的，在初始渲染的时候你不能访问它们 - 它们还不存在

问题解决

1.在data里面写上一个属性

changValue=null

如下图：

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

setTimeout(() => {
  //修改数据
  this.changValue = 1;
  //DOM还没更新
  this.$nextTick(() => {
  //DOM现在更新了
    this.calculateHeight();
  });
},0);

使得每次挂载完成时changValue这个属性的值获得改变，然后调用this.$nextTick()就可以更新DOM了。

其他例子：

如果是第一次打开模态框时无法获取this.$refs，可以让模态框打开时修改一个data对象中的值，然后执行this.$nextTick()就可以更新DOM了。 

3.测验结果

总结

以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。