如何防止Vue在小项目中闪屏
一句话总结HTML:elementplusv-cloakCSS:[v-cloak]{display:none}页面刚加载时会显示小胡子语法。v-cloak是在VueJS小项目中提升用户体验的一种简单而重要的方式。用法将v-cloak添加到你需要在HTML中组织闪烁的标签{{text}}
在CSS中为v-cloak设置样式，该样式仅在[vue实例编译结束前]应用。[v-cloak]{显示：无；}原理我没有看过源码，但是对v-cloak的原理有一个大致的了解：首先是CSS选择器，使用[target]选择“所有具有target属性的元素。”。你可以在这里查看选择器。然后[v-cloak]选择所有具有v-cloak属性的元素。实例初始化完成后，VueJS将移除Vue中的unique属性。在实例初始化完成之前，上面写的主要HTML代码实际上是这样的：其实不只是v-cloak，你可以用v-if试试，在CSS中使用[v-if]{display:none}，效果看起来是一样的。和v-cloak一样，v-if也去掉了实例编译后源码然后我看了刚才的源码，大概就是这一段，有兴趣的可以去搜索，阅读理解。if(isRealElement){//安装到真实元素//检查这是否是服务器呈现的内容以及我们是否可以执行//成功的水合作用。if(oldVnode.nodeType===1&&oldVnode.hasAttribute(SSR_ATTR)){oldVnode.removeAttribute(SSR_ATTR);补水=真；}}每次Tail博客说水，都怕自己理解错了。我希望我能尽快长大。
