聊聊VUE中的nextTick

Posted 2020-10-08 手撕黄油

在谈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！