vue watch+$nextTick界面更新渲染数据

Vue更新时机:
	1.Vue在更新DOM时是异步执行的。
	2.只要侦听到数据变化,Vue将开启一个队列,并缓冲在同一事件循环中发生的所有数据变更。
	3.如果同一个watcher被多次触发,只会被推入到队列中一次。
	4.在下一个的事件循环“tick”中,Vue 刷新队列并执行实际 (已去重的) 工作。
	5.Vue在内部对异步队列尝试使用原生的(微任务)Promise.then、MutationObserver和setImmediate,如果执行环境不支持,则会采用(宏任务)setTimeout(fn, 0) 代替。

更新时对应的钩子函数:
	方式一:
		this.$nextTick(fn)
	
	方式二:未提供回调时,会返回一个Promise对象
		因为$nextTick()返回一个Promise对象,所以你可以使用async/await语法完成相同的事情
	
		await this.$nextTick()	await返回更新后的组件实例,且会等待this.$nextTick()结束再执行后续操作
		...更新后操作
		
  	方式三:
  		Vue.nextTick(fn);	自身返回一个Promise对象
  		Vue.nextTick()
		  .then(function () {
		    	DOM更新了
		  })
  		
  	
watch:
	监测数据改变,数据改变后此时数据更新,但界面未更新

wathc+$nextTick:
	实现数据更新后,界面更新时重新渲染数据
	
	watch:{
		xx(value){
			this.$nextTick(()=>{
				进行诸如拿到数据再创建实例等操作
			})
		}
	}

代码示例:

<div id="example">{{message}}</div>
var vm = new Vue({
  el: '#example',
  data: {
    message: '123'
  }
})
vm.message = 'new message' // 更改数据
vm.$el.textContent === 'new message' // false	textContent会返回浏览器最新的数据
Vue.nextTick(function () {
  vm.$el.textContent === 'new message' // true
})

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