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

目录

  • 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的显示与隐藏只是切换CSSdisplay属性。v-show不论其值是false还是truehtml元素/标签都会存在。
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>

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

你可能感兴趣的:(web,Vue,HTML,前端,vue.js,前端框架,html)