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的可用于选项卡及幻灯的切换插件
Mar 28 Javascript
javascript 实现 秒杀,团购 倒计时展示的记录 分享
Jul 12 Javascript
关于javascript中dataset的问题小结
Nov 16 Javascript
jQuery旋转木马式幻灯片轮播特效
Dec 04 Javascript
谈谈我对JavaScript原型和闭包系列理解(随手笔记9)
Dec 24 Javascript
用JS生成UUID的方法实例
Mar 30 Javascript
详细谈谈AngularJS的子级作用域问题
Sep 05 Javascript
快速实现jQuery多级菜单效果
Feb 01 Javascript
JavaScript中创建对象的7种模式详解
Feb 21 Javascript
详解ES6之async+await 同步/异步方案
Sep 19 Javascript
js利用递归与promise 按顺序请求数据的方法
Aug 30 Javascript
2019年度web前端面试题总结(主要为Vue面试题)
Jan 12 Javascript
浅谈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代码
2006/12/06 PHP
php 模拟POST提交的2种方法详解
2013/06/17 PHP
jQuery中的RadioButton,input,CheckBox取值赋值实现代码
2014/02/18 PHP
ThinkPHP3.1新特性之命名范围的使用
2014/06/19 PHP
php中使用url传递数组的方法
2015/02/11 PHP
php 参数过滤、数据过滤详解
2015/10/26 PHP
详解PHP的Yii框架中日志的相关配置及使用
2015/12/08 PHP
PHP链表操作简单示例
2016/10/15 PHP
Laravel 加载第三方类库的方法
2018/04/20 PHP
Laravel5.1 框架表单验证操作实例详解
2020/01/07 PHP
不懂JavaScript应该怎样学
2008/04/16 Javascript
JS面向对象编程之对象使用分析
2010/08/19 Javascript
js+xml生成级联下拉框代码
2012/07/24 Javascript
jQuery点击后一组图片左右滑动的实现代码
2012/08/16 Javascript
fmt:formatDate的输出格式详解
2014/01/09 Javascript
JavaScript中Array对象用法实例总结
2016/11/29 Javascript
jQuery中extend函数简单用法示例
2017/10/11 jQuery
JavaScript使用百度ECharts插件绘制饼图操作示例
2019/11/26 Javascript
Python实现一个简单的MySQL类
2015/01/07 Python
Python中元组,列表,字典的区别
2017/05/21 Python
微信跳一跳自动运行python脚本
2018/01/08 Python
python 爬虫 批量获取代理ip的实例代码
2018/05/22 Python
python实现多线程端口扫描
2019/08/31 Python
Python 用turtle实现用正方形画圆的例子
2019/11/21 Python
使用python实现回文数的四种方法小结
2019/11/24 Python
Python生成六万个随机,唯一的8位数字和数字组成的随机字符串实例
2020/03/03 Python
tensorflow转换ckpt为savermodel模型的实现
2020/05/25 Python
Python3爬虫中Ajax的用法
2020/07/10 Python
HTML5全屏(Fullscreen)API详细介绍
2015/04/24 HTML / CSS
毕业生教师求职信
2013/10/20 职场文书
办公经费申请报告
2015/05/15 职场文书
寻找最美乡村教师观后感
2015/06/18 职场文书
爱国主义教育基地观后感
2015/06/18 职场文书
解决python绘图使用subplots出现标题重叠的问题
2021/04/30 Python
Vue过滤器(filter)实现及应用场景详解
2021/06/15 Vue.js
Pytorch中使用ImageFolder读取数据集时忽略特定文件
2022/03/23 Python