Vue.js の計算されたプロパティのチュートリアル

Vue.js のインライン式は非常に便利ですが、最も適した使用シナリオは単純なブール演算または文字列の連結です。より複雑なロジックが関係する場合は、計算されたプロパティを使用する必要があります。

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

通常、手続き型の $watch コールバックを使用するよりも、計算されたプロパティを使用する方が適切です。たとえば、次の例は次のとおりです。

<div id="demo">{{fullName}}</div>
var vm = new Vue({
data: {
firstName: &#39;Foo&#39;,
lastName: &#39;Bar&#39;,
fullName: &#39;Foo Bar&#39;
}
})
vm.$watch(&#39;firstName&#39;, function (val) {
this.fullName = val + &#39; &#39; + this.lastName
})
vm.$watch(&#39;lastName&#39;, function (val) {
this.fullName = this.firstName + &#39; &#39; + val
})

上記のコードは手続き型であり、比較的面倒です。計算された属性バージョンを比較します:

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

気分は良くなりましたか?さらに、計算されたプロパティのセッターを提供することもできます:

computed: {
fullName: {
// getter
get: function () {
return this.firstName + ' ' + this.lastName
},
// setter
set: function (newValue) {
var names = newValue.split(' ')
this.firstName = names[0]
this.lastName = names[names.length - 1]
}
}
}

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

0.12.8 より前では、計算されたプロパティは値を取得する動作としてのみ反映されていました - アクセスするたびに、 getter はすべて再評価されます。これは 0.12.8 で改善されました。計算されたプロパティの値はキャッシュされ、リアクティブな依存関係の 1 つが変更された場合にのみ再計算されます。

大規模な配列をループして多くの操作を実行する必要がある、高価な計算プロパティ A があると想像してください。また、A に依存する計算されたプロパティもあります。キャッシュがなければ、A のゲッターに対する不必要な過剰な呼び出しが行われ、潜在的なパフォーマンスの問題が発生する可能性があります。キャッシュを使用すると、A の値は依存関係が変更されない限りキャッシュされるため、複数回アクセスしても多数の不要な操作が発生することはありません。

ただし、何が「リアクティブな依存関係」とみなされるのかを理解する必要があります。

var vm = new Vue({
data: {
msg: 'hi'
},
computed: {
example: {
return Date.now() + this.msg
}
}
})

上記の例では、計算されたプロパティは vm.msg に依存しています。これは Vue インスタンスで観察されるデータ プロパティであるため、リアクティブな依存関係とみなされます。 vm.msg が変更されるたびに、vm.example の値が再計算されます。
ただし、Date.now() は Vue のデータ観察システムとは何の関係もないため、リアクティブな依存関係ではありません。したがって、プログラム内で vm.example にアクセスすると、vm.msg が再計算をトリガーしない限り、タイムスタンプは常に同じ値であることがわかります。

単純なデータ取得モードを維持する必要があり、vm.example にアクセスするたびに再計算をトリガーしたい場合があります。 0.12.11 以降、特別な計算プロパティのキャッシュ サポートのオンとオフを切り替えることができます:

computed: {
example: {
cache: false,
get: function () {
return Date.now() + this.msg
}
}
}

これで、vm.example にアクセスするたびにタイムスタンプが更新されます。ただし、これは JavaScript プログラム内からアクセスされた場合にのみ発生することに注意してください。データ バインディングは引き続きドライバーに依存します。 {{example}} の計算プロパティをテンプレートにバインドすると、リアクティブな依存関係が変更された場合にのみ DOM が更新されます。