首先简单的介绍下v-if和v-show这两个指令
v-if指令
其是根据表达式内的boolean（布尔值），有条件的选择是否渲染dom元素。在切换时元素及它的数据绑定 / 组件被销毁并重建。如果添加v-if的元素为template标签，会将其的内容提出，作为条件块。
v-show指令
其是根据表达式内的boolean（布尔值),切换dom元素的css样式dispaly（true为block，false为none）。
v-if和v-showz指令的相同点
这两个指令都可以实现，根据表达式条件实现页面内的标签有条件的渲染和不渲染。- 当表达式内为true的时候，都会占据页面的位置，对页面进行渲染。 当表达式都为false时，都不会占据页面位置，不渲染页面。
v-if和v-showz指令的区别
1.底层原理不同
v-if是根据条件动态的添加dom节点。而v-show是根据条件切换dom元素的css样式dispaly（true为block，false为none）。
2.因为底层原理不同所以都有自己不同的特点
v-if根据条件切换有一个局部编译/卸载的过程，切换过程中合适地销毁和重建内部的事件监听和子组件。（简单说，v-if是有惰性的，条件为false时，不会渲染dom元素）所以，v-if的初始渲染成本低，但切换时，会不停的添加和删除dom元素节点，所以它的切换成本很高。
v-show，它会直接先渲染dom元素。只是通过控制css样式display。实现dom元素的显示隐藏。所以v-show无论条件如何都会执行（勤奋），所以它的初始成本高，但切换成本低。
所以当需求需要频繁切换的话一般选择v-show（因为切换成本低），不需要频繁切换的用v-if（初始成本低）
3.当表达式内boolean值发生变化时，是否触发生命周期
v-show
v-show内的表达式的布尔值（即true→false/false→true）发生改变时，不会触发vue组件的生命周期。因为v-show只是切换dom元素的css样式dispaly（true为block，false为none），它已经完成了初始化和挂载阶段内的四个钩子。只改变css样式，没有改变data数据所以不会触发生命周期的钩子。
v-if
v-if由false变为true的时候，触发组件的beforeCreate、create、beforeMount、mounted钩子，由true变为false的时候触发组件的beforeDestory、destoryed钩子.(即表达式的布尔值false→true时触发vue生命周期的，挂载阶段的2个钩子和更新阶段的两个钩子----表达式的布尔值true→false时，只触发更新阶段的两个钩子)
