vue/composition-api@1.0.0-beta7で入ったBREAKING CHANGESについて解説する

vue/composition-api@ 1.0.0-beta7で入ったBREAKING CHANGESについて解説します。

その変更はこちらのURLに記載されています。

<template>内でRef型の変数がUnwrapされるのは、setup()で返したオブジェクトのroot levelに限るという内容です。

どういうことか

composition apiのsetup()では、<template>内で扱いたいリアクティブな値をオブジェクトにまとめてreturnします。

return {
  loading: ref(true),
  hogeState: {
    loading: ref(true)
  }
}

この場合、vue/composition-api@1.0.0-beta7以前では、以下のように<template>を書くことが出来ました。

<span>{{ loading }}</span>
<span>{{ hogeState.loading }}</span>

Ref<T>であれば、本来は値を取り出すために.valueしなければいけないのですが、<template>内であればUnwrapされてT型の値が取り出せるのでスマートに書けるということでした。

これが、vue/composition-api@1.0.0-beta7以降では、root levelしかUnwrapされなくなるので以下のように書かないといけません。

<span>{{ loading }}</span>
<span>{{ hogeState.loading.value }}</span>

…明らかに書きたくない書き方になりましたね。

所感と対策

個人的にはこの変更はポジティブだと思っています。

そもそもネストした箇所にRef<T>があるということは、setup()内に複数のreactiveなStateがあるなどで、root levelにまとめることが難しかったりややこしいという状況だと思います。

// あり得るとしたら、複数のhooksを使っているなどの理由で、同じ名前のRefが生えてしまって仕方なくネストしているとかでしょうか
return {
  hogeState: {
    loading: ref(true)
  },
  fugaState: {
    loading: ref(true)
  }
}

その場合、コンポーネントのサイズが大きすぎるでしょうから分割したり、それが難しければ以下のように名前を変更してstateを扱えば済むので、そのように工夫する方が設計的には嬉しいように思います。

const { loading: hogeLoading } = useHoge()

const { loading: fugaLoading } = useFuga()

return {
  hogeLoading,
  fugaLoading
}

個人的には1コンポーネント1Stateで済むように、useHogeのサイズ感を適宜インフラ層を用意するなどして工夫することが大事だと考えます。

まとめ

composition-apiを既に使っている方で、ネストしたオブジェクトにRef型の変数を入れていそうだなと思う方はなるべく早くアップデートして要チェックです。

そうでない方は、頭の片隅にでも入れておいていただければと思います！

よろしければTwitterのフォローお願いします！
https://twitter.com/Meijin_garden