一、NextTick是什么
官方对其的定义
在下次DOM更新循环结束之后执行延迟回调。在修改数据之后立即使用这个方法,获取更新后的DOM。
什么意思呢?
我们可以理解成,Vue在更新DOM时是异步执行的。当数据发生变化,Vue将开启一个异步更新队列,视图需要等队列中所有数据变化完成之后,再统一进行更新
举例一下
Html 结构
<div id="app">{
{message}}</div>
构建一个 vue 实例
const vm = new Vue({
el:"#app",
data:{
message:"原始值"
}
})
修改message
this.message = '修改后的值1'
this.message = '修改后的值2'
this.message = '修改后的值3'
这时后想获取页面最新的DOM节点,却发现获取到的是旧值
console.log(vm.$el.textContent)
这是因为message数据再发现变化的时候,vue并不会立刻去更新Dom,而是将修改数据的操作放在了一个异步操做队列中
如果我们一直修改