概要

主にVue2→3の変更点について学んだことの忘備録。

API スタイル

Vue2：OptionsAPI
Vue3：CompositionAPI / OptionsAPI

Vue3では新しくCompositionAPIが新設された。
CompositionAPIになった理由：ざっくりいうと責任や責務がバラバラになってたものが、関心ごとにまとまる。

引用：Composition API に関するよくある質問 - なぜ Composition API なのか？| Vue.js

ライフサイクル

createdまでは親→子、mountedまでは子→親の順で呼び出される
〜MountedでDOM構築など終わり実際に画面上に表示される
スクリプト内やテンプレート内のリアクティブな値が変更されると再レンダリング

1番目についての補足として、親から呼び出されたコンポーネントは「Has pre-compiled template?」の分岐で子コンポーネントが呼び出され、子コンポーネントのマウントが完了してから親のマウントが呼び出される。
なので親コンポーネントのマウント処時に初期値などを設定して子コンポーネントで取り出そうとするとエラーになるので要注意（ここで若干ハマった。。）

引用：ライフサイクルフック | Vue.js
参考：Composition API: ライフサイクルフック | Vue.js

コンポーネント間の受け渡し

親子コンポーネントで値を受け渡す場合の使い方について。(Props/Emit)
Props...親→子
Emit...子→親

使い方1

script setupブロック内で利用する場合、defineProps()/defineEmits()で定義して利用する。

<script setup>
const props = defineProps({
  foo: String
})
 
const emit = defineEmits(['change', 'delete'])
</script>

参考：https://ja.vuejs.org/api/sfc-script-setup#defineprops-defineemits

使い方2

setup() フックを利用する場合、setupの引数として受け取ることもできる。
第一引数はprops, 第二引数はemit含めたcontextオブジェクト。

export default {
   props: {
    title: String
  },
  setup(props, context) {
    console.log(props.title)
    console.log(context.emit)
  }
}

参考：https://ja.vuejs.org/api/composition-api-setup.html#accessing-props

状態管理

状態管理とはコンポーネント間のバケツリレーをしなくていいように値を管理してくれるもの。
Vue2ではVuex(store)がデファクトスタンダートだけど、Vue3でprovide/injectの機能が提供された。

provide

祖先のコンポーネントで、状態管理として提供するものを定義する。
第一引数にキー、第二引数に値。

const count = ref(0)
provide('count', count)

inject

子孫のコンポーネントで、利用したいコンポーネントに値を注入する。
第一引数にキー、第二引数にデフォルト値(省略可)。

const count = inject('count')
console.log(count.value)

参考：Composition API: 依存関係の注入 | Vue.js

リアクティビティ

ref()

const count = ref(1)

countオブジェクトそのものはconst(再代入不可)だけど、中のプロパティに関しては再代入できるリアクティブな値。
ref形式はオブジェクトで値が渡ってくるので、値のプロパティを取り出す際は.valueを指定する必要あり。
似たようなものにreactive()があるけど、オブジェクトしか扱えなかったり色々制約があるのでrefの方が正直使い勝手が良さげ。

computed()

書き方は変わるけど基本的に挙動はVue2と同じ。
関数で算出したリアクティブな値を返してくれる。

const plusOne = computed(() => count.value + 1)
console.log(plusOne.value)

参考：リアクティビティー API: コア | Vue.js

おわりに

若干ブランクがあったのでVueについて改めて勉強しました。フロントは移り変わりが激しいですね。
個人的にはVue3の書き方はぱっと見のコードが把握しやすくなったように思います。
業務ではVue3/Nuxt3/Vuetify3への移行をまとめてやっていってるので破壊的変更多くて大変です。。
Nuxt3は今年度でEOL予定って噂も聞いたりしましたが...まぁその時はその時で。
今後もがんばります〜。

おしまい。

Vue3学習忘備録

概要