vue页面闪屏、闪退的解决方案、v-cloak、v-text、v-if、v-else

---

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) ，也就是上面遇到的闪退问题。