Vue.js学習の計算属性

前言
属性の計算は、宣言式の記述のための値が他の値に依存しています。テンプレートでデータを計算属性に結びつけると、Vueはその依存する任意の値が計算属性の変化を引き起こすときにDOMを更新します。この機能は非常に強いです。コードをより声明的にして、データ駆動して、メンテナンスしやすいです。
vueを使ってすべてのモデルのデータをdata属性に入れたり、data属性に変数が多くなったりして、一回の変数だけでそのままテンプレートに書いてしまうと感じましたが、同じグループの同僚がcomputted属性を使っているのを見て、またapiを調べてみました。このような状況が一番いいのはcomputtedです。
1.computedはテンプレートの鮮明さを維持し、templateではできるだけ展示と結合だけを行い、論理操作に参加しないでください。
2.computedを使うもう一つの利点は他のdata属性の変化に従って自動的に変化することです。
たとえば、公式文書の一例です。

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
})

ウオッチを使うとコードの冗長性が発生します。例えば、生放送中の状態の変化を使って、ビデオを表示するかどうかなどの上位の属性を計算することができます。

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

締め括りをつける
以上はVue.jsの計算属性の全部の内容です。本文の内容は皆さんの学習や仕事に一定の助けを与えてほしいです。もし疑問があれば、皆さんはメッセージを残して交流してもいいです。