一、原因：
问题：当我们打开Vue页面的时候，如果弱网环境，会出现一个闪烁的效果
下图：加载闪烁问题效果
image.png
原因：因为在浏览器中先执行html代码，先渲染Dom，然后再执行JavaScript代码，Vue还来不及处理的模板
引入式vue.js它是运行时编译的，脚手架项目是经过预编译的，所以也就解释了为什么会闪烁的原因。
二、解决：
在闪烁元素的最外层添加上一个v-cloak，并在css中添加样式：[v-cloak] {diaplay : none;}
v-cloak 这个指令可以隐藏未编译的Mustache标签，直到实例准备完毕。
原理：利用 v-cloak 这个指令使用 display:none 来进行隐藏
使用：直接在app这个写一个 v-cloak
借助一个CSS
[v-cloak]{
display:none
}
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<style>
[v-cloak]{
display: none;
}
</style>
</head>
<body>
<div id="app" v-cloak>
{{msg}}
</div>
</body>
<script src="./js/vue.global.js"></script>
<script>
/*
问题: 当我们打开Vue页面的时候,如果弱网环境,会出现一个闪烁的效果
原因: Vue还来不及处理的模板
解决: 使用 v-cloak 来解决Vue这个打开页面的闪烁的问题
原理: 利用 v-cloak 这个指令使用 display:none 来进行隐藏
使用: 直接在app这个写一个 v-cloak
借助一个CSS
[v-cloak]{
display:none
}
*/
// 使用一个定时器模拟效果
setTimeout(() => {
Vue.createApp({
data() {
return {
msg:'hello world',
};
},
}).mount("#app");
},3000);
</script>
</html>
网友评论