Vue は非常に人気のあるフロントエンド開発フレームワークであり、非常に便利で実用的な属性計算関数を提供します。 Vue3 では、計算関数もアップグレードおよび改善され、より使いやすく効率的になりました。
computed は最初に関数であり、値を返します。この値は Vue のテンプレートで直接使用できます。計算関数の特別な点は、依存する Vue インスタンスのデータに応じて戻り値が動的に変化し、計算関数は遅延評価されることです。依存するデータが変更されない限り、計算関数は影響を受けません。評価される、再計算される。
Vue3 では、計算関数が大幅に改善されました。以前の Vue2 では、計算関数を使用したい場合は、Vue インスタンスにオブジェクトを渡す必要がありました。このオブジェクトには、getter メソッドと setter という 2 つのメソッドが含まれています。getter メソッドで必要な値を計算し、その後、 setter メソッド内の他の値を更新します。レスポンシブ プロパティ。非常に面倒で、コードの重複やエラーが発生しやすいようです。 Vue3 では、計算関数内で直接計算を実行するだけでよく、Vue が更新されたロジックを自動的に処理します。
たとえば、次のデータを持つ Vue インスタンスがあります:
const vm = Vue.createApp({ data() { return { firstName: '张', lastName: '三', } }, computed: { fullName() { return this.firstName + this.lastName; } }, template: `<div>{{fullName}}</div>` }).mount('#app');
この Vue インスタンスでは、テンプレート内の 2 つのプロパティに対応する 2 つの応答属性 firstName と lastName を定義しました。 . ユーザーが内容を入力できる入力ボックス。計算関数では、ユーザーが入力したフルネームである firstName と lastName の結合結果を返す fullName 関数を定義します。テンプレートでは、fullName 関数を直接使用します。
上記の例では、計算関数は非常に単純で、単純な文字列の連結を実行するだけですが、すべての計算はテンプレートではなく計算関数で行われます。これにより、コードが明確になり理解しやすくなるだけでなく、計算関数はデータが変更された場合にのみ再計算されるため、パフォーマンスも向上します。
Vue3 では、計算関数は新しい API も提供します。これにより、計算関数でゲッター メソッドとセッター メソッドを定義できるため、ゲッター メソッドとセッター データで必要な値を計算できます。更新と通知はメソッド内で実行されます。
const vm = Vue.createApp({ data() { return { firstName: '张', lastName: '三', } }, computed: { fullName: { get() { return this.firstName + this.lastName; }, set(value) { const names = value.split(' '); this.firstName = names[0]; this.lastName = names[1]; } } }, template: `<div> <input v-model="fullName"/> {{fullName}} </div>` }).mount('#app');
この例では、ゲッター メソッドとセッター メソッドを含む計算関数で fullName プロパティを定義します。 getter メソッドでは、前の例と同様に fullName の値を計算します。 setter メソッドでは、ユーザーが入力した fullName であるパラメーター値を受け取ります。 setter メソッドでは、fullName をスペースで firstName と lastName に分割し、それらを Vue インスタンスの対応するプロパティに割り当てます。このようにして、入力ボックスに fullName を入力し、双方向バインドを通じて計算結果をテンプレートに表示できます。
要約すると、Vue3 の計算関数により、計算プロパティの使用が大幅に簡素化されます。以前のようにゲッター メソッドとセッター メソッドを手動で定義する代わりに、すべての計算を完了し、ロジックを計算関数内で直接更新できます。この改善により、コードがより簡潔で理解しやすくなるだけでなく、コンピューティングの効率とパフォーマンスも向上します。 Vue3 を使用している場合は、計算関数を使用してデータを計算および処理することを強くお勧めします。
以上がVue3の計算関数の詳細説明:計算プロパティを簡単に利用できるアプリケーションの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。