計算屬性 computed
computed用來監控自己定義的變量，該變量不在data裏面聲明，直接在computed裏面定義，然後就可以在頁面上進行雙向數據綁定展示出結果或者用作其他處理
場景：
購物車裏面的商品列表和總金額之間的關係，只要商品列表裏面的商品數量發生變化，或減少或增多或刪除商品，總金額都應該發生變化，
這裏的這個總金額使用computed屬性來進行計算是最好的選擇。（適合多對一的場景）
多對一的場景使用：
<p>{{luFei_Name}}</p>
vm = new Vue({
el:"#app",
data: {
// 路飛的全名：蒙奇·D·路飛
firstName: '蒙奇',
secName: 'D',
thirdName: '路飛'
},
computed: {
luFei_Name: function () {
return this.firstName + this.secName + this.thirdName
}
}
})
// 將“路飛”改爲“海軍王”
vm.thirdName = '海軍王' // 蒙奇·D·海軍王
computed使用緩存實例：
new Vue({
el: '#app',
// 設置兩個button，點擊分別調用getMethodsDate,getComputedDate方法
template:
'<div id="app">
<button @click="getMethodsDate">methods</button>
<button @click="getComputedDate">computed</button>
</div>',
methods: {
getMethodsDate: function () {
alert(new Date())
},
// 返回computed選項中設置的計算屬性——computedDate
getComputedDate: function () {
alert(this.computedDate)
}
},
computed: {
computedDate: function () {
return new Date()
}
}
注意
1、兩次點擊computed返回的時間是相同的！！
兩次點擊computed返回的時間是相同的！！
兩次點擊computed返回的時間是相同的！！
2、兩次點擊methods返回的時間是不同的
原因：
new Date()不是依賴型數據（不是放在data等對象下的實例數據），所以computed只提供了緩存的值，而沒有重新計算
只有符合：1.存在依賴型數據 2.依賴型數據發生改變這兩個條件,computed纔會重新計算。
總結：
- 支持緩存，只有依賴數據發生改變，纔會重新進行計算；
- 不支持異步，當computed內有異步操作時無效，無法監聽數據的變化；
- computed 屬性值會默認走緩存，計算屬性是基於它們的響應式依賴進行緩存的，也就是基於data中聲明過或者父組件傳遞的props中的數據通過計算得到的值
- 如果一個屬性是由其他屬性計算而來的，這個屬性依賴其他屬性，是多對一或者一對一，一般用computed
- 如果computed屬性屬性值是函數，那麼默認會走get方法；函數的返回值就是屬性的屬性值；在computed中的，屬性都有一個get和一個set方法，當數據變化時，調用set方法。
偵聽屬性 watch
watch主要用於監控vue實例的變化，它監控的變量當然必須在data裏面聲明纔可以，它可以監控一個變量，也可以是一個對象
將對象寫成字符串的形式：
vm = new Vue({
el:"#app",
// （多個）船員名稱數據 --> 依賴於 --> （1個)一一一名稱數據 一個數據變化 ---> 多個數據全部變化
data: {
haiZeiTuan_Name: '一一一',
suoLong: '一一一索隆',
naMei: '一一一娜美',
xiangJiShi: '一一一香吉士'
},
watch: {
haiZeiTuan_Name: function (newName) { //函數的名字需是上面data內的數據，只能監控一個對象或一個變量
this.suoLong = newName + '索隆'
this.naMei = newName + '娜美'
this.xiangJiShi = newName + '香吉士'
}
}
})
vm.haiZeiTuan_Name = '二二二'
總結：
- 不支持緩存，數據變，直接會觸發相應的操作；
- watch支持異步；
- 監聽的函數接收兩個參數，第一個參數是最新的值，第二個參數是輸入之前的值；
- 當一個屬性發生變化時，需要執行對應的操作；適用一對多的情況
- 監聽數據必須是data中聲明過或者父組件傳遞過來的props中的數據，當數據變化時，觸發其他操作，函數有兩個參數，
immediate：組件加載立即觸發回調函數執行，
deep: 深度監聽，爲了發現對象內部值的變化，複雜類型的數據時使用，例如數組中的對象內容的改變，注意監聽數組的變動不需要這麼做。注意：deep無法監聽到數組的變動和對象的新增，參考vue數組變異,只有以響應式的方式觸發纔會被監聽到。
計算屬性 method與 偵聽屬性 watch區別
watch只能監聽一個對象或變量（對象或變量必須是上面data內的數據，對象的話可以寫成字符串形式“object.xxx”：對象內部的xxx），比如上面watch的案例，他的內部可以寫多個數據與這個監聽的數據進行關聯，當該數據發生改變的時候，所有的內部數據也都會隨着改變，可以做一些開銷大的操作，可以進行異步操作
computed是計算屬性，需寫成函數的形式（可自定義函數名），該函數內部的變量依賴於data內的數據，但內部定義的變量可以緩存，當外面數據沒有更改的時候，他是不會觸發的，當所依賴的數據進行更改後，他纔會重新計算，更新數據，他的內部可以監聽多個依賴的數據，他不會進行異步操作