Vue.jsではプロパティ名の重複に気を付けたほうが良さそう

結論

Vue.jsではプロパティ名の重複に気を付けたほうが良さそうだと調査をして感じました。

前提

• props、data、computed、methodsなどがこの後出てきます。が、これらの意味・役割についてはこの記事では解説しません。ご了承願います。
• この記事ではCDN の Vue を使用しています。
• vue@3.3.4を使用しています

要点

• Vue.jsでテンプレート構文にプロパティをバインドしたいとき、バインドしたいプロパティ名を指定します。
• 「プロパティを持てるものたち(props、data…)」のいずれかが持っているプロパティであれば、そのプロパティ名をバインドしたいものとして指定できます。
• 「プロパティを持てるものたち(props、data…)」がそれぞれ持っているプロパティ名に重複がある場合、重複のあったプロパティ名を指定したとき、そのどれか1つのプロパティとバインドするものと考えられます。
• 裏を返せば、重複のあったプロパティ名を指定したとき、バインドできないプロパティが存在すると考えられます。
• つまり、プロパティ名の重複には気を付けたほうが良さそうという考えに至りました。

解説

テンプレート構文にプロパティをバインド

Vue.jsで、テンプレート構文にプロパティをバインドしたいときです。そのときはプロパティ名を指定してバインドします。

See the Pen Untitled by kabuto64425 (@kabuto64425) on CodePen.

指定するプロパティ名

この、指定するプロパティ名についてです。これは「プロパティを持てるものたち(props、data…)」のいずれかが持っているプロパティであれば、その名を指定することができます。

See the Pen vueのプロパティ実験 by kabuto64425 (@kabuto64425) on CodePen.

名前が重複すると

上記のように、いずれかが持っているプロパティであれば、その名を指定できます。ここで、「もし、いずれかの持っているプロパティ名に重複があればどうなってしまうのか」と思ったわけです。実際に、props、data、computed、methods全てにhogeを持たせてみます。

See the Pen Untitled by kabuto64425 (@kabuto64425) on CodePen.

結果、dataのhogeがバインドされました。このことから、どれか1つのプロパティとバインドするものと考えられます。

考察

上記の結果から、重複のあったプロパティ名を指定したとき、そのどれか1つのプロパティとバインドすることが考えられます。裏を返せば、重複のあったプロパティ名を指定したとき、バインドできないプロパティが存在すると考えられます。
つまり、名前の重複があると、意図しない挙動を起こすことがあるなと思ったので、プロパティ名の重複には気を付けたほうが良いと考察した次第です。

おわりに

Vue.jsについて、調査を始めて間もない私が調査の末に出した考察であった点、ご承知いただければと思います。

以上です。

参考