Vue3の計算関数の詳細説明：計算プロパティを簡単に利用できるアプリケーション

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 サイトの他の関連記事を参照してください。