computed和watch區別與用法

什麼是computed

先來看官方文檔：

計算屬性：  
    模板內的表達式非常便利，但是設計它們的初衷是用於簡單運算的。在模板中放入太多的邏輯會讓模板過重且難以維護，在這個地方，模板不再是簡單的聲明式邏輯。你必須看一段時間才能意識到，這裏是想要顯示變量 message 的翻轉字符串。當你想要在模板中多次引用此處的翻轉字符串時，就會更加難以處理。所以，對於任何複雜邏輯，你都應當使用計算屬性。

<div id="example">
  {{ message.split('').reverse().join('') }}
</div>

由此可以看出計算屬性是計算data裏面的值然後加以轉化，相當於對data裏面的值，重新賦予一個新值。

計算屬性中的setter

官方文檔：

計算屬性默認只有 getter，不過在需要時你也可以提供一個 setter：

data: {
    firstName: 'Foo',
    lastName: 'Bar'
  },
  computed: {
  fullName：{
   get(){//回調函數 當需要讀取當前屬性值是執行，根據相關數據計算並返回當前屬性的值
      return this.firstName + ' ' + this.lastName
    },
   set(val){//監視當前屬性值的變化，當屬性值發生變化時執行，更新相關的屬性數據
       //val就是fullName的最新屬性值
       console.log(val)
        const names = val.split(' ');
        console.log(names)
        this.firstName = names[0];
        this.lastName = names[1];
   }
   }
  }

set和methods中的方法不能直接改變計算屬性的值，必須通過data裏面的原屬性去改變

什麼是watch

官方文檔：

雖然計算屬性在大多數情況下更合適，但有時也需要一個自定義的偵聽器。這就是爲什麼 Vue 通過 watch 選項提供了一個更通用的方法，來響應數據的變化。當需要在數據變化時執行異步或開銷較大的操作時，這個方式是最有用的。

顧名思義，watch是用來監聽data裏面的數據，而computed是用data裏面是數據創造新的數據來更加方便的作用於view層。

watch監聽簡單數據類型

data(){
      return{
        'first':2
      }
    },
    watch:{
      first(){
        console.log(this.first)
      }
    },

watch監聽複雜數據類型

data(){
      return{
        first:{
          second:0
        }
      }
    },
    watch:{
      first:{
        handler(oldVal,newVal){
          console.log(oldVal)
          console.log(newVal)
        },
        deep:true
      }
    },

由代碼可以看出，開啓deep，而必須使用handler函數名，否則無效，因爲在watch源碼中就是對handler的調用

console.log打印的結果,發現oldVal和newVal值是一樣的,所以深度監聽雖然可以監聽到對象的變化,但是無法監聽到具體對象裏面那個屬性的變化

watch監聽對象單個屬性

1. 直接監聽對象單個屬性,例子：first.second

data(){
          return{
            'first':{
              second:0
            }
          }
        },
        watch:{
          first.second:function(newVal,oldVal){
            console.log(newVal,oldVal);
          }
        },
    

2. 使用computed作爲中轉，例如在comuted中創建新值secondChange

data(){
      return{
        'first':{
          second:0
        }
      }
    },
    computed:{
      secondChange(){
        return this.first.second
      }
    },
    watch:{
      secondChange(){
        console.log('second屬性值變化了')
      }
    },

computed和watch區別

computed：

1. 計算屬性
2. 簡化template模板中{{}}計算和處理props或$emit傳值
3. 具有緩存性，頁面重新渲染值不變化，計算屬性會理解返回之前計算結果，不必再次執行函數

watch：

1. 監聽器
2. 監聽props或$emit或本組件的值
3. 無緩存性，頁面重新渲染之不變也不會執行