vue中的$nextTick 解决DOM没有更新完成问题

vue中的$nextTick很多人比较陌生，主要是这个很少用，我几乎是不用，但是看下面这个场景

        
这是一段文本
        获取div内容
    
    

点击按钮时发现后台会抛出错误：Cannot read property 'innerHTML' of null ，意思就是找不到div元素，这里就涉及vue一个重要概念：异步更新队列。

vue观察到数据变化并不是直接更新DOM，而是开启一个队列，并缓冲在同一个事件循环中发生的所有数据改变，在缓冲时会去除重复的数据，从而避免不必要的计算和DOM操作。在上面的例子中，执行“this.showDiv = true”时，div还没有创建出来，自然就会报错了，$nextTick就是用来知道什么时候DOM更新完成的，上面的代码修改如下：

getText: function(){
    this.showDiv = true;
    this.$nextTick(function(){
        var text = document.getElementById('div').innerHTML;
        console.log(text);
    })
                
}

加上$nextTick之后就可以获取div的内容了。