🦍

[Vue]v-ifとv-showの違いをReactを使って実装するとわかりやすい

2022/12/29に公開約1,800字

初学者向けの記事です。私も去年は適当に使い分けていたので、自戒の意味も込めて書いてみました。

v-show と v-if の違い

Vue.js でよく使うディレクティブの一つに v-ifv-show があります。
どちらも要素の表示・非表示を切り替えることができ、一見同じ挙動をしているように見えます。

しかし、実際には違いがあります。

<script setup lang="ts">
import { ref } from "vue";
const isLogin = ref<boolean>(false);
</script>

<template>
  <button v-on:click="isLogin = !isLogin">
    {{ isLogin ? "ログアウト" : "ログイン" }}
  </button>
  <hr />
  <p v-if="isLogin">ログイン中</p>
  <p v-show="isLogin">ログイン中</p>
</template>

例えば上記のようなコードがあります。
開発者ツールで要素を確認してみましょう。

ログイン状態の場合

ログイン状態の場合
v-show の方には謎の style 属性が付与されています。
いったん置いておきましょう。

ログアウト状態の場合

ログアウト状態の場合
ログアウト状態の場合、v-if の方は要素が削除されているのがわかります。
v-show の方は style に display:noneが付与されています。

まとめると、v-if は true 時、DOM に要素を追加し、false 時に削除します。
v-show は true ,false によって、style の属性を変更しています。

どう使い分けるかというと、

一般的に、v-if はより高い切り替えコストを持っているのに対して、 v-show はより高い初期描画コストを持っています。 そのため、とても頻繁に何かを切り替える 必要があれば v-show を選び、条件が実行時に変更することがほとんどない場合は、v-if を選びます。

Vue.js 公式ドキュメント

ということらしいです。

  • v-ifは毎回レンダリングされる
  • v-showはデフォルトでスタイル付き

ということを覚えておけば、使い分けれると思います。

React で実装してみる

もうほとんどわかったと思いますが、 React で実装してみましょう。

import { useState } from "react";

function App() {
  const [isLogin, setIsLogin] = useState<boolean>(false);

  return (
    <>
      <button onClick={() => setIsLogin(!isLogin)}>
        {isLogin ? "ログアウト" : "ログイン"}
      </button>
      <hr />
      {isLogin && <p>ログイン中</p>}
      <p style={{ display: isLogin ? "" : "none" }}>ログイン中</p>
    </>
  );
}

export default App;

React で v-if,v-show を実装すると、結構わかりやすいですよね。

最後に

共同開発でnftotakuというサービスを作っています。
discord も用意してありますので、興味のある方、覗いてみてください。

https://nftotaku.xyz/

GitHubで編集を提案

Discussion

ログインするとコメントできます