Vue的computed對象是一個非常重要的核心特性。它能夠計算一個新的屬性,而且在它所依賴的屬性發生改變時,能夠自動地更新。極大地提高了我們的代碼復用性和開發效率。
computed: { fullName() { return this.firstName + ' ' + this.lastName } }
在Vue組件的computed對象中,我們可以定義一個計算屬性fullName。它返回this.firstName和this.lastName的組合。當this.firstName和this.lastName值發生改變時,Vue會自動地重新計算fullName的值。這個過程不需要我們手動來進行計算和更新。
另外,computed對象也支持setter。當我們需要給復雜的計算屬性賦值時,可以使用setter實現。
computed: { fullName: { get() { return this.firstName + ' ' + this.lastName }, set(value) { const [firstName, lastName] = value.split(' ') this.firstName = firstName this.lastName = lastName } } }
在這個例子中,computed對象fullName擁有get函數和set函數。當我們調用fullName的setter時,它會將傳入的value拆分成firstName和lastName,并將這兩個屬性分別設置到Vue實例中。
總之,在Vue中computed對象十分重要,它可幫助我們更有效地實現數據綁定和頁面渲染。