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 相关文章推荐
js常用函数 不错
Sep 08 Javascript
用javascript实现页面打印的三种方法
Mar 05 Javascript
jQuery 判断图片是否加载完成方法汇总
Aug 10 Javascript
JavaScript事件学习小结(一)事件流
Jun 09 Javascript
简易的JS计算器实现代码
Oct 18 Javascript
es7学习教程之fetch解决异步嵌套问题的方法示例
Jul 21 Javascript
浅谈vue中数据双向绑定的实现原理
Sep 14 Javascript
微信小程序使用toast消息对话框提示用户忘记输入用户名或密码功能【附源码下载】
Dec 09 Javascript
JavaScript设计模式之模板方法模式原理与用法示例
Aug 07 Javascript
一个小时快速搭建微信小程序的方法步骤
Apr 15 Javascript
JavaScript canvas实现跟随鼠标事件
Feb 10 Javascript
vue-router定义元信息meta操作
Dec 07 Vue.js
浅谈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
Zend Framework教程之Zend_Layout布局助手详解
2016/03/04 PHP
关于PHP定时发送服务的解决办法
2017/04/23 PHP
详解phpstorm2020最新破解方法
2020/09/17 PHP
背景音乐每次刷新都可以自动更换
2007/02/01 Javascript
JS控制阿拉伯数字转为中文大写示例代码
2013/09/04 Javascript
jquery使用jquery.zclip插件复制对象的实例教程
2013/12/04 Javascript
javascript实现浏览器窗口传递参数的方法
2014/09/03 Javascript
javascript实现简单的贪吃蛇游戏
2015/03/31 Javascript
JavaScript中switch语句的用法详解
2015/06/03 Javascript
coffeescript使用的方式汇总
2015/08/05 Javascript
jQuery带进度条全屏图片轮播特效代码分享
2020/06/28 Javascript
JavaScript实现自定义媒体播放器方法介绍
2017/01/03 Javascript
flexslider.js实现移动端轮播
2017/02/05 Javascript
js编写选项卡效果
2017/05/23 Javascript
Bootstrap按钮组实例详解
2017/07/03 Javascript
详谈for循环里面的break和continue语句
2017/07/20 Javascript
微信小程序文章详情页面实现代码
2018/09/10 Javascript
angular4强制刷新视图的方法
2018/10/09 Javascript
js实现简单抽奖功能
2020/11/24 Javascript
Antd的Table组件嵌套Table以及选择框联动操作
2020/10/24 Javascript
学习 Vue.js 遇到的那些坑
2021/02/02 Vue.js
Phantomjs抓取渲染JS后的网页(Python代码)
2016/05/13 Python
pygame 精灵的行走及二段跳的实现方法(必看篇)
2017/07/10 Python
Python基于回溯法子集树模板解决全排列问题示例
2017/09/07 Python
windows下python之mysqldb模块安装方法
2017/09/07 Python
python中文分词教程之前向最大正向匹配算法详解
2017/11/02 Python
Python中.join()和os.path.join()两个函数的用法详解
2018/06/11 Python
Django后端发送小程序微信模板消息示例(服务通知)
2019/12/17 Python
海蓝之谜(LA MER)澳大利亚官方商城:全球高端奢华护肤品牌
2017/10/27 全球购物
财务出纳岗位职责
2014/02/03 职场文书
前厅收银主管岗位职责
2014/02/04 职场文书
党的群众路线教育实践活动学习心得体会
2014/03/03 职场文书
农村婚礼主持词
2014/03/13 职场文书
小学生保护环境倡议书
2014/05/15 职场文书
元旦主持词开场白
2015/05/29 职场文书
vue使用localStorage持久性存储实现评论列表
2022/04/14 Vue.js