Vue.jsにおけるtemplate内での変数定義

★ネタです

ループなどでIDからユーザー情報を参照して、情報を表示するような実装がよくあります。

基本的には、次のように参照のたびに関数などを実行して情報を得るようにするかと思います。

code:vue

dl(v-for="id in selectdUserIdList")

dt 氏名

dd {{ getUser(id).name }}

dt 年齢

dd {{ getUser(id).age }}

しかし、これではプロパティの数だけ関数が実行されて効率がよくありません。

そこで、次のように関数の結果を変数へ保存して、使い回すようにしてみましょう。

code:vue

dl(

v-for="id in selectdUserIdList"

:set="user = getUser(id)"

)

dt 氏名

dd {{ user.name }}

dt 年齢

dd {{ user.age }}

これで、関数の実行は１度きりになり、実行数を減らすことができます。

めでたし。

ではない。

一見、めっちゃ便利やんけ！と思うTipsですが、Vueにおける変数のスコープを考えてみましょう。

つまるところ、先程のBeforeのコードは

code:vue

dl(

v-for="id in this.selectdUserIdList"

:set="this.user = this.getUser(id)"

)

のように、コンポーネントインスタンスにプロパティを定義してしまっています。

また、例えば、

code:vue

dl(

v-for="id in users"

:set="users = getUser(id)"

)

数値を再代入したりするとレンダリングの無限ループが発生するので注意が必要です。

code:vue

div(v-for="v in values" :set="values = v") // 無限ループが発生する

おわりに

template内でデータの取得をキャッシュしたい場合は、おとなしくコンポーネント化しよう。

自分も変数キャッシュできないかなぁってずっと思っていたのですが、やっぱり無理そうなんですね。。。