3/18 Vue中$nextTick的作用是什么？

前面的话

前端日问，巩固基础，不打烊！！！

解答

• 首先Vue中有一个重要的概念：异步更新队列
• Vue异步更新DOM的原理：Vue在观察到数据变化时，并不是直接更新DOM，而是开启一个队列，并且缓存同一轮事件循环中的所有数据改变。在缓冲时会除去重复的操作,等到下一轮事件循环时，才开始更新。
• 异步更新队列实现的选择 ： Vue会根据当前浏览器环境优先使用原生的Promise.then和MutationObserver（现已经换为MessageChannel ,是宏任务），如果都不支持，就会采用setTimeout代替。
• 最后：$nextTick就是用来告知DOM什么时候更新完，当DOM更新完毕后，nextTick方法里面的回调就会执行。

看个例子：

有一个div，默认用 v-if 将它隐藏，点击一个按钮后，改变 v-if 的值，让它显示出来，同时拿到这个div的文本内容。如果v-if的值是 false，直接去获取div内容是获取不到的，因为此时div还没有被创建出来，那么应该在点击按钮后，改变v-if的值为 true，div才会被创建，此时再去获取，示例代码如下：

<div id="app">
    <div id="div" v-if="showDiv">这是一段文本</div>
    <button @click="getText">获取div内容</button>
</div>
<script>
var app = new Vue({
    el : "#app",
    data:{
        showDiv : false
    },
    methods:{
     	/*
    	getText:function(){
            this.showDiv = true;
            var text = document.getElementById('div').innnerHTML;
             console.log(text);
        }*/
        getText:function(){
            this.showDiv = true;
            this.$nextTick(function(){
                  var text = document.getElementById('div').innnerHTML;
                 console.log(text);  
            });
        }
    }
})
</script>

如果像注释的代码，不加nextTick这个方法，就会报错，因为DOM更新是在下一次事件循环，才更新，所以此时获取不到div元素。

附加：

应用场景：mounted 获取ajax数据，后根据页面渲染数据的样式（文字占宽）来修改布局。几乎所有更新数据后操作dom的操作，都需要用到异步更新队列