前端只是總結（四）：computed和watch的區別

computed可以監聽v-model（data）中的值，只要值發生變化 他就會重新去計算
computed必須是要有一個返回值

<div id="app">
        <input type="text" v-model="firstname">+
        <input type="text" v-model="lasttname">=
        <input type="text" v-model="fullname">
    </div>

data: {
    firstName: 'Foo',
    lastName: 'Bar'
  },
  computed: {
    fullName: function () {
      return this.firstName + ' ' + this.lastName
    }
  }

fullName不可在data裏面定義,
如果定義會報如下圖片的錯誤,因爲對應的computed作爲計算屬性定義fullName並返回對應的結果給這個變量,變量不可被重複定義和賦值

 

watch除了可以監聽data中值的變化，還可以監聽路由的變化，
watch中有兩個參數 分別是新值和舊值

watch: {
                "$route.path":function(newval,oldval){
                if(newval==="/login"){
                    console.log("這是登錄頁面")
                }else if(newval==="/"){
                    console.log("這是主頁面")

                }
                }
            }

監聽數據必須是data中聲明過或者父組件傳遞過來的props中的數據，當數據變化時，觸發其他操作，函數有兩個參數，

　　immediate：組件加載立即觸發回調函數執行，

　　deep: 深度監聽，爲了發現對象內部值的變化，複雜類型的數據時使用，例如數組中的對象內容的改變，注意監聽數組的變動不需要這麼做。注意：deep無法監聽到數組的變動和對象的新增，參考vue數組變異,只有以響應式的方式觸發纔會被監聽到。

 

computed和watch的區別

computed特性

1.是計算值，
2.應用：就是簡化tempalte裏面{{}}計算和處理props或$emit的傳值
3.具有緩存性，頁面重新渲染值不變化,計算屬性會立即返回之前的計算結果，而不必再次執行函數

watch特性

1.是觀察的動作，
2.應用：監聽props，$emit或本組件的值執行異步操作
3.無緩存性，頁面重新渲染時值不變化也會執行