10.Vue 对nextTick的理解

1.nextTick是什么

官方定义：在下次DOM更新循环结束之后执行延迟回调。在修改数据之后立即使用这个方法，获取更新之后的DOM

可以理解成，Vue更新DOM是异步执行的。当数据发生变化，Vue将开启一个异步更新队列，视图需要等待队列中所有数据变化完成之后，再统一进行更新

<template>
  <div>
    <span id="message">{{ message }}</span>
  </div>
</template>

<script>
export default {
  data () {
    return {
      message: 'Adong'
    }
  },
  methods: {
    change () {
      this.message = 'srd'
      console.log(document.getElementById('message').innerText)// Adong
      this.$nextTick(() => {
        console.log(document.getElementById('message').innerText)// srd
      })
    }
  },
  mounted () {
    this.change()
  }
}
</script>

2.为什么要有nextTick

 {{num}}
 for(let i=0; i<100000; i++){
     num = i
 }

若没有nextTick，那么每一次更新num值，都会触发视图更新，则视图将更新一万次，如果有nextTick机制，则只用更新一次，所以nextTick本质上就是一种优化策略