Vue记录 v-if VS v-show 使用方法及区别剖析

1.作用

v-if与v-show都可以控制一个模板标签是否在页面上显示

2.使用方法

直接上图

HTML

<div id="app">
			<div v-if="show">{{message}}</div>
			<div v-show="show">{{message}}</div>
</div>

JS

<script>
			var vm = new Vue({
				el:'#app',
				data:{
					show:false,
					message: "Hello Vue"
				}
			})
</script>

要控制message的显隐，只需将JS代码中data的show:false改成show:true即可 

3.区别

• 当show为true时，可以看到v-show和v-if的DOM都在浏览器上显示

• 当show为false时，v-if指令对应的DOM在DOM节点上被移除了，而v-show依然存在，只是加了个display: none;

由此可以看出：

• v-if是在动态的控制DOM的添加和删除
• v-show则不会删除，只是简单的CSS切换，即display: none

所以在需要频繁切换DOM元素的显隐是v-show的性能要高得多，但在首次条件渲染下，v-if要比v-show更好

优劣比较

• v-if可以配合v-else和v-else-if进行使用，当然，当他们组合使用时，不要在v-if和v-else中间添加别的元素。
• v-show可以搭配 template 使用。

对生命周期的影响

• v-show指令状态变化不会影响父组件的生命周期。
• v-if从false切换到true时，会触发beforeCreate，created，beforeMount，mounted函数钩子。
  v-if从true切换到false时，会触发beforeDestroy和destroyed钩子函数。