學習要點：
1.簡單事件
2.計算屬性
本節課我們來開始學習 Vue3.x 的事件的入門和計算屬性的用法；
一．簡單事件
1. 上節課，我們最后談到了一個新指令：v-on:click，點擊觸發事件；
<button v-on:click="counter++">+counterbutton>
<button v-on:click="counter+=2">+counterbutton>
PS：當我們點擊了按鈕即可實現累加 1，或累加 2 的操作；
2. 如果觸發的事件業務邏輯較多，那么行內表達式是不夠的，需要觸發固定方法；
<button v-on:click="addCounter">counter+methodsbutton>
const App = {
// 初始數據
data() {},
// 事件處理方法
methods : {
// 累加方法
addCounter() {
// 這里的 this 就是 vue 代理對象
this.counter++
}
}
}
PS：所有的方法均可放在 methods 屬性對象里，提供給 v-on 觸發；
二．計算屬性
1. 對于插值可以進行簡單運算，可一旦過于復雜，則模版維護將變得異常困難；
{{firstName + lastName}}
firstName : 'Mr.',
lastName : 'Lee'
2. 上面的例子出現要使用兩個插值，如果假設插值內部還要各種運算，極不方便；
3. 此時，我們可以用第二套方案，就是使用方法進行返回，把運算和顯示整合起來；
{{fullName()}}
methods : {
// 連接兩個屬性字符串
fullName() {
return this.firstName + this.lastName
}
}
PS：第二套方案在復雜性高的情況下優于第一種，并且插值只調用一次即可；
PS：缺點也很明顯，插值調用必須方法模式(有括號)，和屬性方式容易混淆；
PS：其次，每次都必須執行方法，沒有緩存會在復雜的情況下影響性能；
4. 那么，系統提供了第三種方法解決了這兩個問題，就是計算屬性；
{{fullName2}}
const App = {
// 初始數據
data() {},
// 事件處理方法
methods : {},
// 計算屬性
computed : {
// 連接三個屬性字符串
fullName2() {
return this.firstName + this.LastName
}
}
}
PS：計算屬性和屬性一樣的調用方式，而方法調用卻需要括號，所以推薦用計算屬性；
PS：計算屬性具有緩存，當值沒有改變時，不會重新執行方法，而去使用緩存；
PS：可以參考手冊去了解一下計算屬性緩存的相關細節，本人推薦需要在實戰中體會更好；
本文由:蘭州啟點網絡（
www.syzhibo.net)整理發布!
啟點CMS演示地址及賬號
