計算屬性set/get
-
計算屬性 (單向)
在computed屬性對象中定義計算屬性的方法,在頁面使用{{方法名}}來顯示計算的結果
-
監聽屬性 (單向)
通過vm對象的$watch()或watch配置來監聽指定的屬性,當屬性變化時,回調函數自動調用,在函數內部進行計算。
-
計算屬性高級 (雙向)
通過geter/setter實現對屬性數據的顯示和監視,計算屬性存在緩存,多次讀取只執行一次getter計算。
const vm = new Vue({
el: "#demo",
data: {
firstName: "A",
lastName: "B",
fullName2: "A-B"
},
computed: {
fullName1() {
return this.firstName + "-" + this.lastName;
},
fullName3: {
// 回調函數:當讀取當前屬性值,根據相關數據變化 計算并返回當前屬性值
get() {
return this.firstName + "-" + this.lastName;
},
// 回調函數: 監聽屬性值發生改變時回調,更新相關的屬性數據
set(value) { //value 就是fullName3最新值
let name = value.split("-");
this.firstName = name[0];
this.lastName = name[1];
}
}
},
watch: {
firstName(newValue, oldValue) {
this.fullName2 = newValue + "-" + this.lastName;
},
lastName(newValue, oldValue) {
this.fullName2 = this.firstName + "-" + newValue;
}
}
})