参考にさせて頂いたページ
getterだけの場合
サンプルコード
<div id="app">
ファーストネーム : <input type="text" v-model="firstName">
ラストネーム : <input type="text" v-model="lastName">
<span>フルネーム : {{ fullName }}</span>
</div>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/vue/1.0.16/vue.min.js"></script>
<script type="text/javascript">
//インスタンス作成
var hoge = new Vue({
el : '#app',
data : {
firstName : 'Foo',
lastName : 'Bar',
},
computed: {
fullName: function(){
console.log('get');
return this.firstName + ' ' + this.lastName;
}
}
});
</script>
このコードについて
上記コードのfullNameは、this.firstNameとthis.lastNameを結合した値から得られます。
つまりfullNameは、this.firstNameとthis.lastNameの値に依存しており、どちらかが変更されるとfullNameに影響を与えます。
公式ドキュメントで、$watchと比較していることからもわかるように、computed内で使用されているthis.firstNameとthis.lastNameは監視対象となっており、それらが変更されたときfullNameをreturnします。
getterとsetter両方を定義する場合
サンプルコード
<div id="app">
ファーストネーム : <input type="text" v-model="firstName">
ラストネーム : <input type="text" v-model="lastName">
フルネーム入力 :
<select v-model="fullName">
<option>Foo Bar</option>
<option>Hoge Hoge</option>
<option>Fuga Fuga</option>
</select>
<div>フルネーム表示 : {{ fullName }}</div>
</div>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/vue/1.0.16/vue.min.js"></script>
<script type="text/javascript">
//インスタンス作成
var hoge = new Vue({
el : '#app',
data : {
firstName : 'Foo',
lastName : 'Bar',
},
computed: {
fullName: {
get: function(){
console.log('get');
return this.firstName + ' ' + this.lastName;
},
set: function(newValue){
console.log('set');
var names = newValue.split(' ');
this.firstName = names[0];
this.lastName = names[names.length - 1];
}
}
}
});
</script>
このコードについて
プルダウンを選択する事によって、fullNameの値を直接更新できるようにしてみました。
fullNameの値を直接変更するとき、setterが呼び出されます。
fullNameの値はthis.firstNameとthis.lastNameの結合によって求められる文字列であるため、setter内部では引数を元にthis.firstNameとthis.lastNameをそれぞれ更新する必要があります。
this.firstNameとthis.lastNameの変更がsetter内部で行われる事により、getterが呼び出されます。
textフォームから、firstNameとlastNameを入力した場合、それらに該当する組み合わせがあればプルダウンも同期されます。
まとめ
- 最初にdataが設定されるので、getterが実行される
- getterの中で使用されているdataは監視されている
- 監視中のdataが更新されるとgetterが実行される
- fullNameが更新されたとき、setterが実行される
- getterで使用されているルールに適合するように、setterの内部の処理を書く
