文章の目录
- 1、示例
- 1.1、v-show
- 1.2、v-if
- 2、共同点
- 3、区别
- 3.1、实现本质方法区别
- 3.2、编译的区别
- 3.3、编译的条件区别
- 3.4、性能区别
- 3.5、使用场景的区别
- 3.6、其他方面
- 写在最后
v-if 和 v-show 的区别是前端面试中常问的基础知识点,v-if、v-show顾名思义就是用来判断视图层展示效果的。那么具体是怎么展示呢?v-if 和 v-show 的区别又是什么呢?
首先我们可以来看一下 Vue 中文社区说明文档的介绍:
1、示例
1.1、v-show
<template>
<div style="border: 1px solid red">
<h1 v-show="isVisible">显示文字</h1></h1>
<button @click="updateData">切换</button>
</div>
</template>
<script>
export default {
data () {
return {
isVisible: true
}
},
beforeCreate () {
console.log("beforeCreate")
},
created () {
console.log("created")
},
beforeMount () {
console.log("beforeMount")
},
mounted () {
console.log('mounted')
},
beforeUpdate () {
console.log('beforeUpdate')
},
updated () {
console.log('updated')
},
activated () {
console.log('activated')
},
deactivated () {
console.log('deactivated')
},
beforeDestroy () {
console.log('beforeDestroy')
},
destroyed () {
console.log('destroyed')
},
errorCaptured () {
console.log('errorCaptured')
},
methods: {
updateData () {
this.isVisible = !this.isVisible
}
}
}
</script>
<style scoped>
</style>
isVisible 为 true 时的显示效果如下:
isVisible 为 false 时的显示效果如下:
v-show 只是简单的控制元素的 display 属性。
1.2、v-if
<template>
<div style="border: 1px solid red">
<h1 v-if="isVisible">显示文字</h1>
<button @click="updateData">切换</button>
</div>
</template>
<script>
export default {
data () {
return {
isVisible: true
}
},
beforeCreate () {
console.log("beforeCreate")
},
created () {
console.log("created")
},
beforeMount () {
console.log("beforeMount")
},
mounted () {
console.log('mounted')
},
beforeUpdate () {
console.log('beforeUpdate')
},
updated () {
console.log('updated')
},
activated () {
console.log('activated')
},
deactivated () {
console.log('deactivated')
},
beforeDestroy () {
console.log('beforeDestroy')
},
destroyed () {
console.log('destroyed')
},
errorCaptured () {
console.log('errorCaptured')
},
methods: {
updateData () {
this.isVisible = !this.isVisible
}
}
}
</script>
<style scoped>
</style>
isVisible 为 true 时的显示效果如下:
isVisible 为 false 时的显示效果如下:
v-if 才是条件渲染(条件为真,元素将会被渲染,条件为假,元素会被销毁)
2、共同点
v-if 和 v-show 都可以动态地显示DOM元素
3、区别
3.1、实现本质方法区别
v-show 本质就是将标签样式的 display 属性设置为 none,控制隐藏;
v-if 是动态的向 DOM 树内添加或者删除 DOM 元素;
3.2、编译的区别
v-show 其实就是在控制 css;
v-if 切换有一个局部编译/卸载的过程,切换过程中适时地销毁和重建内部的事件监听和子组件;
3.3、编译的条件区别
v-show 都会编译,初始值为 false,只是将样式属性 display 设为 none,但它也编译了;
v-if 初始值为 false,就不会编译;
3.4、性能区别
v-show 只编译一次,后面其实就是控制 css,而 v-if 不停的销毁和创建,故 v-show 性能更好一点。换句话说:
- v-if 有更高的切换消耗;
- v-show 有更高的初始渲染消耗;
3.5、使用场景的区别
v-if 适合运营条件不大可能改变;
v-show 适合频繁切换;
3.6、其他方面
- v-if 有配套的 v-else-if 和 v-else,而 v-show 没有;
- v-if 可以搭配 template 使用,而 v-show 不行;
写在最后
如果你感觉文章不咋地
//(ㄒoㄒ)//
,就在评论处留言,作者继续改进;o_O???
如果你觉得该文章有一点点用处,可以给作者点个赞;\\*^o^*//
如果你想要和作者一起进步,可以微信扫描二维码,关注前端老L;~~~///(^v^)\\\~~~
谢谢各位读者们啦(^_^)∠※
!!!
更多推荐
Vue系列之v-if和v-show的区别
发布评论