vue的$nextTick做了什么

• 用法

  将回调延迟到下次 DOM 更新循环之后执行。在修改数据之后立即使用它，然后等待 DOM 更新。它跟全局方法 Vue.nextTick 一样，不同的是回调的 this 自动绑定到调用它的实例上。

  <template>
  	<div>{{message}}</div>
  </template>
  <script type="text/javascript">
  export default {
  	data() {
  	    return {
  	       message: '未更新'
  	    }
  	},
  	methods: {
  	    updateMessage () {
  		     this.message = '已更新'
  		     console.log(this.message) // => '未更新'
  		     this.$nextTick(function () {
  		        console.log(this.message) // => '已更新'
  		     })
  	    }
      }
  }
  </script>
  
  

  因为 $nextTick() 返回一个 Promise 对象，所以你可以使用新的 ES2017 async/await 语法完成相同的事情：

  methods: {
    updateMessage: async function () {
      this.message = '已更新'
      console.log(this.message) // => '未更新'
      await this.$nextTick()
      console.log(this.message) // => '已更新'
    }
  }