スタートアップCTOがVue3とVue2の違い・Vue3の注目機能を分かりやすくまとめ🙌！Vue3の導入を悩んでいるなら必見です👀

<ChildComponent v-model:title="pageTitle" />

<!-- 上記は以下の略-->

<ChildComponent :title="pageTitle" @update:title="pageTitle = $event" />

<!-- Vue 2.x -->
<div v-if="condition" key="yes">Yes</div>
<div v-else key="no">No</div>

<!-- Vue 3.x -->
<div v-if="condition">Yes</div>
<div v-else>No</div>

<!-- Vue 2.x -->
<template v-for="item in list">
  <div :key="'heading-' + item.id">...</div>
  <span :key="'content-' + item.id">...</span>
</template>

<!-- Vue 3.x -->
<template v-for="item in list" :key="item.id">
  <div>...</div>
  <span>...</span>
</template>

<!-- template -->
<div id="red" v-bind="{ id: 'blue' }"></div>
<!-- result -->
<div id="blue"></div>

<!-- template -->
<div v-bind="{ id: 'blue' }" id="red"></div>
<!-- result -->
<div id="red"></div>

<!-- Vue 2.x -->
<my-component
  v-on:close="handleComponentEvent"
  v-on:click.native="handleNativeClickEvent"
/>

<!-- Vue 3.x -->
<my-component
  v-on:close="handleComponentEvent"
  v-on:click="handleNativeClickEvent"
/>
<script>
  export default {
    emits: ['close']
  }
</script>

<div v-for="item in list" :ref="setItemRef"></div>

// CompositionAPI
import { onBeforeUpdate, onUpdated } from 'vue'

export default {
  setup() {
    let itemRefs = []
    const setItemRef = el => {
      if (el) {
        itemRefs.push(el)
      }
    }
    onBeforeUpdate(() => {
      itemRefs = []
    })
    onUpdated(() => {
      console.log(itemRefs)
    })
    return {
      setItemRef
    }
  }
}

export default {
  components: { RepositoriesFilters, RepositoriesSortBy, RepositoriesList },
  props: {
    user: {
      type: String,
      required: true
    }
  },
  data () {
    return {
      repositories: [], // 1
      filters: { ... }, // 3
      searchQuery: '' // 2
    }
  },
  computed: {
    filteredRepositories () { ... }, // 3
    repositoriesMatchingSearchQuery () { ... }, // 2
  },
  watch: {
    user: 'getUserRepositories' // 1
  },
  methods: {
    getUserRepositories () {
      // using `this.user` to fetch user repositories
    }, // 1
    updateFilters () { ... }, // 3
  },
  mounted () {
    this.getUserRepositories() // 1
  }
}

import {
  ref,
  defineComponent,
  onMounted,
  onBeforeMount,
  watch,
  computed,
  toRefs,
} from "vue";
import { listStudentScoreByStudentId, StudentScore } from "../api/student";
import _ from "lodash";

type Props = {
  studentName: String;
  studentId: String;
};

export default defineComponent({
  name: "StudentScore",
  props: {
    studentName: {
      type: String,
      required: true,
    },
    studentId: {
      type: String,
      required: true,
    },
  },
  emits: ["update:studentId", "logout"],
  setup: (props: Props, { emit }) => {
    // refでリアクティブな値を生成
    const show = ref<boolean>(false);
    const selectedCategory = ref<number>(1);
    const studentScore = ref<StudentScore[]>([]);
    const modalOpen = ref<boolean>(false);

    // Propsの変更に確実に反応するためにRef化
    const { studentId } = toRefs(props);

    // methods
    const toggleShow = () => (show.value = !show.value);
    const fetchStudentScore = async () =>
      (studentScore.value = await listStudentScoreByStudentId(props.studentId));
    const updateSelectedCategory = (category: number) =>
      (selectedCategory.value = category);

    // computed
    const studentScoreSummary = computed(() =>
      _.chain(studentScore.value)
        .filter(
          (item) =>
            item.category === selectedCategory.value &&
            item.studentId === v.value
        )
        .sumBy("score")
        .value()
    );

    // watchによる追跡（Propsの変更で発火）
    watch(studentId, fetchStudentScore);

    // ライフサイクルフック登録(マウント後に生徒情報をフェッチ)
    onMounted(() => fetchStudentScore());

    // emitによる子から親へのイベント発火
    const removeStudent = () => emit("removeStudentById", studentId.value);

    return {
      show,
      toggleShow,
      studentScoreSummary,
      updateSelectedCategory,
      selectedCategory,
      modalOpen,
      removeStudent
    };
  },
});

<button @click="modalOpen = true">
    Open full screen modal! (With teleport!)
</button>
<teleport to="body">
  <div v-if="modalOpen" class="modal">
    <div>
      モーダルウィンドウのコンテンツ
      <button @click="modalOpen = false">
        モーダルウィンドウを閉じる
      </button>
    </div>
  </div>
</teleport>

<!-- Layout.vue -->
<template>
  <div>
    <header>...</header>
    <main>...</main>
    <footer>...</footer>
  </div>
</template>

<!-- Layout.vue -->
<template>
  <header>...</header>
  <main v-bind="$attrs">...</main>
  <footer>...</footer>
</template>

<!-- 親のComponent -->
<template>
  <StudentScore v-model:studentId="studentId" :student-name="studentName" @remove-student-by-id="removeStudentById" />
</template>

// 親のComponent
import { defineComponent, ref } from "vue";
import StudentScore from "./components/StudentScore.vue";
import { removeStudentById } from "../api/student";

export default defineComponent({
  name: "App",
  components: {
    StudentScore,
  },
  setup() {
    const studentId = ref<String>("exampleStudentId");
    const studentName = "田中太郎";
    const removeStudentById = (_studentId: String) => removeStudentById(_studentId);
    return {
      studentId,
      studentName,
      removeStudentById,
    };
  },
});

// 子供のComponent
import { defineComponent, toRefs, emit } from "vue";

type Props = {
  studentId: String,
  studentName: String
}

export default defineComponent({
  name: "StudentScore",
  emits: ["update:studentId", "removeStudentById"],
  setup(props:Props) {
    const { studentId, studentName } = toRefs(props);

    // emitを使用し親のイベントを実行
    const removeStudentById = () => emit("removeStudentById", studentId.value);

    // v-modelをPropsへ渡すことでupdate:{prop_name}が自動的にemitへアサインされる
    const updateStudentId = () => emit("update:studentId", "update value!")

    return {
      studentId,
      studentName,
      removeStudentById,
      updateStudentId
    };
  },
});