Qiita Teams that are logged in
You are not logged in to any team

Log in to Qiita Team
Community
OrganizationEventAdvent CalendarQiitadon (β)
Service
Qiita JobsQiita ZineQiita Blog
1
Help us understand the problem. What is going on with this article?
@mejileben

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

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

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

F57826D9-8F78-476C-8300-B0194A8D637E.jpeg

<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

1
Help us understand the problem. What is going on with this article?
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
1
Help us understand the problem. What is going on with this article?