Vue3 の計算プロパティ関数: よりエレガントなコードを記述できるようになります

Vue.js では、データを管理し、テンプレート内の特定のコンテンツをレンダリングするために、計算されたプロパティ関数をよく使用します。 Vue.js バージョン 3 では、計算プロパティ関数の機能がより強力かつ柔軟になり、より表現力豊かでエレガントなコードを作成できるようになりました。

計算されたプロパティは、Vue インスタンス内の 1 つ以上のリアクティブな依存関係に基づいて計算されたプロパティです。リアクティブな依存関係が更新されると、計算されたプロパティはその値を再計算するため、リアクティブになります。計算プロパティの構文は次のとおりです。

computed: {
  propName: function() {
    // return value based on reactive dependencies
  }
}

Vue.js 3 では、計算プロパティ関数は次の 2 つの方法で使用できます。

1. Through the computed メソッド 計算プロパティ関数の定義

Vue.js 3 の computed 関数を使用すると、計算プロパティ関数の定義が簡単になります。関数をパラメータとして受け取り、その値を自動的に計算して更新するリアクティブ参照を返すことができます。

たとえば、2 つの変数の合計を計算することによって計算プロパティを定義する必要があるコンポーネントがあるとします。 Vue.js 3 では、次のように記述できます。

<template>
  <div>{{ sum }}</div>
</template>

<script>
import { computed } from 'vue';

export default {
  setup() {
    const num1 = 2;
    const num2 = 3;
    
    const sum = computed(() => {
      return num1 + num2;
    });
    
    return { sum };
  }
}
</script>

上の例では、Vue.js 3 の computed 関数を使用して、計算されたプロパティ sum # を定義しました。 ##。 computed関数は、Vue.js 3 のリアクティブ API を使用して計算されたプロパティの値を計算する関数をパラメーターとして受け取ることができます。 2 つの変数 num1 と num2 を定義し、アロー関数を使用してそれらの合計を返します。最後に、コンポーネント オプションで sum 計算プロパティを返します。

2. ref 関数と watch 関数を使用して計算プロパティ関数を定義する

ref 関数と watch 関数を使用します。この場合、まず ref 関数を使用して計算されたプロパティ関数の開始値を定義し、次に watch 関数を使用して計算ロジックとその応答依存関係を定義します。計算されたプロパティ関数。

<template>
  <div>{{ sum }}</div>
</template>

<script>
import { ref, watch } from 'vue';

export default {
  setup() {
    const num1 = ref(2);
    const num2 = ref(3);
    const sum = ref(num1.value + num2.value);

    watch([num1, num2], () => {
      sum.value = num1.value + num2.value;
    });

    return { sum };
  }
}
</script>

ref 関数を使用して応答変数 num1 と num2 を定義し、値を割り当てます。それぞれ2と2。3.次に、ref 関数を使用してリアクティブ変数 sum を再度定義し、その初期値を num1.value num2.value に設定します。

watch 関数を使用して、num1 と num2 の変更を監視します。 ## と num2 の値が変更されると、watch 関数は sum の値を自動的に更新します。 sum.value を使用して計算されたプロパティの値を更新し、応答してテンプレートに反映されるようにします。 概要

computed

ref 関数と watch 関数を使用して計算プロパティ関数を定義すると、よりエレガントで表現力豊かなコードを作成できます。 Vue.js 3 の計算プロパティ関数を使用すると、Vue.js のリアクティブ システムを最大限に活用し、アプリケーションの保守性と再利用性を向上させることができます。

以上がVue3 の計算プロパティ関数: よりエレガントなコードを記述できるようになりますの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。