Vue.jsの計算されたプロパティ

Vueの計算プロパティを使用して計算をキャッシュする方法を学ぶ


計算プロパティとは

Vue.jsでは、括弧を使用して任意のデータ値を出力できます。

<template>
  <p>{{ count }}</p>
</template>

<script> export default { data() { return { count: 1 } } } </script>

このプロパティは、たとえば、いくつかの小さな計算をホストできます

<template>
  {{ count * 10 }}
</template>

ただし、JavaScriptは1つに制限されています

この技術的な制限に加えて、テンプレートはユーザーへのデータの表示のみに関係し、論理計算は実行しないことも考慮する必要があります。

より単一の式を実行し、より宣言型のテンプレートを作成するには、計算されたプロパティ

計算されたプロパティは、computedVueコンポーネントのプロパティ:

<script>
export default {
  computed: {

} } </script>

計算されたプロパティの例

計算されたプロパティを使用するサンプルコードは次のとおりですcount出力を計算します。通知:

  1. 電話する必要はありませんでしたcount()。 Vue.jsは自動的に関数を呼び出します
  2. 通常の関数(矢印関数ではない)を使用して、countを介してコンポーネントインスタンスにアクセスできる必要があるため、計算されたプロパティthis

    <template>
    <p>{{ count }}</p>
    </template>
    

    <script> export default { data() { return { items: [1, 2, 3] } }, computed: { count: function() { return 'The count is ’ + this.items.length * 10 } } } </script>

計算されたプロパティとメソッド

あなたがすでに知っているならVueメソッド、違いは何だろうと思うかもしれません。

まず、メソッドは参照されるだけでなく呼び出される必要があるため、呼び出す必要がありますcount()の代わりにcountあなたが持っている場合count方法:

<script>
export default {
  data() {
    return {
      items: [1, 2, 3]
    }
  },
  methods: {
    count: function() {
      return 'The count is ' + this.items.length * 10
    }
  }
}
</script>

しかし、主な違いは計算されたプロパティはキャッシュされます

の結果count計算されたプロパティは、itemsデータプロパティが変更されます。

重要:計算されたプロパティはリアクティブソースが更新されたときにのみ更新されます。通常のJavaScriptメソッドは反応しないため、一般的な例はDate.now()

<template>
  <p>{{ now }}</p>
</template>

<script> export default { computed: { now: function () { return Date.now() } } } </script>

一度レンダリングすると、コンポーネントが再レンダリングされても更新されません。ページの更新時に、Vueコンポーネントが終了して再初期化されたとき。

この場合、方法はニーズにより適しています。

私の無料ダウンロードVueハンドブック


その他のvueチュートリアル: