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>闪屏{obj.nam}} 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 }} 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">