vue中的nextTick

作者 likaiqiang 日期 2017-03-25
vue中的nextTick

以前我对nextTick的理解不是很透彻,总感觉有什么地方没有理解。今天搜到了这张图,马上有种醍醐灌顶的感觉。

js框架从来没有脱离操作dom,只不过angular、react、vue这些框架替开发者操作dom,它们抽象出了许多概念,开发者只要掌握这些概念,理解它们,从而利用这些概念操纵框架,从而间接的操作dom。

vue中的数据双向绑定实际上是vue替我们操作dom,关于vue相关的dom操作,可以去看异步更新队列

vue在检测到有数据变化时,并不会马上去更新dom,中间有一点时间差。我们举个例子说明一下。

<div id="app">
<p id="txt">{{msg}}</p>
<button @click='change'>change</button>
</div>
var app = new Vue({
el:'#app',
data(){
return {
msg: 'hello vue'
}
},
methods:{
change(){
this.msg = 'hello vuex';
console.log(document.getElementById('txt').textContent);
}
}
})

当button被点击后,控制台输出的字符串仍旧是 hello vue,可见dom并没有立即更新,等到当前的事件循环”Tick”执行完毕,更新dom以后,开始下一个”Tick”,这时才会执行nextTick的回调。

用一段代码来表示

var app = new Vue({
el:'#app',
data(){
return {
msg: 'hello vue'
}
},
methods:{
change(){
this.msg = 'hello vuex';
console.log(document.getElementById('txt').textContent);
this.$nextTick(()=>{
console.log('next')
})
}
},
updated(){
console.log(this.msg)
}
})

先输出 hello vue,可见数据改变后dom并不会立马更新。

然后输出 hello vuex,其实是调用updated()的结果,表示当前”Tick”结束,dom更新了。

最后输出 next,是nextTick回调被调用的结果,表示vue已经开始下一个事件循环了。

ps:n久以后更新。哎,实在是惭愧,上面的一大堆废话还是没有理解本质,可以看这个