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

目次

1. アプリケーションの作成とマウント
2. グローバルコンポーネント登録
3. リアクティブデータ
4. CompositionAPI
5. イベントバス
6. スロット
7. ライフサイクルフックの名前変更
8. カスタムディレクティブ
9. カスタムイベント
10. テレポート
11. スロットの新しいv-slot構文

1. アプリケーションの作成とマウント

• Vue 2:

  new Vue({
    el: '#app',
    // ...
  });
  

• Vue 3:

  const app = createApp({
    // ...
  });
  
  app.mount('#app');
  

2. グローバルコンポーネント登録

• Vue 2:

  Vue.component('my-component', MyComponent);
  

• Vue 3:

  const app = createApp({});
  app.component('my-component', MyComponent);
  app.mount('#app');
  

3. リアクティブデータ

• Vue 2:

  const state = Vue.observable({ count: 0 });
  

• Vue 3:

  const state = reactive({ count: 0 });
  

4. CompositionAPI

• Vue 2: なし (Options APIを使用)
• Vue 3:

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

5. イベントバス

• Vue 2:

  const eventBus = new Vue();
  eventBus.$on('event', handler);
  eventBus.$emit('event', data);
  

• Vue 3: イベントバスの機能が削除されました。代わりに、独自のイベントバスの実装を作成するか、他の状態管理ライブラリ（Vuexなど）を使用してください。

6. スロット

• Vue 2:

  this.$slots.default
  

• Vue 3:

  export default {
    setup(props, { slots }) {
      return () => {
        return h('div', [
          slots.default && slots.default(),
          slots.header && slots.header()
        ]);
      };
    }
  };
  

7. ライフサイクルフックの名前変更

• Vue 2:

  beforeCreate() {},
  created() {},
  beforeMount() {},
  mounted() {},
  beforeUpdate() {},
  updated() {},
  beforeDestroy() {},
  destroyed() {}
  

• Vue 3:

  export default {
    setup() {
      onBeforeMount(() => {});
      onMounted(() => {});
      onBeforeUpdate(() => {});
      onUpdated(() => {});
      onBeforeUnmount(() => {});
      onUnmounted(() => {});
    }
  };
  

8. カスタムディレクティブ

• Vue 2:

  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:

  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:

  this.$emit('my-event', payload);
  

• Vue 3:

  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>
  ```