vueで計算されたプロパティメソッドを呼び出す方法

Vue では、計算プロパティは、既存のプロパティの値に基づいて新しいプロパティ値を計算できる特別なプロパティです。開発では通常、計算が必要な一部のプロパティを計算プロパティとして定義して、JS コードで頻繁に論理計算を行わないようにしてテンプレートで直接使用できるようにします。

ただし、(値を取得する代わりに) Vue コンポーネントで計算されたプロパティ メソッドを呼び出す必要がある場合があります。この記事では、この要件を達成するためのいくつかの方法を紹介します。

計算されたプロパティを直接呼び出す

Vue コンポーネントの計算されたプロパティは通常のプロパティと同様にアクセスできるため、this.計算されたプロパティ名 プロパティを通じて計算に直接アクセスでき、したがってそれを使用する方法。例:

computed: {
  fullName() {
    return this.firstName + ' ' + this.lastName;
  }
},
methods: {
  greet() {
    console.log('Hello, ' + this.fullName);
  }
}

上記のコードでは、fullName 計算プロパティを定義し、この計算プロパティを greet メソッドで直接使用して、「こんにちは、姓名」の文字列。

このメソッドは非常に単純ですが、計算された属性に対応するメソッドはデータが変更されたときに自動的に実行されるわけではなく、最新の計算結果を取得するには手動で呼び出す必要があることに注意してください。

計算プロパティのゲッターの使用

計算プロパティ自体を直接呼び出すだけでなく、計算プロパティの getter 関数を使用することもできます。計算プロパティの getter 関数は、プロパティにアクセスすると自動的に呼び出されます。したがって、計算プロパティのロジックを getter 関数にカプセル化すると、次の場所で呼び出すことができます。計算結果を取得する関数が必要です。例:

computed: {
  fullName: {
    get() {
      return this.firstName + ' ' + this.lastName;
    }
  }
},
methods: {
  greet() {
    console.log('Hello, ' + this.fullName);
    // 调用计算属性的getter函数
    console.log('Hello, ' + this.fullName.get());
  }
}

上記のコードでは、計算された属性の getter 関数を使用して計算結果を取得します。この計算結果には、this.fullName.get() を通じてアクセスします。このメソッドは、計算されたプロパティを直接呼び出すよりも多くのコードを必要としますが、this.fullName.get() が呼び出されるたびに最新の計算結果を確実に取得できます。

watch を使用して計算されたプロパティを監視する

getter 関数を使用することに加えて、Vue が提供する watch 関数を使用して監視することもできます。計算されたプロパティが変更されるため、計算された属性値が変更されたときに対応する操作が実行されます。このメソッドでは、watch で計算されたプロパティと同じ名前のリスニング関数を定義し、計算されたプロパティの値をパラメーターとして渡す必要があります。例:

computed: {
  fullName() {
    return this.firstName + ' ' + this.lastName;
  }
},
watch: {
  fullName(newVal, oldVal) {
    console.log('计算属性值从', oldVal, '变为', newVal);
  }
},
methods: {
  greet() {
    console.log('Hello, ' + this.fullName);
  }
}

上記のコードでは、計算された属性と同じ名前の watch リスニング関数を定義して、計算された属性値の変化を監視します。計算されたプロパティの値が変更されると、この関数が実行されるため、関数内で対応する操作を実行できます。

計算された属性の新しい値と古い値はリスニング関数で取得できますが、リスニング関数で計算された属性の値を変更しないでください。変更しないとクラッシュが発生します。 .サイクル。 まとめ

上記では 3 つの実装方法を紹介しましたが、実際の使用では、シナリオに応じてさまざまな方法を選択できます。計算されたプロパティの値を単に取得したいだけの場合は、計算されたプロパティ自体を直接呼び出すことができます。計算されたプロパティの値をさまざまなメソッドで複数回取得する必要がある場合は、

関数。必要に応じて、属性値が変更されたときに追加の操作を実行するには、watch を使用して計算されたプロパティを監視します。 通常、計算プロパティを使用する場合、通常のプロパティとして扱う必要がありますが、計算プロパティの値は既存のプロパティに基づいて計算する必要があります。コンポーネントのプロパティを計算する方法を使用する必要がある場合は、上記の 3 つの方法で実行でき、特定のシナリオに応じて最適な方法を選択できます。

以上がvueで計算されたプロパティメソッドを呼び出す方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。