关于VUE中v-for循环的dom使用ref获取不到问题

背景：

初学vue作练习项目的时候，基于vue2.0版本使用refs属性获取v-for循环的dom时出现获取不到dom的状况，尝试采用原生的方法出现一样的状况。查了不少资料没有找到对应的详细说明，现将我发现的一些问题分享给你们。

html部分

<div class="food-group" v-for="(item,index) in goods" :key="index" ref="group">
    ....
</div>
复制代码

定义的方法methods

methods: {
    getHeightList() {
      let height = 0;
      this.heightList.push(height);
      // let list = this.$refs.goods.getElementsByClassName("food-group");
      console.log(this.$refs);      
      console.log(this.$refs.group);
    }
  },
复制代码

尝试在mounted生命周期里面执行方法获取refs的DOM

mounted() {
    this.$nextTick(() => {
      this.menuScroll = new BScroll(this.$refs.menu);
      this.goodsScroll = new BScroll(this.$refs.goods);
      this.getHeightList();
    });
  }
复制代码

出现的结果

能够发现这里打印this.refs里面是有group对应的Dom的，可是在下面答应对应的Dom的时候出现undefined的状况，下面是尝试把ref获取改为d原生获取的方法。

methods: {
    getHeightList() {
      let height = 0;
      this.heightList.push(height);
      let list = this.$refs.goods.getElementsByClassName("food-group");
      //this.$refs.goods是刚才要获取的Dom的父元素，food-group是要获取的Dom的类名
      console.log(list);      
      console.log(list.length);
    }
  },
复制代码

出现的结果

能够看到这里出现的状况和上面ref获取出现的状况是同样的，打印出来是有的，可是一旦输出结果却发现length是0，也就是没有获取到。

使用debugger调试的发现：

在操做dom的自定义函数执行先后加入debugger调试，发如今该函数执行的时候，数据并无绑定，dom也仍是没有渲染的状态，这和网上一些帖子讲的是同样的，可是问题来了，该函数执行也是在this.$nextTick里面执行的，应该是Dom渲染完成菜执行的。这里就引出了这里的关键性的问题：

• vue组件初始化到第一次渲染完成，也就是mounted周期里面，只是把组件模板的静态数据渲染了，动态绑定的Dom，并无初始化，因此咱们在mounted周期里面操做获取dom是获取不到的。

解决方案：

1. 把this.$nextTick放在你获取到v-for绑定的数据并赋值以后，也就是触发响应式更新以后在操做。
2. 把操做dom的操做放到updated生命周期里面执行，可是这样会出现，每次跟新视图，都会触发该操做。