v-if和v-show

唯爱赞多

已于 2023-08-04 16:32:49 修改

阅读量150

点赞数

分类专栏： vue 前端面试文章标签： vue

于 2021-11-02 08:56:01 首次发布

本文链接：https://blog.csdn.net/weixin_47003395/article/details/121093153

版权

前端面试同时被 2 个专栏收录

20 篇文章 0 订阅

订阅专栏

vue

15 篇文章 0 订阅

订阅专栏

                    
                    控制手段不同 
  show隐藏是➕display：none，dom还在
if是将dom元素整个删除和添加
 
编译过程不同 
  show简单的基于css切换
if切换有局部编译/卸载过程，切换过程中合适地销毁和重建内部的事件监听和子组件
 
编译条件不同 
  if是真正的条件渲染，条件为假不做操作
show由false转为true 不会触发组件生命周期
性能消耗：if有更高切换消耗，show有更高初始渲染消耗
 
v-if适用于初始化时只需要渲染一次的情况，而v-show适用于需要频繁切换显示和隐藏的情况。