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

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

Vue.jsの学習におすすめ書籍

Vue.js入門 基礎から実践アプリケーション開発まで

総合評価

( 5 )

メリット

• Vue.jsを初歩から実践まで徹底的に解説
• Javascript初心者でも分かりやすい

Vue．js入門 基礎から実践アプリケーション開発まで [ 川口和也 ]

楽天ブックス

¥3,718 （2024/11/17 15:24時点 | 楽天市場調べ）

Amazonで探す

楽天市場で探す

Yahoo!ショッピングで探す

ポチップ

先輩くん

Amazon Kindle Unlimitedに登録すると、月額980円で読み放題だからオススメだよ！

後輩ちゃん

初回30日間は無料だから、まだ登録したことのない人はぜひ試してみてね！

Amazon Kindle Unlimited

全プログラマー必見！
変数名/関数名にもう悩まない！

リーダブルコード

総合評価

( 5 )

メリット

• 美しいコードが書けるが自然と書けるようになる
• 他の開発者が理解しやすいコードになる

リーダブルコード ―より良いコードを書くためのシンプルで実践的なテクニック (Theory in practice)

著:Dustin Boswell, 著:Trevor Foucher, 解説:須藤 功平, 翻訳:角 征典

¥2,640 （2023/07/23 02:48時点 | Amazon調べ）

Amazonで探す

楽天市場で探す

Yahoo!ショッピングで探す

ポチップ

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