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 $.ajax入门应用二
Nov 19 Javascript
jQuery循环滚动展示代码 可应用到文字和图片上
May 11 Javascript
Jquery遍历节点的方法小集
Jan 22 Javascript
jquery delay()介绍及使用指南
Sep 02 Javascript
jQuery实现的网格线绘制方法
Jun 20 Javascript
Bootstrap 3.x打印预览背景色与文字显示异常的解决
Nov 06 Javascript
Bootstrap模态框案例解析
Mar 05 Javascript
react router 4.0以上的路由应用详解
Sep 21 Javascript
jquery简单实现纵向的无缝滚动代码实例
Apr 01 jQuery
使用Angular material主题定义自己的组件库的配色体系
Sep 04 Javascript
微信小程序缓存支持二次开发封装实现解析
Dec 16 Javascript
原生JS实现留言板
Mar 26 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与jquery设置和读取cookies
2013/08/08 PHP
php实现给一张图片加上水印效果
2016/01/02 PHP
PHP各种异常和错误的拦截方法及发生致命错误时进行报警
2016/01/19 PHP
PHP的时间戳与具体时间转化的简单实现
2016/06/13 PHP
PHP使用PDO抽象层获取查询结果的方法示例
2018/05/10 PHP
javascript 网页跳转的方法
2008/12/24 Javascript
利用javascript实现一些常用软件的下载导航
2009/08/03 Javascript
Jquery的Tabs内容轮换效果实现代码,几行搞定
2014/02/12 Javascript
js 中将多个逗号替换为一个逗号的代码
2014/06/07 Javascript
一个支付页面DEMO附截图
2014/07/22 Javascript
使用控制台破解百小度一个月只准改一次名字
2015/08/13 Javascript
JS把内容动态插入到DIV的实现方法
2016/07/19 Javascript
JavaScript数组去重由慢到快由繁到简(优化篇)
2016/08/26 Javascript
Node.js + Redis Sorted Set实现任务队列
2016/09/19 Javascript
模板视图和AngularJS之间冲突的解决方法
2016/11/22 Javascript
jQuery焦点图左右转换效果
2016/12/12 Javascript
Vuejs实现带样式的单文件组件新方法
2017/05/02 Javascript
浅谈angular4 ng-content 中隐藏的内容
2017/08/18 Javascript
vue学习笔记之v-if和v-show的区别
2017/09/20 Javascript
Angular resolve基础用法详解
2018/10/03 Javascript
layDate日期控件使用方法详解
2018/11/15 Javascript
微信小程序与后台PHP交互的方法实例分析
2018/12/10 Javascript
Vue插件从封装到发布的完整步骤记录
2019/02/28 Javascript
vue 关闭浏览器窗口的时候,清空localStorage的数据示例
2019/11/06 Javascript
JS实现音乐钢琴特效
2020/01/06 Javascript
vue-cli设置css不生效的解决方法
2020/02/07 Javascript
[00:44]2016完美“圣”典 风云人物:Mikasa宣传片
2016/12/07 DOTA
python实现的系统实用log类实例
2015/06/30 Python
Pyqt清空某一个QTreeewidgetItem下的所有分支方法
2019/06/17 Python
HTML5 画布canvas使用方法
2016/03/18 HTML / CSS
英国女士家居服网站:hush
2017/08/09 全球购物
策划主管的工作职责
2013/11/24 职场文书
成功的酒店创业计划书
2013/12/27 职场文书
公司年会晚会开幕词
2019/04/02 职场文书
导游词之南京栖霞山
2019/10/18 职场文书
详解Spring事件发布与监听机制
2021/06/30 Java/Android