VUE项目初加载页面闪烁问题
一、前言写项目的会经常使用到v-if进行判断,但是因为加载或编译原因会导致页面最初加载的时候出现闪烁问题;二、解决办法使用v-cloak,我的理解是:只有编译没完成时才有,用了css将它隐藏,这样编译成功后才显示,所以解决了闪烁问题;大佬给出的解答是:v-cloak指令和css规则如[v-cloak]{display:none}一起用时,这个指令可以隐藏未编译的Mustache标签直到实例准备完毕
·
一、前言
写项目的会经常使用到v-if进行判断,但是因为加载或编译原因会导致页面最初加载的时候出现闪烁问题;
二、解决办法
使用v-cloak,我的理解是:只有编译没完成时才有,用了css将它隐藏,这样编译成功后才显示,所以解决了闪烁问题;大佬给出的解答是:v-cloak指令和css规则如[v-cloak]{display:none}一起用时,这个指令可以隐藏未编译的Mustache标签直到实例准备完毕。v-cloak 指令可以像css选择器一样绑定一套css样式然后这套css会一直生效到实例编译结束。
用法如下:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
[v-cloak] {
display: none;
}
</style>
<script src="vue.js" ></script>
</head>
<body>
<div id="demo">
<span>{{message}}</span>
<span v-cloak>{{message}}</span>
</div>
<script type="text/javascript">
var app=new Vue({
el:'#demo',
data:{
message:'hello vue'
}
});
</script>
</body>
</html>
三、总结
1.vue官方文档是这么说的,v-if 也是惰性的:如果在初始渲染时条件为假,则什么也不做——直到条件第一次变为真时,才会开始渲染条件块。
2.原因可能是:vue是通过编译替换的,可能在显示时编译还未完成,所以有闪烁。
3.在简单项目中,使用 v-cloak 指令是解决屏幕闪动的好方法。但在大型、工程化的项目中(webpack、vue-router)只有一个空的 div 元素,元素中的内容是通过路由挂载来实现的,这时我们就不需要用到 v-cloak 指令了。
更多推荐
已为社区贡献1条内容
所有评论(0)