computed：通過屬性計算而得來的屬性
1、computed內部的函數在調用時不加()。 例子：
computed:{
reverseStr(){
//str不發生變化的話，我只執行一次，具有緩存
return
this
.str.split(
""
).reverse().join(
""
)
}
}
2、computed是依賴vm中data的屬性變化而變化的，也就是說，當data中的屬性發生改變的時候，當前函數才會執行，data中的屬性沒有改變的時候，當前函數不會執行。
3、computed中的函數必須用return返回。（上面例子）
4、在computed中不要對data中的屬性進行賦值操作。如果對data中的屬性進行賦值操作了，就是data中的屬性發生改變，從而觸發computed中的函數，形成死循環了。
5、當computed中的函數所依賴的屬性沒有發生改變，那么調用當前函數的時候會從緩存中讀取。
使用場景：當一個值受多個屬性影響的時候------------購物車商品結算
watch：屬性監聽
1、watch中函數名稱必須要和data中的屬性名一致，因為watch是依賴data中的屬性，當data中的屬性發生變化的時候，watch中的函數就會發生變化。
2、watch接收兩個參數（newValue,oldValue）
3、watch中的函數不需要調用。
4、watch只會監聽數據的值是否發生改變，而不會去監聽數據的地址是否發生改變。也就是說，watch想要監聽引用類型數據的變化，需要進行深度監聽。"queryData.name"(){}------如果queryData的屬性太多，這種方法的效率很低，queryData:{handler(newVal){},deep:true}------用handler+deep的方式進行深度監聽。
watch: {
'queryData.name': {
handler: function(newValue,oldValue)//里面的deep設為了true，這樣的話，如果修改了這個queryData中的任何一個屬性，都會執行handler這個方法。不過其實這樣開銷是蠻大的，尤其是對象里面結構嵌套過深的時候。而且有時候我們就想關心這個對象中的某個 屬性，比如name，這個時候可以這樣
deep: true
}
}
//深監聽，必須寫，否則監聽無效
deep: true,
immediate: true
//可選 是否變量首次賦值時，就進行交監聽，
//默認是改變時（也就是復制完畢后第一次更改）才執行監聽方法內容
}
5、特殊情況下，watch無法監聽到數組的變化，特殊情況就是說更改數組中的數據時，數組已經更改，但是視圖沒有更新。更改數組必須要用splice()或者$set。this.arr.splice(0,1,100)-----修改arr中第0項開始的1個數據為100，this.$set(this.arr,0,100)-----修改arr第0項值為100。
6、immediate:true 頁面首次加載的時候做一次監聽。
使用場景：當一條數據的更改影響到多條數據的時候---------搜索框
兩者區別：
1、功能上：computed是計算屬性，watch是監聽一個值的變化，然后執行對應的回調。
2、是否調用緩存：computed中的函數所依賴的屬性沒有發生變化，那么調用當前的函數的時候會從緩存中讀取，而watch在每次監聽的值發生變化的時候都會執行回調。
3、是否調用return：computed中的函數必須要用return返回，watch中的函數不是必須要用return。
4、使用場景：computed----當一個屬性受多個屬性影響的時候，使用computed-------購物車商品結算。watch----當一條數據影響多條數據的時候，使用watch-------搜索框。