【Amazon】人気の商品が日替わりで登場!
毎日お得なタイムセール!商品をみる

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

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

Vue.jsの学習におすすめ書籍
Vue.js入門 基礎から実践アプリケーション開発まで
総合評価
( 5 )
メリット
  • Vue.jsを初歩から実践まで徹底的に解説
  • Javascript初心者でも分かりやすい
楽天ブックス
¥3,718 (2024/10/05 04:59時点 | 楽天市場調べ)
先輩くん

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

後輩ちゃん

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

全プログラマー必見!
変数名/関数名にもう悩まない!
リーダブルコード
総合評価
( 5 )
メリット
  • 美しいコードが書けるが自然と書けるようになる
  • 他の開発者が理解しやすいコードになる
著: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を追加

ブログランキング・にほんブログ村へ PVアクセスランキング にほんブログ村 FC2 Blog Ranking

よかったらシェアしてね!
  • URLをコピーしました!
  • URLをコピーしました!
目次