Vue.js仿饿了么中$nextTick()方法中的this.$els报错undefined问题

在学习Vue.js仿饿了么项目的过程中我遇到了一个关于better-scroll用法的问题，就是$nextTick函数的Vue中DOM的异步更新问题，即确保dom树变化之后再发送ajax请求，在得到class的选择器作用步骤上出错了。

资料：

在https://blog.csdn.net/qq_20777797/article/details/78233615页面中，我了解到Vue.nextTick()和Vue.$nextTick()的区别

`Vue.nextTick(callback)`，当数据发生变化，更新后执行回调；

`Vue.$nextTick(callback)`，当dom发生变化，更新后执行的回调。

在通过上网查找相关资料，我了解到了$els如下的一些知识点：

$els 为 DOM 元素注册一个索引，方便通过所属实例的 $els 访问这个元素；

因为 HTML 不区分大小写，camelCase 名字比如 v-el:someEl 将转为全小写。可以用 v-el:some-el 设置 this.$els.someEl；

$els类似于document.querySelector('.class')的功能,可以拿到指定的dom元素。（注意v-el在vue2.0中已经删除改为ref="someEl" 驼峰形式的命名）。

在项目中，它的写法如下：

this.$nextTick(() => {
  this.scroll = new BScroll(this.$els.ratings, {
    click: true
  });
});

但是运行后你会发现，页面报错说ratings为undefined，为了发现错误，我在代码中加入测试语句，代码如下：

this.$nextTick(() => {
  this.scroll = new BScroll(this.$els.ratings, {
    click: true
    console.log(this.$els)
  });
});

发现，在页面的控制台打印出来的this.$els为undefined，为了解决这个问题，我折腾了好久，最终没有解决这个问题，但是选择了其他方法来达到这个效果，反正它的写法很多：

方法一：直接把this.$els.ratings代码修改为document.getElementsByClassName('.ratings')[0]，用法为：

代码如下：

this.$nextTick(() => {
  this.scroll = new BScroll(document.getElementsByClassName('.ratings')[0], {
    click: true
  });
});

方法二：直接在选择器想要的class的div中写入ref="ratings"，在把this.$els.ratings代码修改为this.$refs.ratings，在Vue2.0中v-el 和 v-ref 合并为一个 ref 属性了，可以在组件实例中通过 $refs 来调用，代码如下：

注意：ref="ratings"和this.$els.ratings中的rating是一模一样的，不一致时，控制台会报Error in nextTick: "TypeError: Cannot read property 'children' of undefined"的错误。

毕竟Vue 1.0的时候一般写法为：v-el: foods-wrapper和this.$els.foodsWrapper，所以要小心。

方法三：直接在选择器想要的class的div中设置id属性即可。

以上三种方法都可以达到想要的效果，区别只是写法不同而已。

转载于:https://my.oschina.net/u/3986411/blog/2245722