序文
計算された属性は、値が他の値に依存するという宣言的な式を記述するために使用されます。テンプレート内の計算されたプロパティにデータをバインドすると、VUEは、計算されたプロパティが変更される値に依存する値を変更するとDOMを更新します。この機能は非常に強力であり、コードをより宣言的、データ駆動型、メンテナンスが簡単にすることができます。
テンプレート内の式は非常に便利ですが、実際には単純な操作にのみ使用されます。
テンプレートは、ビューの構造を記述することです。テンプレートに多すぎるロジックを入力すると、テンプレートが重すぎて維持が困難になります。
これが、vue.jsが結合式を1つの式に制限する理由です。
複数の式が必要な場合は、計算されたプロパティを使用する必要があります。
この簡単な例を見てみましょう
<div id = "example"> a = {{a}}、b = {{b}} </div> var vm = new vue（{// VMの名前の理由は、実際にはMVVM ELのVMであることです。 instance this.a + 1}}}）出力結果：
a = 1、b = 2
ここでは、計算されたプロパティを宣言しますb。私たちが提供する機能は、プロパティVM.Bのゲッターとして使用されます。
console.log（vm.b）//-> 2vm.a = 3console.log（vm.b）//-> 3
通常のプロパティにバインドするように、計算されたプロパティをテンプレートにバインドできます。 V.BはVM.Aに依存していることを知っているため、VM.Aが変更すると、VM.Bに依存するバインディングも更新されます。そして、最良のことは、この依存関係を宣言的に作成することです。計算されたプロパティのゲッターはきれいで、副作用がないため、テストして理解しやすいことです。
VUEインスタンスでデータの変更を観察する場合は、Vue.js $watchが提供する方法を使用できます。
<div id = "demo"> {{fullname}} </div> var vm = new vue（{data：{firstname： 'foo'、lastname： 'bar'、fullname： 'foo bar'}}）vm。 this.lastname}）vm。$ watch（ 'lastname'、function（val）{this.fullname = this.firstname + '' + val}）ただし、上記の方法は、 computedを使用して実装することもできます。
var vm = new vue（{data：{firstName： 'foo'、lastName： 'bar'}、culted：{fullname：function（）{return this.firstname + '' + this.lastname}}}）このように書く方が簡単ですか？不必要な重複コードはありませんか？当局はまた、 computed方法の使用を奨励しています。
上記のcomputedについて話したとき、この方法はデフォルトのgetメソッドを提供することが言及されました。 set方法はありますか？
// ... compute：{fullname：{// getter get：function（）{return this.firstname + '' + this.lastname}、// setter set：function（newvalue）{var names = newValue.split（ ''）this.firstname = names [0] this = name name name names whent -length -1 // ... vm.fullName = 'John Doe'を呼び出すと、 setterが呼び出されます。 vm.firstNameとvm.lastNameには、対応する更新もあります。この方法は時々役立ちます。
要約します
上記は、Vue.jsコンピューティング属性に関するすべてです。この記事がすべての人に役立つことを願っています。編集者は、Vue.jsに関するコンテンツを次々に更新します。興味のある友達はwulin.comをフォローし続けることができます。