5ec911070a4ba5.md

title	emoji	type	topics	published
[Vue]v-ifとv-showの違いをReactを使って実装するとわかりやすい	🦍	tech	javascript typescript react vue	false

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

v-show と v-if の違い

Vue.js でよく使うディレクティブの一つに v-if と v-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/