vue页面闪屏闪退的解决方案v-cloakv-textv-ifv-else

Posted 2022-06-04 web半晨

目录

• 1、v-if
• 2、花括号闪退

---

1、v-if

描述

当需要根据后端返回数据渲染时，后端如果返回数据不为空渲染对应值，如果为空则渲染自定义的组件（标签/元素）。需要等待接口请求成功才能做判断，所以不能使用vue自带的v-cloak命令，此命令只针对花括号绑定语法有用。使用v-if可以更好更有效的解决闪屏问题。

---

v-if与v-show的区别

1、v-if只会在满足条件时才会编译，且v-if使用的是销毁和重建DOM的方式实现显示与隐藏元素。也就是说，在使用v-if时，若值为false，那么页面将不会生成html标签/元素。
2、v-show不管是否满足条件始终会编译，且v-show的显示与隐藏只是切换CSS的display属性。v-show不论其值是false还是true，html元素/标签都会存在。
3、一般来说，v-if有更高的切换消耗，而v-show有更高的初始渲染消耗。因此，如果是需要频繁切换的功能，使用v-show较好，如果在运行时条件不大可能改变使用v-if较好。
4、v-if指令可以应用于template包装元素上，而v-show不支持template。
5、v-show不能与v-else配合使用，因为它们不是一个级别的物种，v-show只能与v-show配合使用，v-if只能与v-else配合使用。
6、在本例中无法把v-if绑定在template组件上，但是建议除了div跟标签，还是可以绑定到template上，多重防范，确保有效，亲测多次都不行。

---

使用v-if解决闪屏

<template v-if="flashingScreen">
	<div v-if="flashingScreen">
		<h1>闪屏</h1>
		<div v-if="obj.name">姓名：obj.nam</div>
		<div v-else>暂无数据</div>
	</div>
</template>

---

export default 
	data() 
		return 
			// 解决闪屏问题
			flashingScreen: false,
			obj: ,
		;
	,
	created() 
		this.getDataList();
	,
	
	methods: 
		getDataList() 
			try 
				let result = getDataLists( id: '123652569' );
				this.obj.name = result.name;
				this.$nextTick(() => 
          			this.flashingScreen = true;
        		);
			 catch 
				this.$nextTick(() => 
          			this.flashingScreen = true;
        		);
			
		,
	,
;

---

2、花括号闪退

在脚手架中一般不会出现花括号闪退问题，目前遇到的花括号闪退只在CND引入使用时存在。

---

v-cloak

<div v-cloak> message </div>

---

[v-cloak] 
	display: none;

---

1、v-cloak指令和css规则如[v-cloak] display: none 一起用时，这个指令可以隐藏未编译的Mustache标签直到实例准备完毕。
2、v-cloak指令可以像css选择器一样绑定一套css样式然后这套css会一直生效到实例编译结束。
3、注意样式层级，最好使用!important提高样式层级。
4、注意css存放位置导致无效，v-cloak的这个样式放在@import引入的css文件中不起作用，可以放在link引入的css文件里或者内联样式中。
5、样式最好放在整个文件最前面为好，切莫放在末尾，会影响编译且导致无效。

---

v-text

<span v-text="message"></span>

---

虽然在vue的HTML标签里使用双号括号绑定变量，但是在vue内部，所有的双括号会被编译成textNode的一个v-text指令。而使用v-text的好处就是永远更好的性能，更重要的是可以避免FOUC (Flash of Uncompiled Content) ，也就是上面遇到的闪退问题。