用v-cloak解决特殊情况下页面加载遇到延迟时样式错乱的情况

用v-cloak解决特殊情况下页面加载遇到延迟时样式错乱的情况

首先我们设置一个定时器来模拟页面加载延迟的情况

模拟页面加载延迟效果图:

可以看到，页面没有完全加载出来时，数据是没有真正绑定上去的，所以它显示出了{{message}}，而当页面加载完毕时数据才真正绑定要页面，才能正常渲染出我们想要的效果

如果我们想，当页面加载遇到延迟时为了防止数据显示的丑化，那我们就让它没有加载出来时先完全隐藏掉，等加载完毕再让它显示出来，这样就能防止用户看到一些丑化的数据了

解决方法:利用 v-cloak指令

v-clock指令的作用：当Vue在解析页面前，绑定有v-clock指令的元素会一直存在v-clock这个属性，而当Vue解析到这个元素后，v-clock这个属性会自动从元素中移除掉

知道了v-clock指令的作用后，我们可以通过与style样式的配合来做到未解析之前元素隐藏的效果

1. 当页面解析到#app时，发现它身上有一个v-clock属性，而这个属性的样式会让#app隐藏起来
2. 当定时器结束后,v-clock属性自动删除,那么隐藏的样式也没有了，此时数据也已经绑定到页面上了