こちらの記事では、Vue.jsのv-onceを使ってデータを再描画させない方法についてサンプルコードを用いて解説しています。
Vue.jsの学習におすすめ書籍
Vue.js入門 基礎から実践アプリケーション開発まで
メリット
- Vue.jsを初歩から実践まで徹底的に解説
- Javascript初心者でも分かりやすい
ポチップ
先輩くん
Amazon Kindle Unlimitedに登録すると、月額980円で読み放題だからオススメだよ!
初回30日間は無料だから、まだ登録したことのない人はぜひ試してみてね!
全プログラマー必見!
変数名/関数名にもう悩まない!
変数名/関数名にもう悩まない!
リーダブルコード
メリット
- 美しいコードが書けるが自然と書けるようになる
- 他の開発者が理解しやすいコードになる
著:Dustin Boswell, 著:Trevor Foucher, 解説:須藤 功平, 翻訳:角 征典
¥2,640 (2023/07/23 02:48時点 | Amazon調べ)
目次
v-onceとは
まず初めに、Vue.js公式ドキュメントに記載されているv-onceについて見てみましょう。
要素とコンポーネントを一度だけ描画します。その後再描画は、要素 / コンポーネントと全てのその子は、静的コンテンツとして扱われスキップされます。
これは、更新性能を最適化するために使用することができます。引用元:Vue.js公式ドキュメント
公式ドキュメントに記載されている「要素とコンポーネントを一度だけ描画」、これを実現させるときにv-onceを使用します。
v-onceの書き方
実際にv-onceを使った書き方と、実行結果について見ていきましょう。
使い方はシンプルで、一度しか描画させたくない要素に対してv-onceの記述を追加するだけです。
<p v-once>{{message}}</p>
v-onceを使ったサンプルコード
<div id="app">
<p>{{message}}</p>
<p>{{helloCall()}}</p>
</div>
new Vue({
el:"#app",
data:function(){
return {
message:"first message",
}
},
methods:{
helloCall:function(){
this.message = "second message";
return "hello"
}
}
})
上記のコードでは、まず初めにmessageプロパティの中にfirst messageの文字列データを格納しています。
次にhelloCallメソッドが呼び出されると、messageプロパティにsecond messageの文字列データが渡され、最終的にsecond messageが表示されます。
このコードに対してv-onceを使って、second messageではなく一番初めに渡したfirst messageを表示させて見ましょう。
<div id="app">
<p v-once>{{message}}</p> //v-onceを追加
<p>{{helloCall()}}</p>
</div>
new Vue({
el:"#app",
data:function(){
return {
message:"first message",
}
},
methods:{
helloCall:function(){
this.message = "second message";
return "hello"
}
}
})
まとめ
今回はVue.jsのv-onceについてご紹介しました。最後にv-onceのポイントについて軽く復習しましょう。
ポイント
- 要素とコンポーネントを一度だけ描画
- 一度しか描画させたくない要素に対してv-onceを追加