vue之nextTick

nextTick

由于VUE的数据驱动视图更新，是异步的，即修改数据的当下，视图不会立刻更新，而是等同一事件循环中的所有数据变化完成之后，再统一进行视图更新。

JS异步编程

javascript语言的执行环境是单线程的，一次只能执行一个任务，多任务需要排队等候，这种模式会阻塞代码，为了避免这个问题出现异步编程，本质同构回调函数来实现异步代码的存放与执行。

事件循环和消息队列

eventloop是一种循环机制，不断去轮询一些队列，从中找到需要执行的任务并按顺序执行的一个执行模型。
消息队列：用来存放宏任务的队列。
开始整个脚本作为宏任务执行，执行过程中同步代码直接执行，宏任务等待时间到了将方法放入宏任务队列，微任务进入微任务队列，当主线程宏任务执行完出队，检查并清空微任务队列，。

用法

在下次DOM更新循环结束之后执行延迟回调。在修改数据之后立即使用这个方法，获取更新后的DOM。
Vue在修改数据后，视图不会立刻更新，而是等同一事件循环中的所有数据变化完成之后，再统一进行视图更新。

<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."
      this.msg1 = this.$refs.msgDiv.innerHTML
      this.$nextTick(() => {
        this.msg2 = this.$refs.msgDiv.innerHTML
      })
      this.msg3 = this.$refs.msgDiv.innerHTML
    }
  }
})

应用场景

1）在Vue生命周期的created()钩子函数进行dom操作一定要放在Vue.nextTick()的回调函数组。
2）在数据变化后要执行的某个操作，而这个操作需要使用随数据改变而改变的dom结构的时候，这个操作需要放进Vue.nextTick()的回到函数中