読者です 読者をやめる 読者になる 読者になる

MotomichiWorksBlog

その日学習したことについて書いている日記です。誰かの役に立ったらそれはそれで嬉しいです。

vue.js 1.0 その0001-004 算出プロパティ computed

制作 vuejs

参考にさせて頂いたページ

算出プロパティ - vue.js

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の内部の処理を書く