Vue.js

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

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

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

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

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

動画情報
作成者中村 裕太
学習時間5時間
受講者数12,910人
レビュー (2,509件)
動画の詳細はこちら

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を追加

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