ホームページ > 記事 > ウェブフロントエンド > vue の計算プロパティ、メソッド、リスナーの違いの分析

vue の計算プロパティ、メソッド、リスナーの違いの分析

不言オリジナル: 2018-06-30 17:14:372147ブラウズ

この記事では主にVueの計算プロパティとメソッドとリスナーの違いについて詳しく説明しています（インタビューテストのポイント）ので、今すぐ共有して参考にさせていただきます。

計算されたプロパティ

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

<p id="example">
 {{ message.split(&#39;&#39;).reverse().join(&#39;&#39;) }}
</p>

ここで、テンプレートは単純な宣言型ロジックではなくなりました。ここで変数メッセージの反転された文字列を表示したいことがわかるまで、しばらく観察する必要があります。ここで反転した文字列をテンプレート内で複数回参照したい場合、対処がさらに難しくなります。

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

基本的な例

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

結果:

Wang Xiaozhi

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

ご覧のとおり、年齢を変更しました属性の値を計算するメソッドが呼び出されていません

など、計算された属性の値が変更された場合、印刷結果はどうなりますか?計算された属性の値が変更されると、計算されたプロパティが再計算されます。

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

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

<p>Reversed message: "{{ fullName() }}"</p>


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

結果:

Wang Xiaozhi

上記も参照してくださいでは、ブラウザを通じて age 属性の値を変更し、ページを再レンダリングします:

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

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

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

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

var vm = new Vue({
 el: &#39;#app&#39;,
 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 に関連しない変更はありますが、計算されたプロパティと同様です。関連する依存関係のみをキャッシュにするのは、変更時に再評価して、計算されたプロパティのバージョンと比較する方がはるかに良いですよね。

他のデータが変更されたときに変更する必要があるデータがある場合、特に
AngularJS を以前に使用したことがある場合は、ウォッチを悪用するのが簡単です。ただし、多くの場合、命令型の監視コールバックではなく、計算されたプロパティを使用する方が適切です。

以上がこの記事の全内容です。その他の関連コンテンツについては、PHP 中国語 Web サイトをご覧ください。

vue の計算プロパティ、メソッド、リスナーの違いの分析

関連記事