Vue中nextTick的使用

这段时间一直在负责一个前后端项目，前端是Vue+ElemeUI，由于自己之前只是会简单的使用 Vue 的一些初级命令，自然只能慢慢的踩坑，然后再出坑….。例如数组无法触发Vue的视图更新

刚开始在使用 Vue 的时候，一直都是在 created 方法里面获取后端数据进行渲染，这样用起来倒也没什么问题，只不过今天突然看到了 Vue 的nextTick 方法，感觉比之前在created里面请求后端更加高级。所以顺便研究了一波。

使用场景

nextTick常用于数据更新后，但是dom元素还未完成刷新，如何理解呢? 在 Vue 里面，更新 DOM 元素是异步的，也就是说当我们修改了数据之后，DOM元素并不会立即被刷新。参考深入响应式原理

如下Demo

<template>
<div>
<div :id='id'></div>
<el-button type="button" @click="nextClick">点击测试</el-button>
</div>
</template>
<script>
export default {
  data () {
    return {
      id: 'q'
    };
  },
  mounted () {
  },
  methods: {
    nextClick () {
      this.id = 'm';
      let obj = document.getElementById(this.id);
      var _this = this;
      this.$nextTick(() => {
        let one = document.getElementById(_this.id);
        console.log(one);
      });
      console.log(obj);
    }
  }
};
</script>

此时你在控制台会看到obj获取的是null，one获取的dom节点才是正确的。

StackOverFlow关于这个的另一个解释