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的操作，都需要用到异步更新队列