现象:
在使用 vuejs、angularjs 开发时,经常会遇见浏览器页面闪现表达式 ({{ express }} ), 或者是模块(div)的闪烁。
原因:
由于 JavaScript 去操作DOM,都会等待 DOM 加载完成(DOM ready)。对于 vuejs、angularjs 这些会在 DOM ready 完会才回去解析 html view Template,所以对于 Chrome 这类快速的浏览器你会看见有闪烁的情况出现。而对于IE7,8这类解析稍慢的浏览器大部分情况下是不会出现这个问题的(没验证过....)。
解决办法:
vuejs、angularjs中为我们提供了v-cloak、ng-cloak来实现防止闪烁的方案。
用法(vue 为例):
index.css :
[v-cloak] { display: none; }
index.vue :
<div v-cloak>
{{ message }}
</div>
直到 表达式编译完成,div 才会显示
原理:
带有 v-clock 的的元素设置为 display:none,隐藏掉,在等到 vue 解析到带有 v-clock 的节点时候,会把 attribute 和 class 同时remove掉,这样就可以实现防止节点的闪烁。
注意:
在实际使用中,v-for 循环数据时可能会遇到不起作用的现象,要把 v-clock 放在跟 v-for 同一个标签上,仅供参考。