HTMLのページを再描画するには以下のような場面があります。 refresh (リフレッシュ)、リダイレクト ：ページ自体を別のページに移動したい場合 reload (リロード) ：ページを再度表示（リロード）することで最新化したい場合 [PR] Webデザインで副業する学習方法を動画で公開中

再描画の際にコンポーネントは初回と同じ処理が実行されるのではなく一部の処理は前回のコンポーネントの状態を引き継ぎます。 たとえばuseStateで値が変化されている状態で再描画が発生すると、useStateで取得される値は初期値ではなく、最後にコンポーネントが保有していた値になります。 以下のコードではボタンをクリックした際にuseStateで定義している値が変化するので、Fooコンポーネントが再描画されFooコンポーネント内で定義している処理が再実行されます。 そのため console.log ('再描画',count) が毎回実行されるのですが、参照している count は初期値ではなく変更後の値が参照できるようになっています。

再描画ボタンをクリックすることで updateComponent 関数が呼ばれますが、関数内では isRendered の値を一度 false にしDOMの更新が終わった後に true に戻すということを行なっています。 そうすることで、VueがChildコンポーネントを再描画するという仕組みです。