Vue内置指令——v-show和v-if指令

目录

前言

一、v-show指令

1、原理

2、实现

二、v-if指令

1、原理

2、实现

三、v-show和v-if指令的区别

1、控制手段不同

2、编译过程不同

3、编译条件不同

4、性能消耗不同

四、v-show和v-if使用场景

---

前言

首先需要了解Vue的渲染逻辑：

• 将模板template解析成AST；
• 再将AST转化为Render函数；
• 通过Watcher监听数据的变化；
• 当数据发生变化时，Render函数执行生成虚拟VNode节点，该节点包含创建DOM节点所需信息；
• 通过patch方法，对比新旧VNode对象，通过DOM diff算法，添加、修改、删除真实DOM节点。

Vue中指令都是带有v-的特殊属性，这些指令主要是用来控制DOM元素的行为，例如最简单的显示、隐藏。本文将讲解Vue中非常常用的两个条件指令—— v-show 和 v-if 。

一、v-show指令

1、原理

v-show指令是根据条件显示DOM元素的指令，可以用来动态控制DOM元素的显示和隐藏。v-show后面跟的是判断条件，不管初始条件是什么，元素总是会被渲染。

语法：

v-show="判断变量"

当v-show值为false时，绑定DOM的 display:none 当v-show值为true时，绑定DOM会 移除display:none ，此时并不是把display变为block，而是保持元素style的原始性，也就是说，不管初始条件是什么，元素总是会被渲染。

2、实现

从实现效果可以看出DOM元素始终是存在的，v-show只是利用元素的display属性控制着元素的显示隐藏。

实现效果：