v-if VS v-show 2.0

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-if 对元素的复用性再学习

之前文章里已经提到过 Vue 会尽可能高效地渲染元素，通常会复用已有元素而不是从头开始渲染。
这时在使用v-if 进行切换时我们发现，在两个内容基本相同的标签进行切换的时候，这里举例element-ui里面的表单元素 <el-form>

<!-- 手机号注册 -->
<view v-show="isPhone"><el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm"><el-form-item v-if="isPhone":label="i18n.sjhm" prop="phone"><el-input v-model="ruleForm.phone" :placeholder="i18n.qtxndsjh" class="rule-input"><el-select v-model="phoneArea" slot="prepend" class="num-style"><el-option label="+86 大陆" value="+86"></el-option><el-option label="+852 香港" value="+852"></el-option><el-option label="+853 澳门" value="+853"></el-option></el-select></el-input></el-form-item><el-form-item :label="i18n.yzm" prop="code"><el-input v-model="ruleForm.code" :placeholder="i18n['qsryzm']"></el-input><el-button type="text" v-if="!phone_change" class="get-code" @click="openTestCode">{{i18n.hqyzm}}</el-button><el-button type="text" v-if="phone_change" class="get-code" disabled>{{time}}s{{i18n.hcxhq}}</el-button></el-form-item><el-form-item :label="i18n.password" prop="password"><el-input type="password" v-model="ruleForm.password" :placeholder="i18n.qszndmm" auto-complete="off"></el-input></el-form-item><el-form-item :label="i18n.qrmm" prop="again_password"><el-input type="password" v-model="ruleForm.again_password" :placeholder="i18n.qqrndmm" auto-complete="off"></el-input></el-form-item><el-form-item><el-button @click="resetForm()">{{i18n.return}}</el-button><el-button type="primary" @click="register()">{{i18n.ljzc}}</el-button></el-form-item></el-form>
</view>
<!-- 邮箱注册 -->
<view v-show="!isPhone"><el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm"><el-form-item v-if="!isPhone" :label="i18n.yxyx" prop="email"><el-input v-model="ruleForm.email" :placeholder="i18n.qtxndyx"></el-input></el-form-item><el-form-item :label="i18n.yzm" prop="code"><el-input v-model="ruleForm.code" :placeholder="i18n['qsryzm']"></el-input><el-button type="text" v-if="!phone_change" class="get-code" @click="openTestCode">{{i18n.hqyzm}}</el-button><el-button type="text" v-if="phone_change" class="get-code" disabled>{{time}}s{{i18n.hcxhq}}</el-button></el-form-item><el-form-item :label="i18n.password" prop="password"><el-input type="password" v-model="ruleForm.password" :placeholder="i18n.qszndmm" auto-complete="off"></el-input></el-form-item><el-form-item :label="i18n.qrmm" prop="again_password"><el-input type="password" v-model="ruleForm.again_password" :placeholder="i18n.qqrndmm" auto-complete="off"></el-input></el-form-item><el-form-item><el-button @click="resetForm()">{{i18n.return}}</el-button><el-button type="primary" @click="register()">{{i18n.ljzc}}</el-button></el-form-item></el-form>
</view>

在这里插入图片描述
我们可以看到这里我使用的v-show来进行切换而不是v-if,因为使用v-if 的时候，由于<el-form>里面的<el-form-item>基本上都是输入框的格式，这是使用v-if 进行切换的时候元素会进行复用，此时第一个表单判断输入框报错的红色提示文字以及样式并不会随着上方标签的切换及时更换，除非是我们再点击邮箱注册这边的输入框才会进行失焦判断，然后展示请输入邮箱的提示。
使用v-show则不会出现这个情况，因为v-show 是对于两个大表单的整体的切换，并没有复用元素。