Vue this.$nextTick

Vue this.$nextTick

		// 当我们需要在页面重新渲染后做些什么，可以使用  this.$nextTick函数==》 页面渲染·			  后异步触发

1. Vue 中的 nextTick 涉及到 Vue 中 DOM 的异步更新

2. Vue 实现响应式并不是数据发生变化之后 DOM 立即变化，而是按一定的策略进行 DOM 的更新。

3. $nextTick 是在下次 DOM 更新循环结束之后执行延迟回调，在修改数据之后使用 $nextTick，则可以在回调中获取更新后的 DOM，API 文档中官方示例如下：

`javascript

<div class="app">
  <div ref="msgDiv">{{msg}}</div>
  <div v-if="msg1">Message got outside $nextTick: {{msg1}}</div>
  <div v-if="msg2">Message got inside $nextTick: {{msg2}}</div>
  <div v-if="msg3">Message got outside $nextTick: {{msg3}}</div>
  <button @click="changeMsg">
    Change the Message
  </button>
</div>

new Vue({
  el: '.app',
  data: {
    msg: 'Hello Vue.',
    msg1: '',
    msg2: '',
    msg3: ''
  },
  methods: {
    changeMsg() {
      this.msg = "Hello world."  // 直接改变msg //但是dom 还没更新  //msg是 helloworld但是innerhtml 为 hellovue
      this.msg1 = this.$refs.msgDiv.innerHTML  // 因为dom没更新，所以取不到更改后的dom
      this.$nextTick(() => {
        this.msg2 = this.$refs.msgDiv.innerHTML   // 异步更新就是默认会在dom渲染完成后重新走这个函数，所以这时取到的时更改后的 Hello World
      })
      this.msg3 = this.$refs.msgDiv.innerHTML // gello vue
    }
  }
})