Vue.js で計算されたプロパティを学習する

はじめに

計算プロパティは、値が他の値に依存することを宣言的に記述するために使用されます。テンプレート内の計算されたプロパティにデータをバインドすると、その依存値のいずれかにより計算されたプロパティが変更されると、Vue は DOM を更新します。この機能は非常に強力で、コードをより宣言的でデータ駆動型にし、保守が容易になります。

Vueを使い始めると、テンプレート上のすべてのデータがdata属性に書き込まれたり、data属性の変数が多すぎると、一度しか使用されない変数が直接テンプレートに書き込まれているように感じます。その後、チーム内の同じ同僚が computed 属性を使用していることに気づき、API を再度確認したところ、この状況では computed が最適なオプションであることがわかりました。

1. Computed では、論理演算を追加するのではなく、テンプレートを表示してバインドするだけにしてください。

2. computed を使用するもう 1 つの利点は、他のデータ属性の変更に応じて自動的に変更されることです。たとえば、公式ドキュメントの例:

var vm = new Vue({
 el: '#demo',
 data: {
 firstName: 'Foo',
 lastName: 'Bar',
 fullName: 'Foo Bar'
 }
})
vm.$watch('firstName', function (val) {
 this.fullName = val + ' ' + this.lastName
})
vm.$watch('lastName', function (val) {
 this.fullName = this.firstName + ' ' + val
})

watch を使用すると、コードに冗長性が生じます。ライブブロードキャストなどで、状態の変化を使用して、動画などの上位レベルのプロパティを表示するかどうかを計算できます

var vm = new Vue({
 el: '#demo',
 data: {
 firstName: 'Foo',
 lastName: 'Bar'
 },
 computed: {
 fullName: function () {
  return this.firstName + ' ' + this.lastName
 }
 }
})

概要

以上が Vue.js の計算されたプロパティに関する説明です。この記事の内容は、みんなの勉強や仕事に役立ちます。質問がある場合は、メッセージを残して連絡してください。

Vue.js の計算プロパティの学習に関連するその他の記事については、PHP 中国語 Web サイトに注目してください。