Vue2からVue3にあげた際の注意点

1 min read読了の目安(約1400字

はじめに

vue2からvue3にあげた際につまづいた点を書きました。
vue2系で作成していたInputコンポーネントなどの値がvue3系にバージョンを上げた際に値が更新されていないなどの現象が発生しました。

Vue2系

vue2系では、@vue/composition-apiを導入し、vue3系と同様の機能が使えるようにしていました。

コンポーネントは以下のようなものを作成

<template>
  <input
    type="text"
    :value="value"
    :input="handleInput"
  />
</template>

<script>
import { defineComponent } from "@vue/composition-api";

export default defineComponent({
  props: {
    value: [String, Number]
  },
  setup(props, ctx) {
    const handleInput = (event) => {
      ctx.emit("input", event.target.value);
    }
    return { handleInput }
  }
})
</script>

Vue3系

  • 初めComposition APIを導入した上記の書き方でコンポーネントを作成していたが、値が更新されていなかった.

原因

Vue3系だと v-modelのpropsの値とeventが変更になっている。(breaking change)

  • props: value -> modelValue
  • event: input -> update:modelValue

https://v3.vuejs.org/guide/migration/v-model.html#v-model
  • コンポーネントを以下のように修正
<template>
  <input 
    type="text"
    :value="modelValue"
    :input="handleInput"
  />
</template>

<script>
import { defineComponent } from "vue";

export default defineComponent({
  props: {
    modelValue: [String, Number]
  },
  setup(props, ctx) {
    const handleInput = (event) => {
       ctx.emit("update:modelValue", event.target.value);
    };
    return { handleInput }
  },
});
</script>

最後に

バージョンを上げる際は公式や変更点を確認することが大事だと改めて思いました。
Vue3系では、Composition APIだけでなくFragmentなどの機能が追加されていて、よりを書きやすくなっていました。
今後もVueを使っていきたいと思いました。