計算屬性
理解
1晦款、computed用來監(jiān)控自己定義的變量矾飞，該變量不在data里面聲明，直接在computed里面定義座泳，然后就可以在頁面上獲取到并進(jìn)行相應(yīng)的數(shù)據(jù)處理
2惠昔、computed里可以完成各種復(fù)雜的邏輯，包括運(yùn)算挑势、函數(shù)調(diào)用等镇防，只要最終返回一個結(jié)果就可以。
案例：
<template>
<div @click='add'> + </div>
</template>
data(){
return{
num1: 11,
num2: 33
}
},
computed:{
total:function(){
return this.num1 + this.num2 //總分會隨著num1潮饱，num2的變化而重新計算
},
},
methods:{
add(){
this.num1++
}
}
上面案例中total返回的是num1和num2的總和来氧，且每次點擊加號時total的值都會隨著num1的變化而變化，由此可知計算屬性可以依賴多個Vue 實例的數(shù)據(jù)香拉，只要其中任一數(shù)據(jù)變化啦扬，計算屬性就會重新執(zhí)行，視圖也會更新凫碌。
計算屬性的setter
計算屬性默認(rèn)只有 getter 扑毡，不過在需要時你也可以提供一個 setter ：
computed: {
fullName: {
// getter
get: function () {
return this.firstName + ' ' + this.lastName
},
// setter
set: function (newValue) {
var names = newValue.split(' ')
this.firstName = names[0]
this.lastName = names[names.length - 1]
}
}
}
現(xiàn)在再運(yùn)行 vm.fullName = 'John Doe' 時，setter 會被調(diào)用盛险，vm.firstName 和 vm.lastName 也會相應(yīng)地被更新瞄摊。
偵聽器 watch
雖然計算屬性在大多數(shù)情況下更合適勋又，但有時也需要一個自定義的偵聽器。這就是為什么 Vue 通過 watch 選項提供了一個更通用的方法换帜，來響應(yīng)數(shù)據(jù)的變化赐写。
當(dāng)需要在數(shù)據(jù)變化時執(zhí)行異步或開銷較大的操作時，這個方式是最有用的
例如：
<div id="watch-example">
<p>
Ask a yes/no question:
<input v-model="question">
</p>
<p>{{ answer }}</p>
</div>
watch: {
// 如果 `question` 發(fā)生改變膜赃，這個函數(shù)就會運(yùn)行
question: function (newQuestion, oldQuestion) {
this.answer = 'Waiting for you to stop typing...'
}
},
當(dāng)我們監(jiān)聽的數(shù)據(jù)發(fā)生變化時挺邀，相應(yīng)的函數(shù)就會運(yùn)行，這個函數(shù)的第一個參數(shù)是變化的值跳座，第二個參數(shù)是原來的值
