この記事は 2023 年 03 月 27 日に投稿しました。
目次
リンク
1. はじめに
こんにちは、iOS のエディタアプリPWEditorの開発者の二俣です。
今回は業務で使用しているVue3のv-memoを使用する方法についてです。
2.Vue3のv-memoを使用する
Vue3のv-memoですが、要素やコンポーネントを一度だけレンダリングし、その後の更新はスキップします。
実装例
v-memoの引数を指定した場合
<div v-memo="[value1, value2]"> <!-- value1とvalue2の値が前回と同じ場合、この中身の再レンダリングはスキップされます。 --> </div>
v-memoの引数を空配列とした場合
<div v-memo="[]"> <!-- v-memoの引数が空配列の場合、v-onceと同等の動作になります。 --> </div>
v-forと一緒に使用した場合
<div v-for="item in list" :key="item.id" v-memo="[item.id === selected]"> <!-- item.idがselectedと等しい場合、この中身の再レンダリングがスキップされます。 --> </div>
リファレンス
3. おわりに
v-memoですが、v-forなどの繰り返し処理で使用した場合、パフォーマンスの向上が望めると思います。
リンク
紹介している一部の記事のコードはGitlabで公開しています。
興味のある方は覗いてみてください。
私が勤務しているニューラルでは、主に組み込み系ソフトの開発を行っております。
弊社製品のハイブリッド OS Bi-OSは高い技術力を評価されており、特に制御系や通信系を得意としています。
私自身はiOS モバイルアプリやウィンドウズアプリを得意としております。
ソフトウェア開発に関して相談などございましたら、お気軽にご連絡ください。
また一緒に働きたい技術者の方も随時募集中です。
興味がありましたらご連絡ください。
EMAIL : info-nr@newral.co.jp / m-futamata@newral.co.jp
TEL : 042-523-3663
FAX : 042-540-1688
