Vue.jsの単一ファイルコンポーネントはコンポーネントを構成するHTMLテンプレート、JavaScript、CSSを一ファイルにまとめる仕組みです。コンポーネントの構成要素全体を把握しやすい点で優秀なのですが、テンプレート部で扱うことのできる変数が若干不透明で時として直感的でない振る舞いをします。
次の例ではコンポーネント内全体がスコープっぽいところで変数hogeStrを宣言してテンプレート内で使用しようとしますが、これはhogeStrが未定義扱いされます。
1 2 3 4 5 6 7 8 9 10 | <template> <div>{{ hogeStr }}</div></template><script lang="ts">const hogeStr = 'hoge';import Vue from 'vue';export default {};</script> |
実際に扱うときにはVueインスタンスの内部に含まれなければいけません。変化のない定数でも必須です。そのため実際は次のようにします。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 | <template> <div>{{ hogeStr }}</div></template><script lang="ts">const hogeStr = 'hoge';import fuga from 'fuga';import Vue from 'vue';export default { data() { return { hogeStr // 変化する値はdata }; }, computed: { nearMsgEnum, // 変化せず、getterのみでいいならcomputed },};</script> |
単一ファイルコンポーネントの作りではテンプレート、JavaScript、CSSがタグごとに分かれますが、結局のところtemplateタグもVueインスタンスの一部でありVueインスタンス外部を見るスコープにないようです。
余談ですがdata, computedで同じ名前の値を読み込んでもVue.jsは動き続けます。外部から値を読み込むように作り替えた時に想定外の挙動が起きたならば、これが起きているのではないかと疑えます。
