Vue3の計算関数の詳しい解説：計算プロパティの便利な使い方

Vue3 の計算関数の詳細な説明: 計算プロパティの便利な使い方

計算プロパティは Vue で一般的に使用されるメソッドであり、主に論理計算をテンプレートに配置して、データの操作と表示を容易にするために使用されます。開発者。 Vue3 では、計算されたプロパティは依然として非常に重要な機能であり、計算されたプロパティを使用すると計算された関数の方が便利です。この記事では、Vue3 の計算関数の詳細な紹介と説明を提供します。

計算関数とは

計算関数は Vue3 の組み込み関数であり、主に計算プロパティを作成するために使用されます。計算関数を使用すると、計算プロパティを簡単に作成でき、コードがより簡潔で読みやすくなります。計算された関数はコンポーネント インスタンスで関数的に宣言され、計算されたプロパティが依存するリアクティブ変数が変更されるたびに自動的に更新されます。

計算関数の基本的な使用法

計算関数を使用して計算プロパティを作成するには、コンポーネント内で関数プロパティを宣言するだけです。以下は、計算関数を使用して計算プロパティを作成する簡単なコード例です。

<template>
  <div>
    <p>原来的值：{{ multiplied }}</p>
    <p>改变后的值：{{ multipliedByTwo }}</p>
    <button @click="updateValue">更新</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      value: 10,
    }
  },
  computed: {
    multiplied() {
      return this.value * 2
    },
    multipliedByTwo() {
      return this.multiplied * 2
    },
  },
  methods: {
    updateValue() {
      this.value = 20
    }
  }
}
</script>

上記のコード例では、計算プロパティの元の値を表すデータ属性値を定義します。 2 つの計算プロパティ、つまり multiplied と multipliedByTwo が計算関数によって作成されます。このうち、multiplied はデータ属性の value 変数に依存し、multipliedByTwo は multiplied に依存します。このようにして、計算されたプロパティを簡単に有効にし、関連する値をリアルタイムで計算できます。

計算関数の高度な使用法

計算関数には、計算属性の動作をより適切に制御できる高度な使用法もあります。以下で 1 つずつ紹介します。

1. ゲッターとセッター

計算関数は、ゲッターとセッターを通じて計算プロパティの読み取りと更新を制御できます。ゲッターは計算されたプロパティの読み取り関数であり、セッターは計算されたプロパティの更新関数です。デフォルトでは、計算されたプロパティは読み取り専用で変更できませんが、setter 関数を使用して計算されたプロパティの値を直接変更し、強制更新の目的を達成することができます。

次は、ゲッターとセッターを使用した計算プロパティのコード例です:

<template>
  <div>
    <p>原来的价格：{{ price }}</p>
    <p>折扣后的价格：{{ discountedPrice }}</p>
    <button @click="applyDiscount">打折</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      originalPrice: 100,
      discountPercentage: 10
    }
  },
  computed: {
    price: {
      get() {
        return this.originalPrice
      },
      set(newPrice) {
        this.originalPrice = newPrice
      }
    },
    discountedPrice() {
      const discount = this.discountPercentage / 100
      return this.price - (this.price * discount)
    }
  },
  methods: {
    applyDiscount() {
      this.price = this.price - 10
    }
  }
}
</script>

上記のコード例では、計算されたプロパティの価格を宣言し、そのゲッター関数とセッター関数を定義します。 discountPrice は価格によって異なります。価格が変更されると、discountPrice は自動的に更新されます。さらに、このメソッドを実行することで計算された属性の価格を直接変更できるメソッド applyDiscount も定義し、計算された属性の強制更新を実現できます。

2. 計算されたプロパティのキャッシュ

Vue3 では、計算されたプロパティのキャッシュがデフォルトで有効になっています。これは、計算されたプロパティの従属変数が変更されていない場合、計算されたプロパティは再計算せずに最後の結果を直接返すことを意味します。これにより、計算時間とパフォーマンスが節約され、コードの実行効率が向上します。

次は、計算属性キャッシュのサンプル コードです。

<template>
  <div>
    <p>原来的数量：{{ count }}</p>
    <p>倍数：{{ multiplier }}</p>
    <p>计算结果：{{ computedValue }}</p>
    <button @click="updateCount">更新数量</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      count: 0,
      multiplier: 2
    }
  },
  computed: {
    computedValue() {
      console.log('计算属性执行')
      return this.count * this.multiplier
    }
  },
  methods: {
    updateCount() {
      this.count++
    }
  }
}
</script>

上記のサンプル コードでは、計算属性 computedValue を宣言します。これは、count と multiplier の積を計算するために使用されます。マウントされたライフサイクルの後、計算されたプロパティが 1 回実行され、計算されたプロパティのキャッシュが有効になります。 updateCount メソッドでは、count 変数の値を更新することで、computedValue の再計算をトリガーします。現時点では、計算されたプロパティは値が変更された場合にのみ再計算されることがコンソールで確認できます。

計算された属性のキャッシュを有効にしたくない場合は、計算関数で ref 関数を使用できます。 ref 関数は応答オブジェクトを返し、オブジェクトがアクセスされるたびに計算関数が再計算されます。

import Vue, { ref } from 'vue'

export default {
  setup() {
    const count = ref(0)

    const computedValue = () => {
      console.log('计算属性执行')
      return count.value * 2
    }

    return {
      count,
      computedValue
    }
  }
}

概要

計算関数は Vue3 の非常に重要な関数で、計算プロパティを作成することでデータを操作する非常に便利な方法を提供します。この記事の導入を通じて、読者は計算関数の基本を理解し、高度な使用法とテクニックを習得したと思います。 Vue3 の開発において、計算関数の使用をマスターすることは、コーディング作業に大きな助けとなることは間違いありません。

以上がVue3の計算関数の詳しい解説：計算プロパティの便利な使い方の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。