v-if 与 v-show(vue3条件渲染)

v-if 是"真正"的条件渲染,因为它会确保在切换过程中条件块内的事件监听器和子组件适当地被销毁和重建。

v-if 也是惰性的:如果在初始渲染时条件为假,则什么也不做------直到条件第一次变为真时,才会开始渲染条件块。

相比之下,v-show 就简单得多------不管初始条件是什么,元素总是会被渲染,并且只是简单地基于 CSS 进行切换。

一般来说,v-if 有更高的切换开销,而 v-show 有更高的初始渲染开销。因此,如果需要非常频繁地切换,则使用 v-show 较好;如果在运行时条件很少改变,则使用 v-if 较好。

注意,v-show 不支持 <template> 元素,也不支持 v-else。

  • v-show 不支持 <template> 元素,因为 <template> 元素不会被渲染到最终的 DOM 中,而 v-show 是通过修改 DOM 元素的 CSS 来控制可见性的。
  • v-show 也不支持 v-else,因为 v-show 只是简单地切换元素的可见性,而不是像 v-if 那样根据条件来选择性地渲染不同的元素或组件。

v-show是控制可见性,v-if是真正的条件渲染

相关推荐
mapbar_front17 分钟前
react项目开发—关于代码架构/规范探讨
前端·react.js
Jabes.yang18 分钟前
Java大厂面试实录:从Spring Boot到微服务的技术探讨
java·spring boot·spring cloud·微服务·技术面试
高山上有一只小老虎23 分钟前
idea字体大小设置
java
二木一夕23 分钟前
Vue 3 的组合式 API和传统选项式 API区别(vue2转vue3,两者差异)
前端
LuckySusu25 分钟前
【vue篇】Vue 项目中的静态资源管理:assets vs static 终极指南
前端·vue.js
LuckySusu26 分钟前
【vue篇】Vue.delete vs delete:数组删除的“陷阱”与正确姿势
前端·vue.js
LuckySusu27 分钟前
【vue篇】Vue 模板编译原理:从 Template 到 DOM 的翻译官
前端·vue.js
小菜摸鱼30 分钟前
Node.js + vue3 大文件-切片上传全流程(视频文件)
前端·node.js
LuckySusu33 分钟前
【vue篇】Vue 2 响应式“盲区”破解:如何监听对象/数组属性变化
前端·vue.js
LuckySusu33 分钟前
【vue篇】Vue Mixin:可复用功能的“乐高积木”
前端·vue.js