要件
以前はkeyupを使用してテキストボックスに耳を傾けるだけでなく、データの変更に耳を傾けるために時計を使用する場合、この章では、実装に耳を傾けるために計算されたコンピューティングプロパティを使用する名前をスプライシングケースを書いています。
というわけで、まずは公式サイトの計算物件の説明から。
テンプレート内の式はとても便利ですが、本来は単純な演算に使うために設計されたものです。テンプレートにロジックを入れすぎると、重くなりすぎてメンテナンスが大変になります。例
<div id="example">
{{ message.split('').reverse().join('') }}
</div>
この場所では、テンプレートはもはや単純な宣言的ロジックではありません。しばらく見ていないと、ここが変数メッセージのフリップ文字列を表示したい場所であることに気がつきません。このため、テンプレート内で何度もここのフリップ文字列を参照したい場合に対処が難しくなります。
したがって、複雑なロジックの場合は、computed属性を使用する必要があります。
Computedプロパティ
<div id="example">
<p>Original message: "{{ message }}"</p>
<p>Computed reversed message: "{{ reversedMessage }}"</p>
</div>
var vm = new Vue({
el: '#example',
data: {
message: 'Hello'
},
computed: {
// プロパティのゲッターを計算する
reversedMessage: function () {
// `this` vmインスタンスを指定する
return this.message.split('').reverse().join('')
}
}
})
結果
計算された反転メッセージ："olleh"
ここでは、計算プロパティreversedMessageが宣言されています。この関数は、プロパティvm.reversedMessageのゲッター関数として使用されます：
console.log(vm.reversedMessage) // => 'olleH'
vm.message = 'Goodbye'
console.log(vm.reversedMessage) // => 'eybdooG'
vm.reversedMessageは常にvm.messageの値に依存します。
Vueは、vm.reversedMessageがvm.messageに依存していることを知っているので、vm.messageが変更されると、vm.reversedMessageに依存しているすべてのバインディングも更新されます。プロパティを計算するゲッター関数には副作用がないため、テストや理解が容易になります。
基本的な例
式の中でメソッドを呼び出しても同じ効果が得られることにお気づきかもしれません：
<p>Reversed message: "{{ reversedMessage() }}"</p>
// コンポーネント
methods: {
reversedMessage: function () {
return this.message.split('').reverse().join('')
}
}
同じ関数を、計算プロパティの代わりにメソッドとして定義することも可能です。最終的な結果はどちらも同じです。しかし、違いは、計算されたプロパティはレスポンシブな依存関係に基づいてキャッシュされることです。これらは、関連するレスポンシブ依存関係が変更されたときにのみ再評価されます。つまり、メッセージが変更されていない限り、reversedMessage 計算プロパティに複数回アクセスしても、関数を再度実行することなく、すぐに計算結果が返されます。
これは同様に、Date.now() がレスポンシブな依存関係ではないため、以下の計算プロパティが更新されなくなることも意味します：
computed: {
now: function () {
return Date.now()
}
}
一方、再レンダリングがトリガーされると、呼び出し元のメソッドは常に関数を再実行します。
なぜキャッシュが必要なのでしょうか？パフォーマンス・オーバーヘッドが大きく、巨大な配列をトラバースし、多くの計算を行う計算プロパティ Aがあるとします。キャッシュがなければ、 Aの ゲッターは必然的に複数回実行されることになります！
計算特性 vs リスニング特性
Vueは、Vueインスタンス上のデータの変更を監視して応答する、より一般的な方法を提供します。他のデータの変更に応じて変更する必要があるデータがある場合、watchを悪用するのは簡単です - 特にAngularJSを使用している場合; しかし、多くの場合、命令的なwatchコールバックではなく、計算されたプロパティを使用する方が良いでしょう。この例について考えてみましょう：
<div id="demo">{{ fullName }}</div>
var vm = new Vue({
el: '#demo',
data: {
firstName: 'Foo',
lastName: 'Bar',
fullName: 'Foo Bar'
},
watch: {
firstName: function (val) {
this.fullName = val + ' ' + this.lastName
},
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
}
}
})
ずっといいでしょ？
プロパティのセッターを計算します。
computedプロパティは、デフォルトではゲッターしか持ちませんが、必要に応じてセッターを指定することができます：
// ...
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]
}
}
}
// ...
vm.fullName = 'John Doe' これで、再度実行すると、セッターが呼び出され、vm.firstNameとvm.lastNameがそれに応じて更新されます。
上の例のコードの一部を見てから、computedを使った完全な名前スプライシングの例を示します。
ネーム・スプライスの完成例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<!-- 1.vueをインポートする.jslibrary -- を実行する。>
<script src="lib/vue.js"></script>
</head>
<body>
<div id="app">
<!-- form>(label+input#input$+br)*3 -->
<form action="">
<label for="input1"> </label>
<input type="text" id="input1" v-model="firstname" autocomplete="off">
<br>
<label for="input2"> </label>
<input type="text" id="input2" v-model="lastname" autocomplete="off">
<br>
<label for="input3"> </label>
<input type="text" id="input3" v-model="fullname">
<br>
</form>
</div>
<script>
// 2. Vueのインスタンスを作成する
var vm = new Vue({
el: '#app',
data: {
firstname: "",
lastname: "",
// fullname: "", // computedを使用してcomputedプロパティを設定する場合、dataで定義することはできない。
},
methods: {},
computed: {
// computedでは、computedプロパティと呼ばれるプロパティを定義できる。
//computedプロパティは、要するにメソッドである。ただし、これらのcomputedプロパティを使用するときは、その名前を直接プロパティとして使用する；
// 注1：computedプロパティを参照する場合は、()を付けて呼び出さず、通常のプロパティとして使用する；
// 注2: 関数内のcomputed属性が、使用されるデータのどれかに変更を送るとすぐに、computed属性の値は即座に再計算される。
// 注3：computedプロパティの結果は、次回の使用のためにキャッシュされる。computedプロパティメソッドから来るデータのいずれかが変更されていない場合、computedプロパティは再評価されない；
"fullname": function() {
return this.firstname + this.lastname
}
},
});
</script>
</body>
</html>
ブラウザで以下を実行してください：
