标签：重复数据 har logs 没有 dom sha rip 有关 on()
在谈nextTick之前，先要说明一件事，可能在我们平时使用vue时并没有关注到，事实上，vue执行的DOM更新是异步的。
举个栗子：
<template>
<div class="con">{{msg}}</div>
<template>
<script>
export default{
data(){
return{
msg:0,
}
},
mounted(){
this.msg = 1000;
console.log(document.querySelector(".con").innerHTML);
}
}
</script>
此时控制台打印的是数值是0；这时候如果你将代码改一下：
<template>
<div class="con">{{msg}}</div>
<template>
<script>
export default{
data(){
return{
msg:0,
}
},
mounted(){
this.msg = 1000;
setTimeout(function(){
console.log(document.querySelector(".con").innerHTML);
},0)
}
}
</script>
这时，控制台打印的数值为1000；这也就说明，vue的DOM更新是异步的，官网上是这样描述的：
可能你还没有注意到，Vue 异步执行 DOM 更新。只要观察到数据变化，Vue 将开启一个队列，并缓冲在同一事件循环中发生的所有数据改变。如果同一个 watcher 被多次触发，只会一次推入到队列中。这种在缓冲时去除重复数据对于避免不必要的计算和 DOM 操作上非常重要。然后，在下一个的事件循环“tick”中，Vue 刷新队列并执行实际 (已去重的) 工作。
而这次要谈的nextTick，其实就是上面setTimeout，目的也很简单，就是为了让DOM更新后立即执行一个回调函数：
<template>
<div class="con">{{msg}}</div>
<template>
<script>
export default{
data(){
return{
msg:0,
}
},
mounted(){
this.msg = 1000;
this.nextTick(() =>{
console.log(document.querySelector(".con").innerHTML);
})
}
}
</script>
控制台也会打印1000！
标签：重复数据 har logs 没有 dom sha rip 有关 on()
原文地址：http://www.cnblogs.com/caideyipi/p/7583320.html
