Vue2中this.$nextTick的作用和应用场景

Vue2中this.$nextTick的作用和应用场景

1、Vue中概念：异步更新队列

1.1、Vue异步更新DOM的原理：

Vue在观察到数据变化时，并不是直接更新DOM，而是开启一个队列，并且缓存同一轮事件循环中的所有数据改变。在缓冲时会除去重复的操作,等到下一轮事件循环时，才开始更新。

1.2、异步更新队列实现的选择 ：

Vue会根据当前浏览器环境优先使用原生的Promise.then和MutationObserver（现已经换为MessageChannel ,是宏任务），如果都不支持，就会采用setTimeout代替。

1.3、$nextTick的作用：

就是用来告知DOM什么时候更新完，当DOM更新完毕后，nextTick方法里面的回调就会执行。

2、应用场景-实例

需求：

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

示例代码：

index.vue

<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').innerHTML;
                 console.log(text);  
            });
        }
    }
})
</script>

解析：

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

3、应用场景-描述

mounted 获取ajax数据，后根据页面渲染数据的样式（文字占宽）来修改布局。

几乎所有更新数据后操作dom的操作，都需要用到异步更新队列