Vue の計算プロパティの使用方法

今回は、vue 計算属性 の使い方と、vue 計算属性 の注意点 について、実際の事例を紹介します。テンプレート内の

計算プロパティ

式は非常に便利ですが、単純な操作用に設計されています。テンプレートにロジックを入れすぎると、テンプレートが太くなり、保守が困難になる可能性があります。例:

<p>
 {{ message.split('').reverse().join('') }}
</p>

ここで、テンプレートは単純な宣言ロジックではなくなりました。ここに変数メッセージを表示するために反転された

string があることがわかるまで、しばらく観察する必要があります。ここで反転された文字列をテンプレート内で何度も 参照したい場合は、さらに扱いが難しくなります。

したがって、複雑なロジックの場合は、計算されたプロパティを使用する必要があります。

基本的な例

<p>
 {{fullName}}
</p>
var vm = new Vue({
 el: '#app',
 data: {
  firstName: "王",
  lastName: "小智",
  age: 28
 },
 // 计算属性
 computed: {
   fullName: function () {
     console.log("计算了一次")
     return this.firstName + " " + this.lastName
   }
 }
})

結果:

Wang Xiaozhi

次に、ブラウザを通じて age 属性の値を変更し、ページを再レンダリングします:

ご覧のとおり、年齢値の計算属性 メソッドは呼び出されないため、lastName や firstName が変更されるなど、計算された属性の値が変更された場合、印刷結果はどうなりますか

ご覧のとおり、計算された属性が変更されると、印刷結果はどうなりますか? 、計算された属性の変更が再計算されます。

計算されたプロパティのキャッシュとメソッド

式の中でメソッドを呼び出すことで同じ効果を達成できることに気づいたかもしれません:

<p>Reversed message: "{{ fullName() }}"</p>
// 在组件中
methods: {
 fullName: function () {
  console.log("计算了一次")
  return this.firstName + " " + this.lastName;
 }
}

Result:

Wang Xiaozhi

上記も参照して、以下を参照してください。プロセッサは age 属性の値を変更し、ページの再レンダリングを許可します。

ページが再レンダリングされる限り、メソッドは 1 回実行され、計算された属性は関連する依存関係が変更された場合にのみ再評価されます。

なぜキャッシュが必要なのでしょうか?巨大な配列を走査して多くの計算を行う必要がある、計算コストの高いプロパティ A があるとします。その場合、A に依存する他の計算されたプロパティがある可能性があります。キャッシュがなければ、必然的に A のゲッターを複数回実行することになります。キャッシュしたくない場合は、代わりにメソッドを使用してください。

計算プロパティとリスニング プロパティ

リスニング プロパティでも同じ効果を達成できることに気づいたかもしれません:

var vm = new Vue({
 el: '#app',
 data: {
  firstName: "王",
  lastName: "小智",
  age: 28，
  fullName
 },
 // 计算属性
 watch: {
   firstName: function () {
    console.log("计算了一次");
    this.fullNmae = this.firstName + this.lastName;
   },
   lastName: function () {
    console.log("计算了一次")
    this.fullNmae = this.firstName + this.lastName;
   }
 }
})

結果:

Wang Xiaozhi

また、上記を参照して、次のように変更します。ブラウザー age 属性の値により、ページを再レンダリングできます。

ご覧のとおり、fullname に関連しない変更については、fullName は変更されていません。計算された属性と同様に、キャッシュが存在します。関連する依存関係が変更された場合にのみ、それを再評価して、計算されたプロパティのバージョンと比較する方がはるかに優れていますね。

他の

データの変更に応じて変更する必要があるデータがある場合、特にAngularJS
を以前に使用したことがある場合、watchを悪用するのは簡単です。ただし、多くの場合、命令型の監視コールバックではなく、計算されたプロパティを使用する方が適切です。 この記事の事例を読んだ後は、この方法を習得したと思います。さらに興味深い情報については、php 中国語 Web サイトの他の関連記事に注目してください。

推奨読書:

JSでDOM要素の位置を取得する方法

jQuery+ajax動的操作テーブルtr tdステップの詳細な説明

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