vue异步更新Dom策略及nextTick
操作DOM
在使用vue.js的时候，会因为一些特定的场景，不得不操作dom，比如这样：
<template>
<div>
<div ref="test">{{test}}</div>
<button @click="handleClick">tet</button>
</div>
</template>
export default {
data () {
return {
test: 'begin'
};
},
methods () {
handleClick () {
this.test = 'end';
console.log(this.$refs.test.innerText);//打印“begin”
}
}
}
打印的结果是begin，为什么我们明明已经将test这是成了“end”，获取真是dom节点的innerText却没有得到预期结果begin呢？
watcher队列
当某个响应式数据发生变化的时候，它的setter函数会通知闭包中的Dep，Dep则会调用它管理的所有watch对象。触发watch对象的update实现
update () {
/* istanbul ignore else */
if (this.lazy) {
this.dirty = true
} else if (this.sync) {
/*同步则执行run直接渲染视图*/
this.run()
} else {
/*异步推送到观察者队列中，下一个tick时调用。*/
queueWatcher(this)
}
}
vue默认就是使用的异步执行dom更新。当异步执行update的时候，会调用queueWatcher函数
//将一个观察者对象push进观察者队列，在队列中已经存在相同的id，则该观察者对像则跳过，除非它是在队列中刷新时推送
export default queueWatcher(watcher:Watcher){
//获取watcher的id
const id= watcher.id
//检验id是否存在，已经存在的话则直接跳过，不存在则标记哈希表has，用于下次检验
if(has[is]==null){
has[is]=true
//如果没有被flush，直接push到队列中即可
if(!flushing){
queue.push(watcher)
}else{
let i=queue.lenght-1
while(i>=0&&queue.[i].id>watcher.id){
i--
}
queue.splice(Math.max(i,index)+1,0,watcher)
}
if(!waiting){
waiting=true
nextTick(flushSchedulerQueue)
}
}
}
watch对象并不是立即更新视图，而是被push进一个队列queue，此时状态处于waiting的状态，这时候会继续会有watch对象被push，等到下一个tick运行时，这些watch对象才会被遍历取出，更新视图。
那么什么是下一个tick？
nextTick
vue中提供一个nextTick函数，其实就是上面调用的nextTick
为什么要异步更新视图
<template>
<div>
<div>{{test}}</div>
</div>
</template>
export default {
data () {
return {
test: 0
};
},
mounted () {
for(let i = 0; i < 1000; i++) {
this.test++;
}
}
}
现在有这样的一种情况，mounted的时候test的值被++循环执行1000次。每次++时，都会根据响应式触发setter>Dep>watcher>update>patch.如果这时候没有异步更新视图，那么每次都会直接操作dom更新视图，这是非常消耗性能的。所以vue.js实现了一个queue队列，在下一个tick的时候会统一执行queue中watcher的run。同时，拥有相同id的watcher不会被重复加入到该queue中，所以不会执行1000次watcher的run。最终更新视图只会直接test对应的dom的0变成1000.保证更新视图操作dom的动作实在当前栈执行完成下一个tick的时候调用，大大优化了性能。
所以我们需要在修改data中的数据后访问真实的dom节点更新后的数据，只需要这样，我们给文章第一个例子进行修改
<template>
<div>
<div ref="test">{{test}}</div>
<button @click="handleClick">tet</button>
</div>
</template>
export default {
data () {
return {
test: 'begin'
};
},
methods () {
handleClick () {
this.test = 'end';
this.$nextTick(() => {
console.log(this.$refs.test.innerText);//打印"end"
});
console.log(this.$refs.test.innerText);//打印“begin”
}
}
}
使用Vue.js的global API的$nextTick方法，即可在回调中获取已经更新好的DOM实例了。
