24
2020
08

Vue异步更新队列

Vue 执行 DOM 更新时,只要观察到数据变化,就会自动开启一个队列,并缓冲在同一个事件循环中发生的所以数据改变。在缓冲时会去除重复数据,从而避免不必要的计算和 DOM 操作。以上面的代码举例,你用一个 for 循环来动态改变 isShow 100 次,其实它只会应用最后一次改变,如果没有这种机制,DOM 就要重绘 100 次,这固然是一个很大的开销。所以执行 this.isShow= true时,#textDiv 还没有被创建出来,直到下一个 Vue 事件循环时,才开始创建。

上面的代码应修改为:


getText:function(){

    this.showDiv = true;

    this.$nextTick(function(){

            var text = document.getElementById('div').innnerHTML;

            console.log(text);  

    });

}

« 上一篇 下一篇 »

发表评论:

◎欢迎参与讨论,请在这里发表您的看法、交流您的观点。