# vuejs v-if と v-show の違い
| 比較 | v-if | v-show |
|---|---|---|
true | レンダリング | 初期レンダリング後 CSS 操作 |
false | DOM 破棄 | 初期レンダリング後 CSS 操作 |
| 切り替えコスト | 高い | 低い |
| 初期描画コスト | 低い | 高い |
| 実現方法 | DOM レンダリング操作 | CSS 操作 |
表示非表示する際によく使われる v-if と v-show
v-if はより高い切り替えコストを持っているのに対して、 v-show はより高い初期描画コストを持っています。 そのため、とても頻繁に何かを切り替える必要があれば v-show を選び、条件が実行時に変更することがほとんどない場合は、v-if を選びます。
# v-if
フロント側ではよくレンダリングという言葉つかうけど、v-if は条件分岐レンダリング
trueになった場合、レンダリング始める。falseの場合イベントリスナと子コンポーネント内部の条件ブロックが破棄される。
初期からfalseの場合、レンダリングされない。
<h1 v-if="show == 1">Vuejs v-if is amazing!</h1>
<h1 v-else-if="show == 2">Vuejs v-show is amazing!</h1>
<h1 v-else-if="show == 3">Vuejs v-if v-show is amazing!</h1>
<h1 v-else>Vuejs is amazing!</h1>
v-if は lazy 遅延描画 初期表示 false の場合、何もしない。条件付きブロックは、 true になるまで描画されない。
# v-show
表示非表示を切り替えるための条件分岐オプション
v-if と使い方ほとんど一緒だが、v-show は CSS のdisplayプロパティをblockとnoneに切り替えているだけ。レンダリングは最初の一回のみで、描写された DOM は破棄することがない。
v-show は <template> 要素をサポートせず、v-else とも連動しない
v-show は初期条件に関わらず常に描画され、CSS display の切り替えとして扱う