vue中的nextick函数

今天来说说vue实例中的nextTick函数

简单的来说，Vue更新DOM是要等数据全部变化完成后异步来更新的。所以要获取DOM元素需要写在 this.$nextick() 回调函数里。
eg:
Element-UI 中的 el-tag 动态编辑标签

<el-input class="input-new-tag" v-if="inputVisible" v-model="inputValue" ref="saveTagInput" 
          @keyup.enter.native="handleInputConfirm" @blur="handleInputConfirm">
</el-input>
<el-button v-else class="button-new-tag" size="small" @click="showInput">+ New Tag</el-button>

showInput() {
  this.inputVisible = true;
  this.$nextTick( _ => {
    // 点击标签切换为文本框并自动获取焦点
    this.$refs.saveTagInput.$refs.input.focus();
  });
}

简而言之，如果你在数据改变之后的操作跟改变之后的DOM有关，那么就应该使用 Vue.nextTick()