computed計算屬性

特點：

• 支援快取，只有依賴資料發生改變，才會重新進行計算
• 不支援非同步，當computed內有非同步操作時無效，無法監聽資料的變化
• computed屬性值會預設走快取，計算屬性是基於他們的響應式依賴進行快取的，也就是基於data中宣告過的或者父元件傳遞props中的資料通過計算得到的值
• 如果computed屬性值是函式，那麼預設會走get方法，函式的返回值就是屬性的屬性值，在computed中的屬性都有一個get和set方法，當資料變化時，呼叫set方法

優點：

• 當改變data變數值時，整個應用會從新渲染，vue會被資料重新渲染到dom中，這時如果使用屬性內容，隨著渲染，方法也會被呼叫，而computed不會重新進行計算，從而
  效能開銷比較小，當新的值需要大量計算才能得到時，快取的意義就非常大
• 如果computed所依賴的資料發生改變時，計算屬性才會重新計算，並進行快取，當改變其他資料時，computed屬性並不會重新計算，從而提升效能
• 當拿到的值需要進行一定處理時，就可以使用computed

   <div>computed計算屬性</div>
    <input type="text" v-model="n1">+
    <input type="text" v-model="n2">=
    <input type="text" v-model="sum"
 
>

data:{
    n1:0,
    n2:1
}

 computed:{
     sum:function () {
          return this.n1*1+this.n2*1;
     }
},

watch監聽

特點：

• 不支援快取，資料變化會直接觸發相應的操作。
• 支援非同步操作
• 監聽的函式接受倆個引數，第一個是最新值，第二個是輸入之前的值。
• 當一個屬性發生變化時，需要自行對應操作，一對多
• 監聽資料必須是data中宣告過或者父元件傳遞過來的props中的資料，當資料變化時觸發其他操作，函式有倆個引數immediate：元件載入立即執行觸發回撥函式執行/deep：
  深度監聽

注意：

• 監聽陣列的變化不需要這麼做，deep無法監聽到陣列的變動好物件的新增，只有以響應式的方法觸發才會被監聽到。
• 當需要在資料變化時執行非同步或者開銷較大的操作時，這個方法是最有效的，這是和前者最大的區別

舉例：

監聽簡單資料型別

<template>
  <div>
    <el-input v-model="mergeText"></el-input>
  </div>
</template>

<script>
export default {
  data() {
    return {
      mergeText:'',
    };
  },
  watch:{
    // mergeText值變化即觸發
    mergeText(newval,oldVal){
      console.log(this.mergeText,newval,oldVal);
    }
  },
};
</script>

瞭解watch更多