1. 程式人生 > >vue computed計算屬性的get和set函式

vue computed計算屬性的get和set函式

get和set都是回撥函式
什麼是回撥函式:1/你定義的 2/你沒有呼叫 3/但最終執行了
關於回撥函式需要知道的兩個問題:1/什麼時候呼叫 2/用來做什麼

const vm = new Vue ({
	data: {
		firstName; ‘A’,
		lastName: 'B'
	},
	computed: {
		fullName: {
			//1/當需要讀取當前屬性值時呼叫(初始化)/當依賴項變化時也呼叫該回調函式  2/根據相關資料計算並返回當前屬性值
			get () {
				return firstName + ' ' + lastName;
			},
			//1/監視:當屬性值變化時呼叫該回調函式        2/根據最新的屬性值計算相關資料
			set (value) {   //fullName是要監聽的屬性,value是fullName的最新屬性值
				this.firstName = value.split(' ').[0];
				this.lastName = value.split(' ').[1];
			}
		}
	}
})

html

姓:<input type="text" v-model="firstName" />
名:<input type="text" v-model="lastName" />
姓名:<input type="text" v-model="fullName" />   //計算屬性不能加()