vue渲染时闪烁{{}}的问题及解决方法


Posted in Javascript onMarch 28, 2018

v-if和v-show可能是日常开发中最常用的两个指令,虽然看上去两者功能是类似的,但是两者还是存在很大区别的。

 v-if与v-show区别:

在切换 v-if 块时,Vue.js 有一个局部编译/卸载过程,因为 v-if 之中的模板也可能包括数据绑定或子组件。v-if 是真实的条件渲染,因为它会确保条件块在切换当中合适地销毁与重建条件块内的事件监听器和子组件。

v-if 也是惰性的:如果在初始渲染时条件为假,则什么也不做——在条件第一次变为真时才开始局部编译(编译会被缓存起来)。

相比之下,v-show 简单得多——元素始终被编译并保留,只是简单地基于 CSS 切换。

简单来说二者最大的区别是v-if只会在满足条件时才会编译,而v-show不管是否满足条件始终会编译,v-show的显示与隐藏只是简单的切换CSS的display属性。

 适用场景:

明白了二者的本质区别后什么时候适合用v-if什么时候用v-show也变得简单了。

一般来说,v-if 有更高的切换消耗而 v-show 有更高的初始渲染消耗。因此,如果需要频繁切换 v-show 较好,如果在运行时条件不大可能改变 v-if 较好。

比如说现在很多页面在不同端表现是不同的,最常见的是很多的APP页面在微信端打开时页面上会显示下载的提示,而在APP内部则不会,像这样的情况每个端的状态在加载时就是确定的不会变的就适合用v-if,这样在APP内打开时显示下载的部分直接就不会编译。

而像页面上元素根据不同条件显示/隐藏这样的地方用v-show是最合适的了,因为像这种基本上两个状态要频繁切换,如上面所说,v-show的切换消耗是小于v-if的。

 多条件

很多时候代码中需要多条件判断,但是vue中只有v-if和v-else,没有v-elseif这样的指令。虽然没有类似的指令,但依旧还是有几种方法可以解决这个问题。

 方法一:template

<div v-if="xxx"></div>
<template v-else>
<div v-if="yyy"></div>
<div v-else></div>
</template>

 方法二:partical

元素是已注册的 partial 的插槽,partial 在插入时被 Vue 编译。 元素本身会被替换。 元素需要指定 name 特性。

这货让人想起javaScript原生的fragement元素,但却不是一个东西。partial有静态和动态之分,而要解决上面的问题就要用到动态partial。

示例:

// 注册 partial
Vue.partial('my-partial', '<p>This is a partial! {{msg}}</p>')
<!-- 静态 partial -->
<partial name="my-partial"></partial>
<!-- 动态 partial -->
<!-- 渲染 partial,id === vm.partialId -->
<partial v-bind:name="partialId"></partial>

要解决多个条件的问题,我们就可以为每种情况预先注册好各自的partial,然后将partial的name属性绑定到判断条件,这样就能实现多个条件判断。

 其他:

1.v-if指令可以应用于template包装元素上,而v-show不支持templete

2.将v-show应用在组件上时,因为指令的优先级 v-else 会出现问题,解决办法就是用另一个 v-show 替换 v-else

官方给出的示例如下:

// 错误
<custom-component v-show="condition"></custom-component>
<p v-else>这可能也是一个组件</p>
// 正确做法
<custom-component v-show="condition"></custom-component>
<p v-show="!condition">这可能也是一个组件</p>

Vue页面加载时v-show设置的隐藏元素出现导致页面闪烁问题

在写APP社区页面的时候在一些地方用了v-show,在刷新页面的时候就发现即便在逻辑判断为false某些元素不该显示时也会露个脸,一闪而过,元素快小还好,如果是特别大的地方就看起来就很不爽,于是就上网搜了下看有没有解决方法,结果还真有。

 方法一: v-cloak

官方的解释就一句话:这个指令保持在元素上直到关联实例结束编译。

 光看这句话一头雾水,后面紧接着说了用法:

和 CSS 规则如 [v-cloak] { display: none } 一起用时,这个指令可以隐藏未编译的 Mustache 标签直到实例准备完毕。

也就是说v-cloak指令可以像CSS选择器一样绑定一套CSS样式然后这套CSS会一直生效到实例编译结束。

 示例代码:

// <div> 不会显示,直到编译结束。
[v-cloak] {
display: none;
}
<div v-cloak>
{{ message }}
</div>

 方法二: v-text

vue中我们会将数据包在两个大括号中,然后放到HTML里,但是在vue内部,所有的双括号会被编译成textNode的一个v-text指令。

 而使用v-text的好处就是永远更好的性能,更重要的是可以避免FOUC (Flash of Uncompiled Content) ,也就是上面与遇到的问题。

示例代码:

<span v-text="msg"></span>
<!-- same as -->
<span>{{msg}}</span>

总结

以上所述是小编给大家介绍的vue渲染时闪烁{{}}的问题及解决方法 ,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
读jQuery之三(构建选择器)
Jun 11 Javascript
HTML复选框和单选框 checkbox和radio事件介绍
Dec 12 Javascript
jQuery在html有效在jsp无效的原因及解决方法
Aug 02 Javascript
js获取网页可见区域、正文以及屏幕分辨率的高度
May 15 Javascript
javascript去除空格方法小结
May 21 Javascript
javascript实现获取浏览器版本、浏览器类型
Dec 02 Javascript
jQuery遮罩层效果实例分析
Jan 14 Javascript
JavaScript中的冒泡排序法
Aug 03 Javascript
AngularJS入门教程之更多模板详解
Aug 19 Javascript
Vue结合SignalR实现前后端实时消息同步
Sep 19 Javascript
ReactJS实现表单的单选多选和反选的示例
Oct 13 Javascript
jquery.param()实现数组或对象的序列化方法
Oct 08 jQuery
浅谈js获取ModelAndView值的问题
Mar 28 #Javascript
vue页面加载闪烁问题的解决方法
Mar 28 #Javascript
jQuery实现浏览器之间跳转并传递参数功能【支持中文字符】
Mar 28 #jQuery
vue-cli axios请求方式及跨域处理问题
Mar 28 #Javascript
Vue 项目中遇到的跨域问题及解决方法(后台php)
Mar 28 #Javascript
浅谈React高阶组件
Mar 28 #Javascript
vue数据控制视图源码解析
Mar 28 #Javascript
You might like
php项目打包方法
2008/02/18 PHP
php上传图片生成缩略图(GD库)
2016/01/06 PHP
Yii2.0 Basic代码中路由链接被转义的处理方法
2016/09/21 PHP
javascript 图片上传预览-兼容标准
2009/06/01 Javascript
使图片旋转的3种解决方案
2013/11/21 Javascript
javascript:void(0)的问题使用探讨
2014/04/10 Javascript
jQuery.each使用详解
2015/07/07 Javascript
实例讲解JS中setTimeout()的用法
2016/01/28 Javascript
JS中的进制转换以及作用
2016/06/26 Javascript
JavaScript数据结构与算法之基本排序算法定义与效率比较【冒泡、选择、插入排序】
2019/02/21 Javascript
vue-cli webpack配置文件分析
2019/05/20 Javascript
JavaScript数组及常见操作方法小结
2019/11/13 Javascript
Echarts实现多条折线可拖拽效果
2019/12/19 Javascript
js实现橱窗展示效果
2020/01/11 Javascript
跟老齐学Python之集合(set)
2014/09/24 Python
用Python制作简单的朴素基数估计器的教程
2015/04/01 Python
极简的Python入门指引
2015/04/01 Python
python简单实现基数排序算法
2015/05/16 Python
编写自定义的Django模板加载器的简单示例
2015/07/21 Python
Python删除Java源文件中全部注释的实现方法
2017/08/30 Python
打包python 加icon 去掉cmd黑窗口方法
2019/06/24 Python
在pytorch中查看可训练参数的例子
2019/08/18 Python
win10下python2和python3共存问题解决方法
2019/12/23 Python
Merrell迈乐澳大利亚网站:购买户外登山鞋
2017/05/28 全球购物
欧洲最大的球衣网上商店:Kitbag
2017/11/11 全球购物
台湾最大银发乐活百货:乐龄网
2018/05/21 全球购物
100%植物性、有机、即食餐:Sakara Life
2018/10/25 全球购物
人力资源管理专业学生自我评价
2013/11/20 职场文书
物业公司采购员岗位职责
2013/12/31 职场文书
大三学生入党思想汇报
2014/01/02 职场文书
初中生物教学反思
2014/01/10 职场文书
新年抽奖获奖感言
2014/03/02 职场文书
保护水资源的标语
2014/06/17 职场文书
python 爬取豆瓣网页的示例
2021/04/13 Python
java协程框架quasar和kotlin中的协程对比分析
2022/02/24 Java/Android
纯CSS打字动画的实现示例
2022/08/05 HTML / CSS