算出プロパティと監視プロパティ

算出プロパティ

算出プロパティとは複雑な処理をかけるメソッド的なもの。

メソッドと算出プロパティとの違い

・メソッド
1. getterのみ定義できる
2. キャッシュされない

・算出プロパティ
1. getterとsetterが定義できる
2. キャッシュされる

キャッシュについては算出プロパティ自体リアクティブな依存関係が更新されたときにだけ再評価されるので、 下記のように複数回呼び出されても1度しかインクリメントされておらず、メソッドに関しては 呼び出した回数インクリメントされている。

v-onceがついている部分に関してはここを参照

getterとsetter

ポイントとしては、dataオプションのプロパティは本体価格しか持っていない。
computedで宣言しているtaxIncludedPriceだけでリアクティブな依存関係が成立している。

監視プロパティ（ウォッチャ）

監視対象に設定したプロパティに変化があった場合に登録した処理を自動的に実行させる
算出プロパティもプロパティなので監視対象に指定できる
引数には監視対象の変更後と変更前の値を設定できる。

算出プロパティと監視プロパティの違い

あるデータが変わったときに何か特定の処理をしたい時などに使用する
この監視プロパティは非同期の処理などでよく使われる
setIntervalなど

基本

インプットの文字列を変更するとコンソールログに入力後の値と、
入力前の値が出力されている。

deep

ネストされたオブジェクトも監視できるようになるオプション
デフォルトの設定値は、falseになっているので通常は監視されない。
また、この場合引数の変更前、変更後の値は参照渡しになっている為
変更後の値しか取得できないので、わざわざ引数として受け取る必要はない

const app = new Vue({
    el:'#app',
    data:{
      colors:[
          {name:'Red'},
          {name:'Green'},
          {name:'Blue'},
      ]
    },
    watch:{
      colors:{
          handler:function(newValue, oldValue){
            console.log('Update!');
            console.log('new:%s, old:%s',
            JSON.stringify(newValue,null,'\t'),
            JSON.stringify(oldValue,null,'\t'))
          },
          deep:true
      }
    }
});

immediate

監視プロパティを初期読み込み時に実行させたい場合に使う。
デフォルトの設定値は、falseになっているので通常は実行されない。

算出プロパティVS監視プロパティ

結論としては、どちらも使える場合は算出プロパティで記述したほうが見やすい
ちなみに算出プロパティでdata内のfullNameを削除しているのは、
算出プロパティで定義しているから。