こちらの記事では、Vue.jsのv-onceを使ってデータを再描画させない方法についてサンプルコードを用いて解説しています。
ITエンジニア特化の転職サイト!
自社内開発求人に強い【クラウドリンク】
Vue.jsの学習におすすめ参考書
Vue.js入門 基礎から実践アプリケーション開発まで
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"
}
}
})
{{message}}を囲っているpタグに対してv-onceを追加すると、second messageではなくfirst messageが表示されるようになります。
まとめ
今回はVue.jsのv-onceについてご紹介しました。
最後にv-onceのポイントについて軽く復習しましょう。
- 要素とコンポーネントを一度だけ描画
- 一度しか描画させたくない要素に対してv-onceを追加