vue网速较慢的时候会闪现显示"{{}}"？

Question

今天面试遇到问我vue加载的时候有时候会显示{{}}，如何解决页面闪现的问题。。。我工作那么久都没有遇到过这种问题。。。好像是说用v-cloak可以解决。。。是html解析的时候会闪现。。。但是我实际使用一次都没遇到过。。。即使是网速不好的时候。

想问问这种问题的产生原因，发生场景和具体解决方法。

Answer 1

如果你平常是用vue-cli编译项目的话，那你就不可能看到这种“闪现”了。
这种问题出现的场景仅限于 直接在HTML里写Vue指令的情况，浏览器在解析HTML的时候， Vue 应用的生命周期还没开始，所有写在标签内的变量/表达式引用都被浏览器当成 HTML 文本解析出来，当然也包括双花括号。
在如果用户禁用了 Javascript 的话，那这个“闪现”甚至都不会出现，双花括号和里面的内容会始终呈现在用户的面前。
解决的办法其实就是通过类名等方法标记出那些可能暴露的指令和表达式所在的元素，在 CSS 里隐藏它们，然后在 Vue 应用的 mounted 阶段移除标记，v-cloak 的原理应该也是如此。