學習要點:
1.Getter
2.Setter
本節課我們來開始學習 Vue3.x 的計算屬性中的 Getter 和 Setter 方法;
一.Getter
1. 當我們輸出 vm 對象的時候,發現屬性字段有 Getter 和 Setter 方法;
2. Getter:即取值,Setter:即賦值,計算屬性默認執行的是 Getter 取值方法;
3. 那么正常使用計算屬性時,我們都是 return 返回一個最終結果即可;
4. 如果我們強制使用 Getter 方法獲取,那么計算屬性的格式改寫如下:
// 計算屬性
computed : {
// 連接兩個屬性字符串
fullName : {
// Getter
get() {
return this.firstName + this.LastName
}
}
}
二.Setter
1. Setter 是賦值,我們可以在這里直接修改屬性字段的內容,如下:
// Setter
set(value) {
const str = value.split('.')
this.firstName = str[0] + '.'
this.lastName = str[1]
console.log('set')
}
PS:Setter 會被先執行進行賦值,然后 Getter 執行取出,可通過控制臺輸出了解順序;
PS:當沒有賦值操作,則執行一次 get,當有賦值操作,會以 get->set->get 三次執行;
PS:賦值通過 vm.fullName = 'Miss.Wang'進行賦值;
// 可以直接對計算屬性賦值
vm.fullName = 'Miss.Wang'
本文由:蘭州啟點網絡(
www.syzhibo.net)整理發布!