理解vue中$nextTick

vue采用数据驱动视图更新，是异步的，当数据发生改变，视图不会立即更新，而是要等到同一事件循环中所有数据变化完成后，再统一对视图进行更新。

$nextTick在DOM完成更新后立即执行回调函数

例子：

<template>
  <div>
    <p>1111111111111</p>
    <p ref="p2" v-if="show">222222222222</p>
    <button @click="handleBtn">显示</button>
  </div>
</template>

<script>
export default {
  data () {
    return {
      show: false
    }
  },
  methods: {
    handleBtn () {
      this.show = true
      console.log(this.$refs['p2'].innerHTML)
    }
  }
}
</script>

当点击按钮时程序将会报错，因为DOM是异步更新的，当执行this.$refs['p2'].innerHTML时，show的值还是false，取不到p元素

修改代码：

<template>
  <div>
    <p>1111111111111</p>
    <p ref="p2" v-if="show">222222222222</p>
    <button @click="handleBtn">显示</button>
  </div>
</template>

<script>
export default {
  data () {
    return {
      show: false
    }
  },
  methods: {
    handleBtn () {
      this.show = true
      this.$nextTick(() => {
        console.log(this.$refs['p2'].innerHTML)
      })
    }
  }
}
</script>

这时$nextTick就派上用处，当DOM更新后在执行，也就是当this.show更新后在执行console.log(this.$refs['p2'].innerHTML)

参考：
https://www.cnblogs.com/hity-tt/p/6729118.html
源码解析：
https://juejin.im/post/5a6fdb846fb9a01cc0268618