Vue中的$nextTick？

NextTick是什么？

官方定义：

在下次DOM更新循环结束之后执行延迟回调，在修改数据之后立即使用这个方法，获取更新后的DOM,说白了就是：在Vue
更新DOM时是异步执行的，当数据发生变化，Vue将开启一个异步更新队列，视图需要等队列中所有数据变化完成之后，再统一进行更新

举例

<div id="app" ref="DomNode"> {{ message }} </div>

const vm = new Vue({
  el: '#app',
  data: {
    message: '初始值'
  }
})

this.message = '修改后的值One'
this.message = '修改后的值Tow'
this.message = '修改后的值Three'

这时候想获取页面最新的DOM节点，却发现获取到的是初始值，数据并未渲染

console.log(vm.$el.textContent) // 初始值

//解决方案
this.$nextTick(()=>{
	let dom = this.$refs.DomNode;//利用 ref 来获取dom节点刷新dom以及数据
	console.log(dom)
	this.$forceUpdate()//强制更新数据
})

这是因为message数据在发现变化的时候，Vue并不会立刻去更新DOM，而是将修改数据的操作放在了一个异步操作队列里面，如果一直修改相同的数据，异步操作队列还会进行去重，等待同一事件循环中的所有数据变化完成之后,会将队列中的事件拿来进行处理，进行DOM的更新

为什么要有NextTick?

如果没有NextTick更新机制，在处理for循环时每次更新值都会触发视图更新，有了NextTick机制，只需要更新一次，所以NextTick本质是一种优化策略。