Vue の計算プロパティ API (計算) の詳細な分析-Vue.js-php.cn

#Vue テンプレートの式構文は、単純な操作に対して 1 つの式のみをサポートします。複雑な論理計算の場合は、計算されたプロパティを使用する必要があります。。

Computed は、props、data、vuex のデータに依存 (計算) できます。つまり、props/data/vuex のデータ変更に応答して計算された属性を宣言し、処理後の結果を返すことができます。何らかの計算。 [関連する推奨事項:

vue.js ビデオチュートリアル]

計算属性の記述方法

計算属性の属性値は関数またはオブジェクトになります

1 . 属性値は function ですこのとき、計算される属性は getter のみです

 {{fullName}}

ログイン後にコピー

Vue の計算プロパティ API (計算) の詳細な分析 2. 属性値はオブジェクトです
計算される属性値がオブジェクトの場合、オブジェクトの属性属性は、get メソッドと set メソッドを使用して構成できます。このアプローチでは、計算されたプロパティのセッターが提供されます。

fullName: { get () { return this.firstName + ' ' + this.lastName }, set (newValue) { const names = newValue.split(' ') this.firstName = names[0] this.lastName = names[names.length - 1] } }

ログイン後にコピー

Vue の計算プロパティ API (計算) の詳細な分析

計算プロパティのサポート

キャッシュ

ビューは変更されても、計算プロパティが依存するデータが変更されない場合、値はキャッシュから直接取得されます。

次の例では、計算されたプロパティ messageLength とメソッド getMessageLength が同じ関数を実装しています。ボタンをクリックしてビューを更新すると、メソッド getMessageLength が実行されることがわかります。この場合は明らかに、次のように使用します。計算されたプロパティはメソッドよりもパフォーマンスが優れています。

 {{messageLength}}-{{getMessageLength()}}

ログイン後にコピー

計算されたプロパティのパラメータの受け渡し

Vue インスタンスでは、計算されたプロパティがプロパティとして存在します。パラメータを渡したい場合は、クロージャを使用してプロパティ値を関数に変更する必要があります

Vue の計算プロパティ API (計算) の詳細な分析

computed: { fullName () { return function (maxLength) { return (this.firstName + ' ' + this.lastName).substring(0, maxLength) } }}

ログイン後にコピー

この場合、計算プロパティを使用することは、メソッドを使用することと同じです。

計算プロパティと監視プロパティ

計算プロパティは Vue インスタンスのデータ変更に応答でき、監視プロパティも Vue インスタンスのデータ変更を監視して応答できます。

Watch は、props、data、computed のデータ変更を監視し、関数を実行できます。
使用時:
computed は計算に使用されます。結果が返される必要があります。呼び出し時に括弧を追加する必要はありません。
1 つ以上の依存関係に基づいて自動的にキャッシュされます。依存関係が変化しない場合、computed は自動的に計算されません。監視は監視に使用され、一度に
1 つのデータのみを監視できます。。監視されているデータが変更された場合、関数を実行します。これには 2 つがあります。オプション:

非同期計算の実装

1. 計算された属性は、非同期操作の結果ですが、Vuex のデータに依存できるため、store.state

2 を返すことで非同期操作の結果を取得できます。属性の非同期計算は、vue- async-computed プラグイン。list 属性には Promise が割り当てられますが、明らかに必要な結果ではありません

import Vue from 'vue'import AsyncComputed from 'vue-async-computed'import axios from 'axios'Vue.use(AsyncComputed)export default { name: 'MediaIndex', data () { return { pageNo: 1 } }, computed: { list () { return axios(`https://www.fastmock.site/mock/d6b39fde63cbe98a4f2fb92ff5b25a6d/api/products?pageNo=${this.pageNo}`) .then(res => res.data) } }, asyncComputed: { asyncList () { return axios(`https://www.fastmock.site/mock/d6b39fde63cbe98a4f2fb92ff5b25a6d/api/products?pageNo=${this.pageNo}`) .then(res => res.data) } }}

ログイン後にコピー

Vue の計算プロパティ API (計算) の詳細な分析

vue-async-computed

Skillful計算されたプロパティを使用して props を計算します

次の例は props を実装します

双方向バインディング

export default { name: 'Pagination', props: { page: { type: Number, default: 1 }, limit: { type: Number, default: 10 } }, computed: { currentPage: { get() { return this.page }, set(val) { this.$emit('update:page', val) } }, pageSize: { get() { return this.limit }, set(val) { this.$emit('update:limit', val) } } }

ログイン後にコピー

以上がVue の計算プロパティ API (計算) の詳細な分析の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。