Vue数据绑定后文本闪烁问题分析及解决方案

Vue文本闪烁问题

一、问题描述

代码示例：

<div id="app">
    <span>{{user.userName}}</span>
</div>

页面显示：

{{user.userName}}

问题详情：在加载页面的时候，刚开始我们会看到  {{user.userName}}  ，而后才可以被绑定的数据所替换，影响用户的使用体验。

二、问题分析

只有在DOM加载完成后，JavaScript才可以去操作DOM。对于vuejs、angularjs这些会在DOM ready后会才解析视图模板，所以对于速度较快的浏览器，变回出现文本闪烁的情况。

三、解决方案

在 vue.js 已经给出了解决方案，即使用指令v-cloak；但是，如果页面中多个标签进行了数据绑定，我们显然不能对所有的标签一一使用v-cloak指令；其实，我们只需要找到Vue实例的挂载点el:"#app"，对该标签使用v-cloak即可。对应的html文件修改如下：

<div id="app">
    <span>{{user.userName}}</span>
</div>

另外，我们还需要在对应的css文件中添加以下样式：

[v-cloak] {
    display: none;
}

此时，文本闪烁问题已经解决；如果还是有文本闪烁的现象，请参考第四步：温馨提示。

四、温馨提示

1、v-cloak的 display 属性可能被层级更高的样式所覆盖，必要时可做以下处理。

[v-cloak] {
    display: none !important;
}

2、因 v-cloak 样式在@import 引入的css文件中不起作用，需放在link引入的css文件中或者内联样式中。

3、在v-cloak样式的上方， 不可以 有注释文字。