转：https://blog.csdn.net/weixin_57519185/article/details/121168426

1 简介

　　通过指令v-show和v-if可以实现条件渲染。它们都能控制元素在页面是否显示。当表达式都为 false 时，都不会占据页面位置，当表达式结果为 true 时，都会占据页面的位置

2 v-show与v-if的区别

　　1）控制手段不同：v-show隐藏，是为该元素添加css--display:none，dom元素依旧还在。v-if显示隐藏是将dom元素整个添加或删除

　　2）编译过程不同：v-if切换有一个局部编译/卸载的过程，切换过程中合适地销毁和重建内部的事件监听和子组件；v-show只是简单的基于css切换

　　3）编译条件不同：v-if是真正的条件渲染，它会确保在切换过程中条件块内的事件监听器和子组件适当地被销毁和重建。只有渲染条件为假时，并不做操作，直到为真才渲染

　　　　v-show 由false变为true的时候不会触发组件的生命周期

　　　　v-if由false变为true的时候，触发组件的beforeCreate、create、beforeMount、mounted钩子，由true变为false的时候触发组件的beforeDestory、destoryed方法

　　4）性能消耗：v-if有更高的切换消耗；v-show有更高的初始渲染消耗；

3 v-show与v-if原理分析

　　具体解析流程这里不展开讲，大致流程如下

　　　　将模板template转为ast结构的JS对象

　　　　用ast得到的JS对象拼装render和staticRenderFns函数

　　　　render和staticRenderFns函数被调用后生成虚拟VNODE节点，该节点包含创建DOM节点所需信息

　　　　vm.patch函数通过虚拟DOM算法利用VNODE节点创建真实DOM节点

3.1 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)

  }

}

3.2 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

          )

        }

      }

    })

  }

)

4 v-show与v-if的使用场景

　　v-if 与 v-show 都能控制dom元素在页面的显示

　　v-if 相比 v-show 开销更大的（直接操作dom节点增加与删除）

　　如果需要非常频繁地切换，则使用 v-show 较好

　　如果在运行时条件很少改变，则使用 v-if 较好

5 简要示例

<body>

    <div id="root">

     <input v-model="name" v-if="a==1"></input> <br/><br/>

     <input v-model="address" v-show="b==2"></input> <br/>

    </div>

    <script type="text/javascript" >

     const vm = new Vue({

      el:'#root',

      data:{

       name:'历史',

       address:'杭州',

       a:1,

       b:2

      }

    })

     </script>

    </body>

令a=3,b=3两个输入框就都不在页面上了

Vue14 条件渲染的更多相关文章

CSharpGL(30)用条件渲染(Conditional Rendering)来提升OpenGL的渲染效率
CSharpGL(30)用条件渲染(Conditional Rendering)来提升OpenGL的渲染效率当场景中有比较复杂的模型时,条件渲染能够加速对复杂模型的渲染. 条件渲染(Conditio ...
微信小程序-视图条件渲染
条件渲染 wx:if 在框架中,我们用 wx:if="{{condition}}" 来判断是否需要渲染该代码块: <view wx:if="{{condition} ...
关于vue.js中条件渲染的练习
html: <!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8 ...
Vue#条件渲染
根据不同的条件,响应不同的事件. https://jsfiddle.net/miloer/zed5p1r3/ 可以用template来包装元素,当然浏览器的最终渲染结果不会包含它.我觉得主要用它来自定 ...
03-Vue入门系列之Vue列表渲染及条件渲染实战
3.1. 条件渲染有时候我们要根据数据的情况,决定标签是否进行显示或者有其他动作.最常见的就是,表格渲染的时候,如果表格没有数据,就显示无数据.如果有数据就显示表格数据. Vue帮我们提供了一个v- ...
Vue条件渲染
gitHub地址:https://github.com/lily1010/vue_learn/tree/master/lesson08 一 v-if显示单个元素注意else只能跟在v-if或者v-s ...
Vue.js学习 Item7 -- 条件渲染与列表渲染
v-if 在字符串模板中,如 Handlebars,我们得像这样写一个条件块:  {{#if ok}} <h1>Yes</h1 ...
&&运算符，三木运算符与React的条件渲染
在使用react框架的时候中往往会遇到需要条件渲染的情形,这时候,许多人会设想采用if语句来实现,比如下面,当满足条件condition时,conditonRender渲染组件ComponentA,当 ...
前端MVC Vue2学习总结（四）——条件渲染、列表渲染、事件处理器
一.条件渲染 1.1.v-if 在字符串模板中,如 Handlebars ,我们得像这样写一个条件块:  {{#if ok}} <h1&g ...
vue笔记-条件渲染
条件渲染 1:指令v-if单独使用和结合v-else //单独使用 <h1 v-if="ok">Yes</h1> //组合使用 <h1 v-if=&q ...

随机推荐

Python用yield form 实现异步协程爬虫
很古老的用法了,现在大多用的aiohttp库实现,这篇记录仅仅用做个人的协程底层实现的学习. 争取用看得懂的字来描述问题. 1.什么是yield 如果还没有怎么用过的话,直接把yield看做成一种特殊 ...
K8s集群环境搭建
K8s集群环境搭建 1.环境规划 1.1 集群类型 Kubernetes集群大体上分为两类:一主多从和多主多从一主多从:一台master节点和多台node节点,搭建简单,但是有单机故障风险,适用于测 ...
【大数据课程】高途课程实践-Day03：Scala实现商品实时销售统计
〇.概述 1.实现内容使用Scala编写代码,通过Flink的Source.Sink以及时间语义实现实时销量展示 2.过程 (1)导包并下载依赖 (2)创建数据源数据表并写⼊数据 (3)在Mysql ...
【离线数仓】Day02-用户行为数据仓库：分层介绍、环境搭建（hive、tez）、LZO压缩、建表查询导入加索引、编写脚本
一.数仓分层概念 1.为什么要分层 ODS:原始数据层 DWD层:明细数据层 DWS:服务数据层 ADS:数据应用层 2.数仓分层 3.数据集市与数据仓库概念 4.数仓命名规范 ODS层命名为odsD ...
PAM8403 3.3V音频功放调试笔记
做I2S输出用了PT8211(实际上买到的丝印是GH8211), 双声道, LSB格式, 工作正常但是输出功率非常低, 喇叭声音要贴近了才能勉强听到, 所以打算做一个PT8211带功放的I2S模块. ...
Java开发如何通过IoT边缘ModuleSDK进行协议转换？
摘要:使用ModuleSDK开发插件应用,接入其他协议设备(如HTTP请求数据),将其他协议的数据转化为MQTT协议JSON数据上报到IoTDA. 本文分享自华为云社区<[华为云IoTEdge开 ...
大角度非迭代的空间坐标旋转C#实现
1. 绪论在前面文章中提到空间直角坐标系相互转换,测绘坐标转换时,一般涉及到的情况是:两个直角坐标系的小角度转换.这个就是我们经常在测绘数据处理中,WGS-84坐标系.54北京坐标系.80西安坐标系 ...
JavaScript冒泡排序+Vue可视化冒泡动画
冒泡排序(Bubble Sort)算是前端最简单的算法,也是最经典的排序算法了.网上JavaScript版本的冒泡排序很多,今天用Vue实现一个动态的可视化冒泡排序. 01.JavaScript冒泡排 ...
Jmeter ForEach 循环控制器
ForEach Controller 即循环控制器,顾名思义是定义一种循环规则,如下图: 1.名称:控制器名称,可根据用户需要任意填写,也可不填 2.注释:用户可根据需要任意填写,也可不填 3.输入变 ...

Vue14 条件渲染