浅谈v-show与v-if的区别

v-if指令

(1) 作用： 根据条件渲染数据

(2) 语法：

• 单分支： v-if=“条件语句”
• 双分支： v-else
• 多分支: v-else-if=“条件语句”

(3) 注意点

v-else与v-else-if的前面 必须要有 v-if 或者 v-else-if

v-show 指令

(1) 作用： 设置元素的display属性值

(2) 语法： v-show=“属性值”

• 属性值为true: 元素的display : block
• 属性值false: 元素的display : none

(3) v-show与v-if区别

• v-if: 元素的新增与移除。如果不满足条件, 则该元素不会添加到DOM树中 (适用于不频繁切换) , v-if 有更好的初始渲染性能, 因为当条件为false的时候v-if不会渲染 , 只有条件为true时才会渲染

• v-show: 显示与隐藏。不管条件成立与否, dom树结构上都有, 只是修改元素的display属性值来改变其显示与隐藏的状态 (适用于频繁切换), v-show有更好的切换性能, 因为v-show无条件渲染, 本质只是修改元素的css样式

• 原理不同: v-if本质是元素新增与移除, v-show本质是修改元素的display属性

• 场景不同: v-if用于不需要频繁切换的元素, v-show用于需要频繁切换的元素

• 性能不同: v-if初始渲染性能高，切换性能低。 v-show 初始渲染性能低，切换性能高 (因为v-if为false的时候不会显示, 所以最开始渲染会性能高一点, 为true的时候才生成,所以切换性能低 , 想一下, 如果v-if的盒子里面代码五百行, 新建一个盒子出来浏览器需要渲染多久)

html结构为 :

 <div id="app">
      <p v-if="flag">我是v-if渲染出来的</p>
      <p v-show="flag">我是v-show渲染出来的</p>
</div>

• 当flag为true时, 可以看见dom树结构上, 两个p标签都渲染出来了
  

• 当flag为false时, dom树结构只有v-show渲染出来的p标签且display为none , 则证实了v-if的条件如果不满足, 则该元素不会添加到DOM树中; 而v-show的条件不管满足与否, 都会渲染到dom树结构上, 只是display属性有区别