一、先來(lái)看看watch

1.watch對(duì)數(shù)據(jù)的監(jiān)控觀察

var vm = new Vue({
    //......
    data: {
      name: "張三"
    },
    watch: {
      "name": function() { 
        //..... 
      }
    }
  })

上面的代碼，我們?cè)?code>data中定義了name的值。而下面的watch也對(duì)應(yīng)鍵名定義了name，值為一個(gè)函數(shù)。此時(shí)表示watch當(dāng)前已經(jīng)監(jiān)聽(tīng)了data中的name，當(dāng)name的值發(fā)生改變時(shí)，則立即執(zhí)行對(duì)應(yīng)的函數(shù)。

此函數(shù)中還規(guī)定了兩個(gè)參數(shù)來(lái)方便我們?nèi)〉脭?shù)據(jù)

watch: {
       "name": function( newVal, oldVal ) { 
         //..... 
      }

第一個(gè)參數(shù)（newVal）：數(shù)據(jù)改變后的值
第二個(gè)參數(shù)（oldVal）：數(shù)據(jù)改變之前的值

2.watch監(jiān)聽(tīng)路由的改變

watch不僅可以監(jiān)聽(tīng)data中的數(shù)據(jù)，還可以監(jiān)聽(tīng)路由的變化。
在Vue實(shí)例中，使用$route.path監(jiān)聽(tīng)路由地址的改變

var vm = new Vue({
    //......
    watch: {
      "$route.path": function() { }
    }
  })

同時(shí)，在對(duì)于操作比較耗時(shí)的操作也是可以使用 watch 監(jiān)聽(tīng)。例如用戶(hù)注冊(cè)時(shí)，檢測(cè)賬號(hào)是否可用等...

二、再來(lái)看看computed

定義：是一個(gè)計(jì)算屬性,類(lèi)似于過(guò)濾器,對(duì)綁定到view的數(shù)據(jù)進(jìn)行處理

computed是Vue內(nèi)部規(guī)定的【計(jì)算屬性】，與watch很像，也可以用來(lái)監(jiān)聽(tīng)數(shù)據(jù)的獲取和改變。

//html
  <div id="app">
    <input type="text" v-model = "fis">
    <input type="text" v-model = "thir">
    {{ sec }}
  </div>
//js
  var vm = new Vue({
    el:'#app',
    data:{
      fis: 3,
      thir: 5,
    },
    computed:{
      sec: {
        get: function(){ return this.thir}, //只要function中的數(shù)據(jù)（這里是thir）發(fā)生變化，就會(huì)觸發(fā)函數(shù)
        set: function(val){ return 1}
      }
    }
  })

上面的代碼中，定義了computed，監(jiān)聽(tīng)了sec（屬性），只要當(dāng)函數(shù)定義的內(nèi)部數(shù)據(jù)發(fā)生變化，即會(huì)觸發(fā)函數(shù)。函數(shù)返回的值便是sec的新值

當(dāng)sec屬性發(fā)生改變，觸發(fā)set函數(shù)，若sec中只有一個(gè)函數(shù)，則會(huì)默認(rèn)定義了get
set函數(shù)中可以傳一個(gè)參數(shù)，為當(dāng)前數(shù)據(jù)新的值

一般使用場(chǎng)景
使用計(jì)算屬性簡(jiǎn)化模板

//簡(jiǎn)化前
{{msg.split('').reverse().join('')}}

//簡(jiǎn)化后
HTML:
{{revserseString}}

JS:
computed: {
    revserseString: function (){
        return this.msg.split('').reverse().join('')
    }
}

上面定義了顛倒字符串的方法，使用計(jì)算屬性來(lái)簡(jiǎn)潔了模板。

4.二者的區(qū)別
computed
在computed中定義的每一個(gè)計(jì)算屬性，都會(huì)被緩存起來(lái)，只有當(dāng)計(jì)算屬性里面依賴(lài)的一個(gè)或多個(gè)屬性變化了，才會(huì)重新計(jì)算當(dāng)前計(jì)算屬性的值。
1、支持?jǐn)?shù)據(jù)的緩存。
2、函數(shù)內(nèi)部的數(shù)據(jù)改變也會(huì)觸發(fā)。
3、不支持異步，當(dāng)computed內(nèi)部有異步操作時(shí)computed無(wú)效
4、如果一個(gè)屬性是由其他屬性計(jì)算而來(lái)的，這個(gè)屬性依賴(lài)其他屬性，一般用computed
5、computed 屬性值會(huì)默認(rèn)走緩存，計(jì)算屬性是基于它們的響應(yīng)式依賴(lài)進(jìn)行緩存的，也就是基于data中聲明過(guò)或者父組件傳遞的props中的數(shù)據(jù)通過(guò)計(jì)算得到的值。

watch
watch是屬性監(jiān)聽(tīng)器，一般用來(lái)監(jiān)聽(tīng)屬性的變化（也可以用來(lái)監(jiān)聽(tīng)計(jì)算屬性函數(shù)），并做一些操作
1、不支持緩存
2、支持異步
3、只可以設(shè)置一個(gè)函數(shù)，可以帶有兩個(gè)參數(shù)
4、監(jiān)聽(tīng)數(shù)據(jù)必須是data中聲明過(guò)或者父組件傳遞過(guò)來(lái)的props中的數(shù)據(jù)，當(dāng)數(shù)據(jù)變化時(shí)，觸發(fā)其他操作