vue之$nextTick

Vue提供的nextTick方法是在下次 DOM 更新循环结束之后执行延迟回调，在修改数据之后使用 $nextTick，则可以在回调中获取更新后的 DOM。
现在有这么个需求，要求点击表格的扩展三角就展开扩展行。

现在遇到的问题呢，假如扩展行的数据是同步的，那么展开就是正常展示的；如果数据是点击时才异步加载的，那么表格展开就是空白，因为在数据回来并绑定之前，扩展行就已经展开了，导致数据没有渲染上去。这时就要用到nextTick来延迟回调并刷新。

// 点击扩展行时请求集团数据
    expandChange(row){
      let self = this;
      let phenomenonCode = row.phenomenonCode2;
      // 如果集团列表已经有数据，则直接返回
      if( row.blocPhenoClassMapping ){
        return;
      }
      querySmallClassBlocInfo( phenomenonCode )
      .then( response => {
          if(response.data.code == 200){
              self.$set(row,'blocPhenoClassMapping',response.data.data.list)
              row.blocPhenoClassMapping.map(item =>{
              switch(item.isEndNode){
                case 'Y':
                item.isEndNode = '是';
                break;
                case 'N':
                item.isEndNode = '否';
                break;
              }
              });
              // 在数据绑定好时再展开扩展行
              self.$nextTick(function () {
                self.$refs.blocTreeTable.toggleRowExpansion( row, true );
              });
          }else{
              self.$message({
                  message: response.data.msg,
                  type: 'warning'
              });
          }
      })
      .catch((err) =>{
      })  
    },

还比如：用swiper插件写轮播图时，图片也是异步加载的，这时也得用nextTick来处理，不然轮播图也是一片空白啦。