聊聊VUE中的nextTick

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

posted @ 2017-09-23 22:58 手撕黄油 阅读(...) 评论(...) 编辑 收藏