Last-Modified: 2022/05/20

Vue.jsの算出プロパティ【現役エンジニアが解説】

PROGRAM

今回は、Vue.jsの算出プロパティについて、簡単に解説していきます。

算出プロパティが必要な理由

Vue.jsのテンプレートでは以下のような書き方もできます。

<div id="app">
  {{ message.split('').reverse().join('') }}
</div>

これはテンプレートの中でmessageプロパティを反転させて表示しています。

ただし、これは可読性が高くないため、本来であればプロパティ名だけの指定にしたいものです。これが算出プロパティが必要となる理由です。

算出プロパティとは

では算出プロパティとは何かというと以下のようなものです。

<div id="app">
  <p>{{ reversedMessage }}</p>
</div>

<script>
var app = new Vue({
  el: '#app',
  data: {
    message: '123456789'
  },
  computed: {
    reversedMessage: function () {
      return this.message.split('').reverse().join('')
    }
  }
})
</script>

上記のコードの例では、reversedMessageが算出プロパティになります。

これによって、テンプレートの中がごちゃごちゃせず、シンプルになります。

算出プロパティとメソッドの違い

算出プロパティとメソッドは似ています。

methods: {
  reverseMessage: function () {
    return this.message.split('').reverse().join('')
  }
}

上記のようにメソッドで実装しても結果は変わりません。

しかし、算出プロパティではプロパティの値が変わらなければキャッシュにより何度も呼び出されても即時に結果を返すことができます。

• facebook
• Tweet
• Read Later