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 相关文章推荐
cnblogs中在闪存中屏蔽某人的实现代码
Nov 14 Javascript
javascript模拟select,jselect的方法实现
Nov 08 Javascript
jquery实现实时改变网页字体大小、字体背景色和颜色的方法
Aug 05 Javascript
JS封装cookie操作函数实例(设置、读取、删除)
Nov 17 Javascript
Webpack+Vue如何导入Jquery和Jquery的第三方插件
Feb 20 Javascript
JS检测是否可以访问公网服务器功能代码
Jun 19 Javascript
AngularJS通过ng-Img-Crop实现头像截取的示例
Aug 17 Javascript
JS+jQuery实现注册信息的验证功能
Sep 26 jQuery
使用Bootstrap4 + Vue2实现分页查询的示例代码
Dec 21 Javascript
jquery 输入框查找关键字并提亮颜色的实例代码
Jan 23 jQuery
Bootstrap popover 实现鼠标移入移除显示隐藏功能方法
Jan 24 Javascript
Jquery如何使用animation动画效果改变背景色的代码
Jul 20 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中取得image按钮传递的name值
2006/10/09 PHP
实用函数10
2007/11/08 PHP
php密码生成类实例
2014/09/24 PHP
完美解决phpdoc导出文档中@package的warning及Error的错误
2016/05/17 PHP
jQuery 性能优化指南 (1)
2009/05/21 Javascript
JavaScript 输入框内容格式验证代码
2010/02/11 Javascript
JQuery文字列表向上滚动的代码
2013/11/13 Javascript
jquery分析文本里url或邮件地址为真实链接的方法
2015/06/20 Javascript
JS两个数组比较,删除重复值的巧妙方法(推荐)
2016/06/03 Javascript
老生常谈 关于JavaScript的类的继承
2016/06/24 Javascript
简单理解js的冒泡排序
2016/12/19 Javascript
利用CSS、JavaScript及Ajax实现图片预加载的三大方法
2017/01/22 Javascript
详解Angular 4.x NgIf 的用法
2017/05/22 Javascript
原生js的ajax和解决跨域的jsonp(实例讲解)
2017/10/16 Javascript
JS实现模糊查询带下拉匹配效果
2018/06/21 Javascript
node实现生成带参数的小程序二维码并保存到本地功能示例
2018/12/05 Javascript
原生js实现针对Dom节点的CRUD操作示例
2019/08/26 Javascript
JS开发自己的类库实例分析
2019/08/28 Javascript
JavaScript实现切换多张图片
2021/01/27 Javascript
使用IPython下的Net-SNMP来管理类UNIX系统的教程
2015/04/15 Python
Python内置函数——__import__ 的使用方法
2017/11/24 Python
python+opencv实现动态物体识别
2018/01/09 Python
Centos7 Python3下安装scrapy的详细步骤
2018/03/15 Python
matplotlib 输出保存指定尺寸的图片方法
2018/05/24 Python
详解python statistics模块及函数用法
2019/10/27 Python
Pytorch GPU显存充足却显示out of memory的解决方式
2020/01/13 Python
PyTorch加载预训练模型实例(pretrained)
2020/01/17 Python
Farfetch阿联酋:奢侈品牌时尚购物平台
2019/07/26 全球购物
八年级生物教学反思
2014/01/22 职场文书
五年级音乐教学反思
2014/02/06 职场文书
秋天的图画教学反思
2014/05/01 职场文书
年检委托书
2014/08/30 职场文书
纪念九一八事变演讲稿:牢记历史,捍卫主权
2014/09/14 职场文书
北大自主招生自荐信
2015/03/04 职场文书
Alexa停服!网站排名将何去何从?目前还没有替代品。
2022/04/15 杂记
Golang bufio详细讲解
2022/04/21 Golang