vue异步更新Dom策略及nextTick

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实例了。