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

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

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

本書情報

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

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

posted with カエレバ

楽天市場

Amazon

Yahooショッピング

参考書が苦手な人はUdemyの動画がおすすめ
はじめてのVue.js 3 入門！
導入からアプリケーション開発まで体系的に学ぶ

動画情報

作成者	中村 裕太
学習時間	5時間
受講者数	12,910人
レビュー	(2,509件)

動画の詳細はこちら

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