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チュートリアル：


Tech Wiki Online！