Vue框架的computed與methods相似,可以用來處理數(shù)據(jù)。但是不同的是computed的計算結(jié)果會被緩存,只有在其依賴改變時才會重新計算,并且computed的計算結(jié)果只有在被使用時才會計算,而與之相比methods的計算結(jié)果在每次調(diào)用時都會重新計算,無法被緩存,所以computed可以更加高效地處理數(shù)據(jù)。
computed: { fullName() { return this.firstName + ' ' + this.lastName } }
在上面的代碼例子中,computed通過firstName和lastName的依賴計算出了fullName的值,并將計算結(jié)果緩存。在模板中使用fullName時,computed的計算結(jié)果會被取出使用,而不會執(zhí)行計算操作。
除了計算屬性,computed還可以接受一個對象型參數(shù),用來對計算屬性進行深度控制。例如:
computed: { fullName: { get() { return this.firstName + ' ' + this.lastName }, set(newValue) { const names = newValue.split(' ') this.firstName = names[0] this.lastName = names[1] } } }
在這段代碼中,設(shè)置了fullName的get和set方法,當(dāng)fullName被獲取時,會調(diào)用get方法計算并返回值,而當(dāng)fullName被設(shè)置時,會調(diào)用set方法對firstName和lastName進行賦值操作。
總結(jié)而言,computed是非常有用的Vue框架中一種高效地處理數(shù)據(jù)的方式,在多個組件間共享數(shù)據(jù)時尤為重要。