vue2.X基础知识七之$nextTick

<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.showText = true;
			var text = document.getElementById('div').innerHTML;            		
            		console.log(text);
            	}
            }
        });
</script>

上面代码执行后，会抛出一个错误： cannot read property 'innerHTML' of null;这里涉及到一个重要的概念： 异步更新队列。

Vue在观察到数据变化时并不是直接更新DOM，而是开启一个队列，并缓冲在同一事件循环中发生的所有数据改变。在缓冲时会去除重复数据，从而避免不必要的计算和DOM操作。然后，在下一个事件循环tick中，Vue刷新队列并执行实际工作。

事实上，在执行this.showDiv = true;时，div仍然还是没有被创建出来，直到下一个Vue事件循环时，才开始创建。$nextTick就是用来知道什么时候DOM更新完成的，所以上面的示例代码需要修改为：

<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;
			// 等待dom更新完成后执行回调		
            		this.$nextTick(function() {
            			var text = document.getElementById('div').innerHTML;
            			console.log(text);
            		});
            	}
            }
        });   
    </script>

理论上，我们应该不用主动去操作DOM，因为Vue的核心思想就是数据驱动DOM，但在很多业务里，我们避免不了会使用一些第三方库，比如swiper等，这些机遇原生js的库都有创建和更新及销毁的完整声明周期，与Vue配合使用时，就要利用好$nextTick。

本文摘抄自书籍《Vue.js实战》