vue 解析时表达式闪烁的问题

Posted 2021-12-24 zhangym118

 

现象：

　　在使用 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 同一个标签上，仅供参考。