v-show和v-if的差別與聯系

一、v-show和v-if的共同點

1、v-show和v-if都能控制元素的顯示和隐藏

2、當兩者均需要控制多個元素的顯示與隐藏時，都可以使用HTML5新增的<template>元素來包裹需要切換顯示與隐藏的多個元素。

注意：在最終的的渲染結果中是不會包含<template>元素的，實際上<template>元素是被當作一個不可見的包裹元素，主要用于分組條件的判斷和清單渲染。

二、v-show和v-if的差別

1、控制元素顯示與隐藏的方式

• 使用v-show指令，元素本身是要被渲染的，元素的顯示與隐藏，是通過CSS樣式中的display屬性來進行控制的。當v-show中相關的表達式為false時，則設定其相關的樣式為：“display: none;”。
• v-if指令是根據表達式的值的真假來生成或删除一個元素。當表達式的值計算為false時，v-if指令不會建立該元素或将該已存在的元素進行删除；當表達式的值為true時，v-if指令會建立該元素。

2、開銷方式的不同

• v-show有更高的初始渲染開銷。
• v-if有更高的切換開銷。

3、使用場景不同

• 如果需要非常頻繁地切換元素的顯示或隐藏，則使用v-show比較好。
• 如果在運作時條件很少改變，則使用v-if比較好。