v-show和v-if的区别 及应用场景
2022-06-19 13:49:02 来源：易采站长站 作者：
目录
一、v-show与v-if的共同点二、v-show与v-if的区别三、v-show与v-if原理分析v-show原理v-if原理四、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-if 较好
到此这篇关于v-show和v-if的区别 及应用场景的文章就介绍到这了,更多相关v-show和v-if 内容请搜索易采站长站以前的文章或继续浏览下面的相关文章希望大家以后多多支持易采站长站！
如有侵权，请联系QQ:279390809 电话：15144810328
最新图文推荐
相关文章
-
vue跳转不同页面的多种方法 1：router-link跳转 !-- 直接跳转 --router-link to='/testDemo' button点击跳转2/button/router-link !-- 带参数跳转 --router-link :to="{path:'testDemo',query:{setid:123456}}" button点击跳转2020-03-26
-
Vue+elementUI实现多图片上传与回显功能（含回显后继续上传或删除
最近有使用vue+elementUI实现多图片上传的需求，遂做此纪录。 本次主要写一下前端的实现细节，至于后台以Multipart[ ]数组接收即可，不再赘述，网上一搜大把文章可供参考。 本次使用2020-03-23
-
上效果图: 一:搜索框功能实现 1.在首页做一个搜索框的样式并实现跳转到搜索页面 view class='page_row' bindtap="suo" view class="search" view class="df search_arr" icon class="searchcion" size='20' type='search'/2020-03-10
-
本文实例为大家分享了微信小程序分享朋友圈海报的具体代码，供大家参考，具体内容如下 思路：生成朋友圈海报放在公共文件，首先需要绘制canvas，点击分享朋友圈按钮，在手机屏幕2020-06-21
-
当下， 我们几乎所有的项目都是基于 webpack、rollup 等构建工具进行开发的，模块化已经是常态。 我们对它并不陌生，今天，我们就再系统的回顾一下ES6的模块机制， 并总结下常用的操2020-07-04
-
Vue-router 报错NavigationDuplicated的解决方法
版本：3.1.x 报错原因： 使用push()、replace()进行导航时，不能重复导航到当前路由。 解决办法： 方法1：在定义路由的文件中router/index.js const originalPush = VueRouter.prototype.pushVueRouter.protot2020-03-31
-
本文实例为大家分享了vue实现滑动以及左右联动效果的具体代码，供大家参考，具体内容如下 一、首先需要在项目中引入better-scroll 1. 在package.json 直接写入 "better-scroll":"^1.15.1" 版本以2020-06-30
-
在Vue项目中，引入到工程中的所有js、css文件，编译时都会被打包进vendor.js，浏览器在加载该文件之后才能开始显示首屏。若是引入的库众多，那么vendor.js文件体积将会相当的大，影响2020-06-25
豫公网安备 41019702003123号