【備忘録】VueのProp(配列)の初期化の記述ミス

521
【備忘録】VueのProp(配列)の初期化の記述ミス

VueのProp(配列)の初期化の記述ミス

Vueのコンポーネントに新たに配列を受け渡すことになり改修を実施したが、いくつかミスをし、ソースコミット後に別タスク担当の方から指摘を受けるまで、ミスに気づけなかった。

調査したらすぐ解決したのだが、備忘録として残しておくことにする。

VueのPropの初期化記述ミス

@Prop( default: [] )
ignoreFields?: FieldPath[]

正しくは、ファクトリ使うんだとの記載が、公式サイトでも見かけられた。
Vueのプロパティのサンプルコード中のコメント)

@Prop( default: () => [] )
ignoreFields?: FieldPath[]

ファクトリによる初期化の形をとらないと、こちらの記事で説明があるように複数コンポーネント間でObject、配列が共有されてしまうため、正しくデータが取り扱えなくなる。

動作確認時のミス

上記の記述ミスをしたのだが、動作確認でもミスしたため、気づけなかった。

  • ビルド時には、特に警告もエラーも出ない。
  • Propに値を渡している場合は、警告も出ずに普通に動作する。

このため、Propを使わないパターンでテストや動作確認をしないと、問題が発生しない。
今回は、Propに値を渡す使い方のみしか確認していなかったため、気づくのが遅れた。

Propに値を渡さないでコンポーネントを呼び出すと、下記みたいな警告が出る。

Invalid default value for prop "XXXXX": Props with type Object/Array must use a factory function to return the default value.

まとめ

当たり前だが、コンポーネントにインプットを増やしたので、パターン網羅して動作確認すべきだった。コンポーネント単体のテストが用意されていないため、画面から動作確認をしたこともあり、全呼び出しパターンについて試せていなかった。