前言

项目中，我们希望在html加载完成后获取某个元素的宽度，把获取宽度的方法写在mounted函数里，会发现很多时候会取不到正确的宽度，这是什么原因呢？
js里有个渲染线程类似于java里边的主线程，主线程按顺序执行代码，执行完才会有空去看看任务栈里边有没有任务需要执行，有的话就拿来到主线程里边执行，setTimeout就把里边的代码放到任务栈中（类似于子线程）了，所以setTimeout里边这部分代码会在主线程执行完才会执行。
而此时我们可以替换掉看起来比较low的setTimeout(fn, 0)，而是用vue里面提供的this.$nextTick()，也就好比我们将打印输出的代码放在setTimeout(fn, 0)中。

例1

<template>
  <section>
    <div ref="hello">
      <h1>Hello World ~</h1>
    </div>
    <el-button type="danger" @click="get">点击</el-button>
  </section>
</template>
<script>
  export default {
    methods: {
      get() {
      }
    },
    mounted() {
      console.log(333);
      console.log(this.$refs['hello']);
      this.$nextTick(() => {
        console.log(444);
        console.log(this.$refs['hello']);
      });
    },
    created() {
      console.log(111);
      console.log(this.$refs['hello']);
      this.$nextTick(() => {
        console.log(222);
        console.log(this.$refs['hello']);
      });
    }
  }
</script>

nextTick1.png

可以根据打印的顺序看到，在created()钩子函数执行的时候DOM 其实并未进行任何渲染，而此时进行DOM操作并无作用，而在created()里使用this.$nextTick()可以等待dom生成以后再来获取dom对象

例2

<template>
  <section>
    <h1 ref="hello">{{ value }}</h1>
    <el-button type="danger" @click="get">点击</el-button>
  </section>
</template>
<script>
  export default {
    data() {
      return {
        value: 'Hello World ~'
      };
    },
    methods: {
      get() {
        this.value = '你好啊';
        console.log(this.$refs['hello'].innerText);
        this.$nextTick(() => {
          console.log(this.$refs['hello'].innerText);
        });
      }
    },
    mounted() {
    },
    created() {
    }
  }
</script>

nextTick2.png

根据上面的例子可以看出，在方法里直接打印的话， 由于dom元素还没有更新， 因此打印出来的还是未改变之前的值，而通过this.$nextTick()获取到的值为dom更新之后的值