Vue2 サポート終了！Vue2からVue3への変更が必要なポイント

export default {
  data() {
    return {
      count: 0
    }
  },
  methods: {
    increment() {
      this.count++
    }
  }
}

import { ref } from 'vue';

export default {
  setup() {
    const count = ref(0);
    const increment = () => {
      count.value++;
    };
    return { count, increment };
  }
};

export default {
  data() {
    return {
      counter: 0
    };
  },
  methods: {
    increment() {
      this.counter++;
    }
  }
};

import { ref } from 'vue';

export default {
  setup() {
    const counter = ref(0); // refを使ってリアクティブなデータを作成

    const increment = () => {
      counter.value++; // refの場合は.valueを使ってアクセス
    };

    return { counter, increment };
  }
};

import { reactive } from 'vue';

export default {
  setup() {
    const state = reactive({ counter: 0 }); // reactiveを使ってリアクティブなオブジェクトを作成

    const increment = () => {
      state.counter++; // reactiveオブジェクトは通常通りアクセス可能
    };

    return { state, increment };
  }
};

import { onMounted, onUpdated, ref } from 'vue';

export default {
  setup() {
    const count = ref(0);

    // コンポーネントがマウントされた後に実行される
    onMounted(() => {
      console.log('コンポーネントがマウントされました。');
      // 例えばAPIからデータをフェッチするなどの操作をここで行う
    });

    // コンポーネントが更新される度に実行される
    onUpdated(() => {
      console.log('コンポーネントが更新されました。');
      // データが更新された後のDOMの変更に関連した操作を行う
    });

    // カウンターを増加させるメソッド
    const increment = () => {
      count.value++;
    };

    // setup() からは、テンプレートで使用するためのリアクティブなプロパティや関数を返します
    return { count, increment };
  }
};

<template>
  <h1>こんにちは、Vue 3!</h1>
  <p>これは複数のルート要素を持つコンポーネントです。</p>
</template>

<script>
export default {
  // コンポーネントのオプション...
};
</script>

<template>
  <div> <!-- 通常のコンポーネントの内容 -->
    <button @click="modalOpen = true">モーダルを開く</button>
  </div>

  <Teleport to="body">
    <div v-if="modalOpen" class="modal">
      <div class="modal-content">
        <h2>モーダルウィンドウ</h2>
        <p>ここに内容が入ります。</p>
        <button @click="modalOpen = false">閉じる</button>
      </div>
    </div>
  </Teleport>
</template>

<script>
export default {
  data() {
    return {
      modalOpen: false,
    };
  },
};
</script>

<template>
  <Suspense>
    <template #default>
      <AsyncComponent />
    </template>
    <template #fallback>
      <div>ローディング中...</div>
    </template>
  </Suspense>
</template>

<script>
import { defineAsyncComponent } from 'vue';

const AsyncComponent = defineAsyncComponent(() =>
  import('./components/AsyncComponent.vue')
);

export default {
  components: {
    AsyncComponent,
  },
};
</script>