viviONグループでは、DLsiteやcomipoなど、二次元コンテンツを世の中に届けるためのサービスを運営しています。
ともに働く仲間を募集していますので、興味のある方はこちらまで。
検証環境
Vue.js v2.7 （古くてごめんね 
）
背景
添付のようなタブ付きのリストUIのタブ部分を↓のような形でコンポーネント化する場面がありました。
（記事用に簡素化してあります）
<template>
<!-- コンポーネント化した部分 -->
<TabsBorderPrimary
:url="hoge"
:tabs="selectTabs"
:selectedTab.sync="selectedTab"
:pageParams="pageParamNames"
:pageParam.sync="pageParam"
/>
<Pagination
:from="page.from"
:to="page.to"
:total="page.total"
:paginationParameter="pageParam"
/>
</template>
参考までに、TabBorderPrimaryの中身はこのようになっています。
（記事用に簡素化（ry）
TabsBorderPrimary.vue
<template>
<div>
<template v-for="(label, key) in tabs">
<component
v-if="key"
:key="key"
:is="selectedTab === key ? 'div' : 'inertia-link'"
:href="url"
:data="{ [tabParamName]: key }"
>{{ label }}</component>
</template>
</div>
</template>
<script>
export default {
props: {
url: {
type: String,
default: '',
},
tabs: {
type: Object,
required: true,
},
selectedTab: {
type: String,
required: true,
},
pageParams: {
type: Array,
default: null,
},
pageParam: {
type: String,
default: null,
},
tabParamName: {
type: String,
default: 'tab',
},
},
data() {
return {
params: {},
};
},
created() {
//読み込み時タブを変更
const url = new URL(window.location.href);
if (!url.search) {
this.$emit('update:selectedTab', this.selectedTab);
if (this.pageParam) {
this.$emit('update:pageParam', this.pageParam);
}
return;
}
this.params = Object.fromEntries(url.searchParams);
const { tab } = this.params;
if (!tab) return;
this.$emit('update:selectedTab', tab);
if (this.pageParams) {
const currentIndex = Object.keys(this.tabs).indexOf(tab);
this.$emit('update:pageParam', this.pageParams[currentIndex]);
}
},
}
</script>
aタグの代わりにInertia.jsのLinkコンポーネントを使用しています
簡単に説明すると、タブ毎にページネーション用パラメータをBEで管理していて、FE側はタブを切り替えるたびに適切なパラメータを指定する必要がありました。そこで、
- 今までページ側で行っていたタブの切り替え処理や、ページネーション用パラメータの更新などを全て
TabsBorderPrimaryに移植- ページ側は
TabsBorderPrimaryが良い感じに設定してくれた値を.syncで受け取る- ページ側は受け取った値
pageParamをPaginationコンポーネントに渡す
という流れで、処理を切り出しました。
ただ、この場合たとえばページネーションの値が3だったとしてもタブ切り替え時には1ページ目の状態のページネーションUIが表示されてしまいます。（ページをリロードするとちゃんと3ページ目になる）
というのも、
- ページ側がレンダリングされる
→ このタイミングでコンポーネントも作成されpropsがコンポーネントに渡るTabsBorderPrimaryのcreatedが走り、$emitによって親のpageParam.syncに適切なパラメータが渡るPaginationのcreatedが走り、更新前の（1のタイミングで渡された）pageParamの状態でレンダリングされる- 親からPaginationに、更新後のpageParamが渡る
という流れになっており、最終的に更新後のパラメータは渡っているものの、その前にPaginationコンポーネントのレンダリングが完了してしまっているためこのような状態になります。
※SSRであれば本来4のあとにコンポーネントが自動更新されるが、今回はSPAなので更新されていない
つまり、値を渡した後に、再度Paginationコンポーネントを再レンダリングしてあげる必要がありました。
以下、ようやく本題です。
コンポーネントを再レンダリングする際のベストプラクティスってなんだ？？？
過去の経験からforceUpdateを使うという前提知識はあったものの、他の方法だったり、そもそも再レンダリングする際のベストプラクティスなどを知らないなと思ったので調べてみました。
方法としては、大まかに
- ページをリロードさせる
- v-ifを設定し、v-ifのフラグをnextTickを挟んでfalse → nextTick → trueと切り替える
- forceUpdateを使う
- 更新対象の値をkeyに設定する（これがベストプラクティス）
といったものがあるみたいです。
ページリロード（So Bad😭）
- propsが更新されるたびにページ全体をリロードする
- パフォーマンス激落ちくん。ありえない。
v-ifによる制御（Bad😢）
- propsの更新前後でv-ifのフラグを切り替えてコンポーネントを再生成させる
- コンポーネントの再レンダリングではなく再生成のため、2回目のコンポーネントレンダリング時にも全てのライフサイクル処理が走ることになる → パフォーマンス❌
forceUpdate（Better😊）
- 更新したいコンポーネントのDOMに対してforceUpdateを使う
- Vue公式でサポートされている方法
- ただし該当DOMのビューが再レンダリングされるだけであり、コンポーネント内のcomputedなどの算出プロパティは更新されない
keyによる制御（Best🥰）
- 更新対象のコンポーネントに対して、レンダリング後に値が変わるpropsをkeyに設定する
- Vueはkeyが変わったときにそのDOMを更新する必要があると認識してくれる
- 値が変わるpropsをkeyに設定することで、子コンポーネントが更新と再レンダリングを勝手にやってくれる → コンポーネントの作成やライフサイクルフックや無駄に発火しなくて済むのでパフォーマンス的にも👌
今回の例だとこうなります。
<template>
<TabsBorderPrimary
:url="hoge"
:tabs="selectTabs"
:selectedTab.sync="selectedTab"
:pageParams="pageParamNames"
:pageParam.sync="pageParam"
/>
<Pagination
:key="pageParam"
:from="page.from"
:to="page.to"
:total="page.total"
:paginationParameter="pageParam"
/>
</template>
ちなみに
同一のpropsで複数のコンポーネントを同時に更新したい場合は、例えば以下のように対応できます。
<template>
<ComponentFirst :key="`${keyProps}-1`" />
<ComponentSecond :key="`${keyProps}-2`" />
</template>
あとがき
いかがでしたでしょうか？
もしご意見・ご感想・ご指摘などございましたらぜひよろしくお願いいたします
それでは 
参考文献
一緒に二次元業界を盛り上げていきませんか
株式会社viviONでは、フロントエンドエンジニアを募集しています。
また、フロントエンドエンジニアに限らず、バックエンド・SRE・スマホアプリなど様々なエンジニア職を募集していますので、ぜひ採用情報をご覧ください。