有一个div,默认用 v-if 将它隐藏 ,点击一个按钮后,改变 v-if 的值,①让它显示出来,②同时拿到这个div的文本内容。如果v-if的值是 false,直接去获取div内容是获取不到的,因为此时div还没有被创建出来,那么应该在点击按钮后,改变v-if的值为 true,div才会被创建,此时再去获取,示例代码如下:
运行后在控制台会抛出一个错误:Cannot read property 'innnerHTML of null,意思就是获取不到div元素:
这里就涉及Vue一个重要的概念:异步更新队列.
异步更新队列
Vue在观察到数据变化时并不是直接更新DOM,而是开启一个队列,并缓冲在同一个事件循环中发生的所数有据改变。在缓冲时会去除重复数据,从而避免不必要的计算和DOM操作。然后,在下一个事件循环tick中,Vue刷新队列并执行实际(已去重的)工作。所以如果用一个for循环来动态改变数据100次,其实它只会应用最后1次改变,如果没有这种机制,DOM就要重绘100次,这固然是一个很大的开销。
异步更新队列内部实现机制
Vue会根据当前浏览器环境优先使用原生的Promise.then和
MutationObserver,如果都不支持,就会采用setTimeout代替。知道了Vue异步更新DOM的原理,上面示例的报错也就不难理解了。事实上,在执行this.showDiv = true时,div仍然还是没有被创建出来,直到下一个vue事件循环时,才开始创建。$nextTick就是用来 '知道什么时候DOM更新完成' 的,所以上面的示例代码需要修改为,把DOM操作放在$nextTick()方法内,如下图:
这时再点击事件,控制台就打印出div的内容“这是一段文本“了:
閱讀更多 代碼開發 的文章