【Vue.js】v-onceを使ってデータを再描画させない方法

こちらの記事では、Vue.jsのv-onceを使ってデータを再描画させない方法についてサンプルコードを用いて解説しています。

ITエンジニア特化の転職サイト！
自社内開発求人に強い【クラウドリンク】

先輩くん

年収、休日数、労働環境等クラウドリンクが審査し、これらを通過した優良求人情報のみ紹介しているよ！

後輩ちゃん

100％自社内開発の求人だから、SESのように職場環境が変わらないのがいいね！

簡単30秒で無料登録！

Vue.jsの学習におすすめ参考書
Vue.js入門 基礎から実践アプリケーション開発まで

本書情報

著者	川口 和也
発売日	2018/9/22
ページ数	893ページ
Kindle版	○
レビュー (Amazon)	(93件)

Ｖｕｅ．ｊｓ入門 基礎から実践アプリケーション開発まで /技術評論社/川口和也

posted with カエレバ

楽天市場

Amazon

Yahooショッピング

v-onceとは

まず初めに、Vue.js公式ドキュメントに記載されているv-onceについて見てみましょう。

要素とコンポーネントを一度だけ描画します。その後再描画は、要素 / コンポーネントと全てのその子は、静的コンテンツとして扱われスキップされます。
これは、更新性能を最適化するために使用することができます。

引用元：Vue.js公式ドキュメント

公式ドキュメントに記載されている「要素とコンポーネントを一度だけ描画」、これを実現させるときに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が表示されます。

<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のポイントについて軽く復習しましょう。