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

现象:

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

原文地址:https://www.cnblogs.com/zhangym118/p/10986253.html