v-show和v-if的区别 及应用场景
一、v-show与v-if的共同点
我们都知道在 vue
中 v-show
与 v-if
的作用效果是相同的(不含v-else),都能控制元素在页面是否显示
在用法上也是相同的:
<Model v-show="isShow" /> <Model v-if="isShow" />
- 当表达式为
true
的时候,都会占据页面的位置 - 当表达式都为
false
时,都不会占据页面位置
二、v-show与v-if的区别
- 控制手段不同
- 编译过程不同
- 编译条件不同
- 控制手段:
v-show
隐藏则是为该元素添加css--display:none
,dom
元素依旧还在。v-if
显示隐藏是将dom
元素整个添加或删除 - 编译过程:
v-if
切换有一个局部编译/卸载的过程,切换过程中合适地销毁和重建内部的事件监听和子组件;v-show
只是简单的基于css切换 - 编译条件:
v-if
是真正的条件渲染,它会确保在切换过程中条件块内的事件监听器和子组件适当地被销毁和重建。只有渲染条件为假时,并不做操作,直到为真才渲染v-show
由false
变为true
的时候不会触发组件的生命周期v-if
由false
变为true
的时候,触发组件的beforeCreate
、create
、beforeMount
、mounted
钩子,由true
变为false
的时候触发组件的beforeDestory
、destoryed
方法
- 性能消耗:
v-if
有更高的切换消耗;v-show
有更高的初始渲染消耗;
三、v-show与v-if原理分析
具体解析流程这里不展开讲,大致流程如下:
- 将模板
template
转为ast
结构的JS
对象 - 用
ast
得到的JS
对象拼装render
和staticRenderFns
函数 render
和staticRenderFns
函数被调用后生成虚拟VNODE
节点,该节点包含创建DOM
节点所需信息vm.patch
函数通过虚拟DOM
算法利用VNODE
节点创建真实DOM
节点
v-show原理
不管初始条件是什么,元素总是会被渲染
我们看一下在vue
中是如何实现的
代码很好理解,有transition
就执行transition
,没有就直接设置display
属性
// https://github.com/vuejs/vue-next/blob/3cd30c5245da0733f9eb6f29d220f39c46518162/packages/runtime-dom/src/directives/vShow.ts export const vShow: ObjectDirective<VShowElement> = { beforeMount(el, { value }, { transition }) { el._vod = el.style.display === 'none' ? '' : el.style.display if (transition && value) { transition.beforeEnter(el) } else { setDisplay(el, value) } }, mounted(el, { value }, { transition }) { if (transition && value) { transition.enter(el) } }, updated(el, { value, oldValue }, { transition }) { // ... }, beforeUnmount(el, { value }) { setDisplay(el, value) } }
v-if原理
v-if
在实现上比v-show
要复杂的多,因为还有else
else-if
等条件需要处理,这里我们也只摘抄源码中处理 v-if
的一小部分
返回一个node
节点,render
函数通过表达式的值来决定是否生成DOM
// https://github.com/vuejs/vue-next/blob/cdc9f336fd/packages/compiler-core/src/transforms/vIf.ts export const transformIf = createStructuralDirectiveTransform( /^(if|else|else-if)$/, (node, dir, context) => { return processIf(node, dir, context, (ifNode, branch, isRoot) => { // ... return () => { if (isRoot) { ifNode.codegenNode = createCodegenNodeForBranch( branch, key, context ) as IfConditionalExpression } else { // attach this branch's codegen node to the v-if root. const parentCondition = getParentCondition(ifNode.codegenNode!) parentCondition.alternate = createCodegenNodeForBranch( branch, key + ifNode.branches.length - 1, context ) } } }) } )
四、v-show与v-if的使用场景
v-if
与 v-show
都能控制dom
元素在页面的显示
v-if
相比 v-show
开销更大的(直接操作dom
节点增加与删除)
- 如果需要非常频繁地切换,则使用 v-show 较好
- 如果在运行时条件很少改变,则使用 v-if 较好
到此这篇关于v-show和v-if的区别 及应用场景的文章就介绍到这了,更多相关v-show和v-if 内容请搜索猪先飞以前的文章或继续浏览下面的相关文章希望大家以后多多支持猪先飞!
原文出处:https://juejin.cn/post/7105405430809296904
相关文章
- 这篇文章主要介绍了JS跨浏览器解析XML应用过程详解,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下...2020-10-16
vivo X9如何查出后台偷跑流量应用?vivo X9查出后台偷跑流量应用的方法
vivo X9如何查看后台流量偷跑的情况?小编教你轻松查到!还不了解的小伙伴快来看看吧! 1)打开手机自带的【i管家】应用,打开后点击【流量监控】选项。(如下图) 2)接着选...2016-12-31- Redis是一个开源的使用ANSI C语言编写、支持网络、可基于内存亦可持久化的日志型、Key-Value数据库,并提供多种语言的API。本文我们来讲解Redis的应用场景实例。 C...2016-11-25
PHP explode()函数的几个应用和implode()函数有什么区别
explode()函数介绍explode() 函数可以把字符串分割为数组。语法:explode(separator,string,limit)。 参数 描述 separator 必需。规定在哪里分割字符串。 string...2015-11-08- Libevent 是一个用C语言编写的、轻量级的开源高性能网络库,主要有以下几个亮点:事件驱动( event-driven),高性能;轻量级,专注于网络,下文我们就一起来看PHP Libevent扩展安装...2016-11-25
- <? $a="变量的值将被带入"; echo <<< help <pre> php中echo <<< 的应用 虽然echo "...";可以断行,但若其中如出现",则仍需做转义 处理。需写做: echo " ...2016-11-25
- 这篇文章主要介绍了React Hooks常用场景的使用,根据使用场景分别进行举例说明,帮助你认识理解并可以熟练运用 React Hooks 大部分特性,感兴趣的可以了解一下...2021-04-13
- 1. PHP-GTK介绍 1.1 PHP-GTK PHP-GTK是PHP的延伸模组,它可以让程式设计师写出在客户端执行的、且独立的GUI的程式。这个模组不允许在浏览器上显视GTK+的程式,它一开始就...2016-11-25
- 这篇文章主要介绍了Vue中keep-alive的两种应用方式,文中讲解非常细致,代码帮助大家更好的理解和学习,感兴趣的朋友可以了解下...2020-07-15
- 这篇文章介绍了css中的float属性的应用和理解,让设置的标签产生浮动效果。希望能帮助到有需要的同学。 一、Float的特性 1. 应用于文字围绕图片 2. 创建一个块级框...2017-01-22
- [ajax介绍] ajax是使用客户端脚本与web服务器交换数据的web应用开发方法。web页面不用打断交互流程进行重新加裁,就可以动态地更新。使用ajax,用户可以创建接近本地...2016-11-25
- 这篇文章主要介绍了unity 切换场景不销毁物体问题的解决方案,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧...2021-04-14
php ob_start() ob_end_flush()缓存技术简单应用
本文章介绍了一个简单的关于php入门篇-缓存技术简单应用,有需要的朋友可以看看哦,这里是利用了ob_start(); ob_end_flush(); 来实例的。 代码如下 复制...2016-11-25- Android应用程序会通过一个工具将应用所有的CLASS文件转换成一个DEX文件,而后Dalvik虚拟机会从其中读取指令和数据。 Android 是Google开发的基于Linux平台的开源手机操...2016-09-20
时隔数日苹果又发布了iOS 10.2 Beta3:TV应用来了
网易科技讯 11月14日消息,据美国媒体报道,当日苹果开始推出iOS 10.2 Beta3公开测试版,距离发布iOS 10.2 Beta2发布后仅数日。此外,苹果还推出数周前发布MacBook Pro时提到的TV应用,现在该应用有了Up Next功能。...2016-11-22- 这篇文章主要介绍了c#多线程的应用,有需要的朋友可以参考一下...2020-06-25
- 安全配置和分析概述“安全配置和分析”是分析和配置本地系统安全性的一个工具。...2016-01-27
- 综述:表单作为用户提交信息的一个要害途径,一直是PHP编程中的一个最基本的方面,也是入门者会碰到的一个大的重点与难点。我们选择有关处理关联数、获得同名checkbox的选取...2016-11-25
解决echarts图表使用v-show控制图表显示不全的问题
这篇文章主要介绍了解决echarts图表使用v-show控制图表显示不全的问题,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧...2020-07-19- Php多线程的使用,首先需要PHP5.3以上版本,并安装pthreads PHP扩展,可以使PHP真正的支持多线程,扩展如何安装请自行百度 PHP扩展下载:https://github.com/krakjoe/pthre...2016-11-25