一、先來看看watch
1.watch對數(shù)據(jù)的監(jiān)控觀察
var vm = new Vue({
//......
data: {
name: "張三"
},
watch: {
"name": function() {
//.....
}
}
})
上面的代碼吗氏，我們在data中定義了name的值幅垮。而下面的watch也對應鍵名定義了name，值為一個函數(shù)隙疚。此時表示watch當前已經(jīng)監(jiān)聽了data中的name壤追，當name的值發(fā)生改變時，則立即執(zhí)行對應的函數(shù)供屉。
此函數(shù)中還規(guī)定了兩個參數(shù)來方便我們?nèi)〉脭?shù)據(jù)
watch: {
"name": function( newVal, oldVal ) {
//.....
}
第一個參數(shù)（newVal）：數(shù)據(jù)改變后的值
第二個參數(shù)（oldVal）：數(shù)據(jù)改變之前的值
2.watch監(jiān)聽路由的改變
watch不僅可以監(jiān)聽data中的數(shù)據(jù)行冰，還可以監(jiān)聽路由的變化。
在Vue實例中贯卦，使用$route.path監(jiān)聽路由地址的改變
var vm = new Vue({
//......
watch: {
"$route.path": function() { }
}
})
同時资柔，在對于操作比較耗時的操作也是可以使用 watch 監(jiān)聽。例如用戶注冊時撵割，檢測賬號是否可用等...
二贿堰、再來看看computed
定義：是一個計算屬性,類似于過濾器,對綁定到view的數(shù)據(jù)進行處理
computed是Vue內(nèi)部規(guī)定的【計算屬性】，與watch很像啡彬，也可以用來監(jiān)聽數(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ā)生變化，就會觸發(fā)函數(shù)
set: function(val){ return 1}
}
}
})
上面的代碼中庶灿，定義了computed纵搁，監(jiān)聽了sec（屬性），只要當函數(shù)定義的內(nèi)部數(shù)據(jù)發(fā)生變化往踢，即會觸發(fā)函數(shù)腾誉。函數(shù)返回的值便是sec的新值
當sec屬性發(fā)生改變，觸發(fā)set函數(shù)峻呕，若sec中只有一個函數(shù)利职，則會默認定義了get
set函數(shù)中可以傳一個參數(shù)，為當前數(shù)據(jù)新的值
一般使用場景
使用計算屬性簡化模板
//簡化前
{{msg.split('').reverse().join('')}}
//簡化后
HTML:
{{revserseString}}
JS:
computed: {
revserseString: function (){
return this.msg.split('').reverse().join('')
}
}
上面定義了顛倒字符串的方法瘦癌，使用計算屬性來簡潔了模板猪贪。
4.二者的區(qū)別
computed
在computed中定義的每一個計算屬性，都會被緩存起來讯私，只有當計算屬性里面依賴的一個或多個屬性變化了热押，才會重新計算當前計算屬性的值。
1斤寇、支持數(shù)據(jù)的緩存桶癣。
2、函數(shù)內(nèi)部的數(shù)據(jù)改變也會觸發(fā)抡驼。
3鬼廓、不支持異步，當computed內(nèi)部有異步操作時computed無效
4致盟、如果一個屬性是由其他屬性計算而來的碎税，這個屬性依賴其他屬性，一般用computed
5馏锡、computed 屬性值會默認走緩存雷蹂，計算屬性是基于它們的響應式依賴進行緩存的，也就是基于data中聲明過或者父組件傳遞的props中的數(shù)據(jù)通過計算得到的值杯道。
watch
watch是屬性監(jiān)聽器匪煌，一般用來監(jiān)聽屬性的變化（也可以用來監(jiān)聽計算屬性函數(shù)），并做一些操作
1党巾、不支持緩存
2萎庭、支持異步
3、只可以設置一個函數(shù)齿拂，可以帶有兩個參數(shù)
4驳规、監(jiān)聽數(shù)據(jù)必須是data中聲明過或者父組件傳遞過來的props中的數(shù)據(jù)，當數(shù)據(jù)變化時署海，觸發(fā)其他操作
