uiuifree.com

- サイト制作のノウハウと最適化を目指して-

2020.8.31【Vue.js】composition-apiをアップデートしたらエラーが出るようになり動作しなくなった

【Vue.js】composition-apiをアップデートしたらエラーが出るようになり動作しなくなった

テンプレートでrefを自動展開してくれない

Vue.jsの3.xで正式採用されたcomposition-api、発表されてからいずれ変わるだろうと使い続けていましたがある時アップデート作業を行うと全く動作しなってしまいました。

当時v0.6.7 を使って開発をしており、

<template>
<div>
count : {{count}}
test.count : {{test.count}}
</div>
</template>
<script lang="ts">
import { defineComponent, ref } from '@vue/composition-api'
  setup () {
    const count = ref(0)
    return {
      count,
      test: {
        count
      }
    }
  }
})
</script>

のような書き方をした場合、countとオブジェクト参照であるtest.countのテンプレート内での動作は全く同じに出力になります。 しかし最新バージョン1.0.0-beta.11 にアップデートをして上記コードを実行すると

count : 0
test.count : {"value":0}

と表示されるようになっていました。

composition-apiの挙動が大きく変わりました。

一瞬バグかな?と思い投げかけましたが開発コミュニティの方から「意図通りの挙動だよ」と教えてもらい、https://github.com/vuejs/vue-next/pull/1682 を見るように言われました。

重大な変化

issueを確認するとVueの開発者であるEvan氏がRC版を出す前に重大な仕様を変更したい理由を述べています。

setup()戻りオブジェクトのテンプレート自動参照アンラップは、ルートレベルの参照にのみ適用されるようになりました。

setup() {
  return {
    rootRef: ref(1),
    object: {
      nestedRef: ref(3)
    }
  }
}

この場合{{rootRef}}はテンプレートに1と描画されますが、{{ object.nestedRef }}は3と描画されなくなります。 これはrefでもreadonlyでもどちらも同じです。

更に細かい理由について知りたい方はissueの方を読み込んでください。

メジャーアップデートについて

普段からサクッとモジュールアップデートをしていましたが今回のことがありバージョンアップするときは 変更履歴(CHANGELOG)を必ず確認するようになりました。

Vue3リリースも近づいていますがアプデして本番環境で不具合起こさないように事前準備しっかりと検証していきましょう。

目次
PROFILE

このサイトを運営してるuiuifreeです。
渋谷のベンチャー企業で2年ほど新規事業を担当した後にフリーランスエンジニアにキャリア転換。
求人サイトの開発が多くエンジニア/看護師/保育士などの分野でサイトを運営しています。

アウトプット中の技術

リーダブルコード ―より良いコードを書くためのシンプルで実践的なテクニック (Theory in practice)