快捷導(dǎo)航

Vue.js中computed的基本使用方法

更新時間：2024年09月12日 11:22:58 作者：北原_春希

Vue.js中,computed屬性根據(jù)依賴進(jìn)行緩存,只有依賴改變時才重新計(jì)算,這樣有效提高性能,computed屬性是響應(yīng)式的,可以自動更新,并且默認(rèn)是只讀的,它與methods的主要區(qū)別在于計(jì)算屬性具有緩存性,而方法每次調(diào)用都會執(zhí)行,使用computed可以使模板更加簡潔,提高應(yīng)用性能

在Vue.js中，computed 屬性是基于它們的依賴進(jìn)行緩存的響應(yīng)式屬性。只有當(dāng)相關(guān)依賴發(fā)生改變時，才會重新求值。這意味著只要computed屬性依賴的源數(shù)據(jù)（如data中的屬性）沒有發(fā)生變化，多次訪問computed屬性會立即返回之前的計(jì)算結(jié)果，而不必再次執(zhí)行函數(shù)。這對于執(zhí)行復(fù)雜操作或計(jì)算時提高應(yīng)用性能非常有用。

基本用法

在Vue組件中，你可以在computed選項(xiàng)中定義計(jì)算屬性。每個計(jì)算屬性都會返回一個值，這個值會基于它的依賴響應(yīng)式地變化。

export default {  
  data() {  
    return {  
      firstName: 'John',  
      lastName: 'Doe'  
    }  
  },  
  computed: {  
    // 計(jì)算屬性 fullName 依賴于 firstName 和 lastName  
    fullName() {  
      return `${this.firstName} ${this.lastName}`;  
    },  
    // 另一個計(jì)算屬性，基于fullName進(jìn)行反轉(zhuǎn)  
    fullNameReversed() {  
      return this.fullName.split('').reverse().join('');  
    }  
  }  
}

在上面的例子中，fullName是一個計(jì)算屬性，它基于firstName和lastName的值來返回完整的名字。因?yàn)?code>fullName是一個計(jì)算屬性，所以Vue會自動追蹤其依賴的firstName和lastName的變化。當(dāng)firstName或lastName的值改變時，fullName會自動重新計(jì)算。

特性

緩存性：計(jì)算屬性是基于它們的響應(yīng)式依賴進(jìn)行緩存的。
懶加載：計(jì)算屬性只有在相關(guān)依賴發(fā)生改變時才會重新求值。
只讀性：默認(rèn)情況下，計(jì)算屬性是只讀的。如果你需要修改一個計(jì)算屬性的值，你應(yīng)該考慮使用data中的屬性或methods。