解决vue渲染时闪烁{{}}的问题

Posted 2020-11-23 myfate

原文转自： 点我

Vue页面加载时v-show设置的隐藏元素出现导致页面闪烁问题
在写APP社区页面的时候在一些地方用了v-show，在刷新页面的时候就发现即便在逻辑判断为false某些元素不该显示时也会露个脸，一闪而过，元素快小还好，如果是特别大的地方就看起来就很不爽，于是就上网搜了下看有没有解决方法，结果还真有。

方法一: v-cloak
官方的解释就一句话：这个指令保持在元素上直到关联实例结束编译。
光看这句话一头雾水，后面紧接着说了用法：

和 CSS 规则如 [v-cloak] { display: none } 一起用时，这个指令可以隐藏未编译的 Mustache 标签直到实例准备完毕。

也就是说v-cloak指令可以像CSS选择器一样绑定一套CSS样式然后这套CSS会一直生效到实例编译结束。
示例代码：（亲测可用）

<template>
  <keep-alive include="index">
    <router-view v-cloak></router-view>
  </keep-alive>
</template>

<style>
  /* 隐藏Vue代码，所有的组件设置成隐藏 */
  [v-cloak]:not(body) {
    display: none;
  }
</style>

　　

方法二: v-text
vue中我们会将数据包在两个大括号中，然后放到html里，但是在vue内部，所有的双括号会被编译成textNode的一个v-text指令。
而使用v-text的好处就是永远更好的性能，更重要的是可以避免FOUC (Flash of Uncompiled Content) ，也就是上面与遇到的问题。

示例代码：

<span v-text="msg"></span>
<!-- same as -->
<span>{{msg}}</span>