Vue14 条件渲染
转：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,我们得像这样写一个条件块: <!-- Handlebars 模板 --> {{#if ok}} <h1>Yes</h1 ...
- &&运算符，三木运算符与React的条件渲染
在使用react框架的时候中往往会遇到需要条件渲染的情形,这时候,许多人会设想采用if语句来实现,比如下面,当满足条件condition时,conditonRender渲染组件ComponentA,当 ...
- 前端MVC Vue2学习总结（四）——条件渲染、列表渲染、事件处理器
一.条件渲染 1.1.v-if 在字符串模板中,如 Handlebars ,我们得像这样写一个条件块: <!-- Handlebars 模板 --> {{#if ok}} <h1&g ...
- vue笔记-条件渲染
条件渲染 1:指令v-if单独使用和结合v-else //单独使用 <h1 v-if="ok">Yes</h1> //组合使用 <h1 v-if=&q ...
随机推荐
- CC1,3,6回顾
前言 前面陆续学习了CC1,CC3,CC6,以及TemplatesImpl以及改造,有点乱,正所谓温故而知新嘛,所以这篇就回顾一下,捋一捋,解决一些细节问题. CC1 由于CC1要介绍CC链的几个关键 ...
- RobotFrameWork基础一
1.变量: 作用域: Set Global Variables:设定全局级变量 Set Suite Variables: 设定Test Suite 级变量 Set Test ...
- php + layui 文件上传 以及 拖拽上传
HTML: <div id="box"> <div id="drop_area">将文件拖拽到此区域</div> <d ...
- 解决sox报错sox FAIL formats: no handler for given file type `mp3
sudo apt-get install libsox-fmt-mp3
- PostgreSQL函数：查询包含时间分区字段的表，并更新dt分区为最新分区
一.需求 1.背景 提出新需求后,需要在www环境下进行验收.故需要将www环境脚本每天正常调度 但由于客户库无法连接,ods数据无法每日取,且连不上客户库任务直接报错,不会跑ods之后的任务 故需要 ...
- 【SQL】SQL常见窗口函数整理汇总大全（用到over的场景）
〇.概述 1.常用网站 SQL窗口函数:https://blog.csdn.net/liangmengbk/article/details/124253806 2.介绍 像聚合函数一样对一组数据进行分 ...
- 【SQL】窗口函数：求数据组内累计值和累计百分比
〇.概述 1.所需资料 窗口函数实现组内百分比.累计值.累计百分比:https://blog.csdn.net/weixin_39751959/article/details/88828922 2.背 ...
- 【笔面试真题】Flow++赋乐科技-面试-2022年1月25日
一.概括 涉及JVM的GC.三色标记 并发部分的锁 Java集合中的hashmap.list kafka中ISR相关 硬件相关-有无DMA 自定义类(代码) 缺陷:锁.list 二.JVM相关内容 1 ...
- 解析【.mdb】文件
有一些项目用的是微软的access软件,这里面存放数据用的是mdb结尾的文件 有的时候,客户想开发一个新的系统,但是数据需要从这些文件中获取,因此得解析这些文件,来提取数据 一.解析时用到的依赖 1. ...
- 铁威马NAS添加SSL证书实现HTTPS安全访问
如何让你的铁威马NAS域名可以支持HTTPS呢?其实想要支持HTTPS,只需要获取第三方签发的证书,信任你的域名就可以啦! 在铁威马TOS 4.2系统中,允许用户导入安全证书,或者自我颁发安全证书,这 ...