computed

當我們有一個資料屬性需要"加工"得到新的值的時候，就非常適合使用計算屬性，他可以讓我們：

• 把複雜的處理邏輯封裝起來
  模板內雖然可以直接插入表達式，但在模板中使用太過複雜的邏輯，會讓我們的模板變得笨重且難以維護
• 並且得到良好的重用性
  定義一個 computed 屬性，他可以像 data 屬性一樣，在需要的地方都可以便利的呼叫他

舉個例子
我們需要把總價都打九折

//不應該這樣寫
<p>{{ price*0.9}}</p>

//應該定義一個計算屬性
{
    computed: {
        discount () {
         return this.price * 0.9
        }
    }
}

你如果認識 method 了，你可能會想說其實 method 也可以達成相同的效果，那他們到底有什麼差別呢？
computed 有一個很重要的特性是他可以有緩存的效果， computed 是基於他的響應式依賴(data 裡的屬性)來進行緩存的效果的，以上面例子來說 price 有變動時， computed 才會重新執行，否則他會立即回應緩存中的值

watch

監聽屬性也是基於他的響應式依賴(data 裡的屬性)來運行的，當你需要 A 屬性變動時改動 B 屬性時，很容易誤用 watch，這時比較好的做法是將 B 屬性放置 computed

watch 可以用 function 或是 object 兩種方式定義

• function
  接受兩個參數 newvalue 和 oldvalue，當依賴改變時就會執行這個函數
• object 有幾種屬性可以設定
  -- handler : 同上面的 function 使用方式
  -- deep : watch 所監聽的依賴如果是物件時，只會監聽第一層的變化，加入該屬性無論物件的深度有多少都可以監聽的到
  -- immediate : 監聽的開始立即執行一次，不需等到依賴改變

注意
immediate 會比 created hook 更早執行喔，關於生命週期的鉤子，後面會有專門的篇章