【Vue.js】Vue2→Vue3 主な記述方法の変更点 チートシート

## 目次
[1. アプリケーションの作成とマウント](#1-アプリケーションの作成とマウント)
[2. グローバルコンポーネント登録](#2-グローバルコンポーネント登録)
[3. リアクティブデータ](#3-リアクティブデータ)
[4. CompositionAPI](#4-compositionapi)
[5. イベントバス](#5-イベントバス)
[6. スロット](#6-スロット)
[7. ライフサイクルフックの名前変更](#7-ライフサイクルフックの名前変更)
[8. カスタムディレクティブ](#8-カスタムディレクティブ)
[9. カスタムイベント](#9-カスタムイベント)
[10. テレポート](#10-テレポート)
[11. スロットの新しいv-slot構文](#11-スロットの新しいv-slot構文)
## 1. アプリケーションの作成とマウント
   - Vue 2:
     ```javascript
     new Vue({
       el: '#app',
       // ...
     });
     ```
   - Vue 3:
     ```javascript
     const app = createApp({
       // ...
     });
     
     app.mount('#app');
     ```

## 2. グローバルコンポーネント登録
   - Vue 2:
     ```javascript
     Vue.component('my-component', MyComponent);
     ```
   - Vue 3:
     ```javascript
     const app = createApp({});
     app.component('my-component', MyComponent);
     app.mount('#app');
     ```

## 3. リアクティブデータ
   - Vue 2:
     ```javascript
     const state = Vue.observable({ count: 0 });
     ```
   - Vue 3:
     ```javascript
     const state = reactive({ count: 0 });
     ```

## 4. CompositionAPI
   - Vue 2: なし (Options APIを使用)
   - Vue 3:
     ```javascript
     export default {
       setup() {
         const count = ref(0);
         const doubled = computed(() => count.value * 2);

         function increment() {
           count.value++;
         }

         return {
           count,
           doubled,
           increment
         };
       }
     };
     ```

## 5. イベントバス
   - Vue 2:
     ```javascript
     const eventBus = new Vue();
     eventBus.$on('event', handler);
     eventBus.$emit('event', data);
     ```
   - Vue 3: イベントバスの機能が削除されました。代わりに、独自のイベントバスの実装を作成するか、他の状態管理ライブラリ（Vuexなど）を使用してください。

## 6. スロット
   - Vue 2:
     ```javascript
     this.$slots.default
     ```
   - Vue 3:
     ```javascript
     export default {
       setup(props, { slots }) {
         return () => {
           return h('div', [
             slots.default && slots.default(),
             slots.header && slots.header()
           ]);
         };
       }
     };
     ```
## 7. ライフサイクルフックの名前変更
   - Vue 2:
     ```javascript
     beforeCreate() {},
     created() {},
     beforeMount() {},
     mounted() {},
     beforeUpdate() {},
     updated() {},
     beforeDestroy() {},
     destroyed() {}
     ```
   - Vue 3:
     ```javascript
     export default {
       setup() {
         onBeforeMount(() => {});
         onMounted(() => {});
         onBeforeUpdate(() => {});
         onUpdated(() => {});
         onBeforeUnmount(() => {});
         onUnmounted(() => {});
       }
     };
     ```

## 8. カスタムディレクティブ
   - Vue 2:
     ```javascript
     Vue.directive('my-directive', {
       bind(el, binding, vnode) {},
       inserted(el, binding, vnode) {},
       update(el, binding, vnode, oldVnode) {},
       componentUpdated(el, binding, vnode, oldVnode) {},
       unbind(el, binding, vnode) {}
     });
     ```
   - Vue 3:
     ```javascript
     const myDirective = {
       beforeMount(el, binding, vnode) {},
       mounted(el, binding, vnode) {},
       beforeUpdate(el, binding, vnode, oldVnode) {},
       updated(el, binding, vnode, oldVnode) {},
       beforeUnmount(el, binding, vnode) {},
       unmounted(el, binding, vnode) {}
     };

     const app = createApp({});
     app.directive('my-directive', myDirective);
     app.mount('#app');
     ```

## 9. カスタムイベント
   - Vue 2:
     ```javascript
     this.$emit('my-event', payload);
     ```
   - Vue 3:
     ```javascript
     export default defineComponent({
       setup() {
         const instance = getCurrentInstance();
         instance.emit('my-event', payload);
       }
     });
     ```

## 10. テレポート
    - Vue 2: なし
    - Vue 3: `<teleport>` コンポーネントを使用して、コンポーネントの一部を別のDOM要素に移動できます。
      ```html
      <teleport to="#target-element">
        <p>これは別のDOM要素に移動されます。</p>
      </teleport>
      ```

## 11. スロットの新しいv-slot構文
    - Vue 2:
      ```html
      <template slot="header">
        <h1>ヘッダー</h1>
      </template>
      ```
    - Vue 3:
      ```html
      <template v-slot:header>
        <h1>ヘッダー</h1>
      </template>
      ```