計(jì)算屬性
<!--模板內(nèi)的表達(dá)式非常便利，但是設(shè)計(jì)它們的初衷是用于簡單運(yùn)算的。
在模板中放入太多的邏輯會讓模板過重且難以維護(hù)。例如：-->
<div>
{{ message.split('').reverse().join('') }}
</div>
<!--在這個(gè)地方，模板不再是簡單的聲明式邏輯。你必須看一段時(shí)間才能意識到，
這里是想要顯示變量 message的翻轉(zhuǎn)字符串。當(dāng)你想要在模板中多次引用此
處的翻轉(zhuǎn)字符串時(shí)，就會更加難以處理验庙。所以搏恤，對于任何復(fù)雜邏輯巡揍，你都應(yīng)當(dāng)使用計(jì)算屬性阱当。-->
- 計(jì)算屬性緩存vs方法函數(shù)
<!--計(jì)算屬性例子： 計(jì)算屬性緩存vs方法-->
<p>原始字符串：{{message}}</p>
<p>通過計(jì)算屬性翻轉(zhuǎn)后的字符串:{{reversedMessage}}</p>
<p>通過函數(shù)翻轉(zhuǎn)后的字符串: {{ reversedMessageWithFunction() }}</p>
<!--我們可以將同一函數(shù)定義為一個(gè)方法而不是一個(gè)計(jì)算屬性俏扩。兩種方式的最終結(jié)
果確實(shí)是完全相同的。然而弊添，不同的是計(jì)算屬性是基于它們的依賴進(jìn)行緩存的录淡。
計(jì)算屬性只有在它的相關(guān)依賴發(fā)生改變時(shí)才會重新求值。這就意味著只要 message
還沒有發(fā)生改變油坝，多次訪問 reversedMessage 計(jì)算屬性會立即返回之前的計(jì)算結(jié)果嫉戚，
而不必再次執(zhí)行函數(shù)。
我們?yōu)槭裁葱枰彺娉喝Γ考僭O(shè)我們有一個(gè)性能開銷比較大的計(jì)算屬性 A彬檀，它需要遍歷一個(gè)
巨大的數(shù)組并做大量的計(jì)算。然后我們可能有其他的計(jì)算屬性依賴于 A 瞬女。如果沒有緩存窍帝，
我們將不可避免的多次執(zhí)行 A 的 getter！如果你不希望有緩存诽偷，請用方法來替代坤学。-->
- 計(jì)算屬性vs偵聽屬性
<!--計(jì)算屬性vs偵聽屬性
Vue 提供了一種更通用的方式來觀察和響應(yīng) Vue 實(shí)例上的數(shù)據(jù)變動：偵聽屬性。當(dāng)你
有一些數(shù)據(jù)需要隨著其它數(shù)據(jù)變動而變動時(shí)报慕，你很容易濫用 watch——特別是如果你之前使用過
AngularJS深浮。然而，通常更好的做法是使用計(jì)算屬性而不是命令式的 watch 回調(diào)卖子。細(xì)想一下這個(gè)例子：-->
<div>偵聽器：{{fullName}}</div>
<div>計(jì)算屬性{{calcuteFullName}}</div>
<!--比較而言：計(jì)算屬性比偵聽器更簡潔-->
- 計(jì)算屬性的setter
<!--計(jì)算屬性的setter:
計(jì)算屬性默認(rèn)只有 getter 略号，不過在需要時(shí)你也可以提供一個(gè) setter ：-->
<div>計(jì)算屬性的getter與setter: {{calcuteStudentName}}</div>
<!--在console上運(yùn)行vm.calcuteStudentName="rainbow boy"就可以執(zhí)行g(shù)etter and setter-->
偵聽器
<!--偵聽器：
雖然計(jì)算屬性在大多數(shù)情況下更合適，但有時(shí)也需要一個(gè)自定義的偵聽器洋闽。
這就是為什么 Vue 通過 watch 選項(xiàng)提供了一個(gè)更通用的方法玄柠，來響應(yīng)數(shù)據(jù)的變化。
當(dāng)需要在數(shù)據(jù)變化時(shí)執(zhí)行異步或開銷較大的操作時(shí)诫舅，這個(gè)方式是最有用的羽利。-->
<p>
咨詢一個(gè)回答是/否的問題:
<input v-model="question">
</p>
<p class="answerStyle">{{ answer }}</p>
在這個(gè)示例中，使用 watch 選項(xiàng)允許我們執(zhí)行異步操作 (訪問一個(gè) API)刊懈，限制我們執(zhí)行該操作的頻率这弧，并在我們得到最終結(jié)果前，設(shè)置中間狀態(tài)虚汛。這些都是計(jì)算屬性無法做到的匾浪。
除了 watch 選項(xiàng)之外，您還可以使用命令式的 vm.$watch API
執(zhí)行效果
計(jì)算屬性和偵聽器.png
所有運(yùn)行效果請看demo
