p 25 025-計(jì)算屬性-很聰明會(huì)緩存

計(jì)算屬性：是在 Vue.js 中用于處理基于已有數(shù)據(jù)派生出的衍生數(shù)據(jù)的一種方式。旨在簡(jiǎn)化數(shù)據(jù)計(jì)算和處理的過程，并提高代碼的可讀性和可維護(hù)性。

經(jīng)過學(xué)習(xí)，發(fā)現(xiàn)計(jì)算屬性使用起來(lái)類似于普通的數(shù)據(jù)屬性，但有幾個(gè)重要的區(qū)別：

1.聲明方式：計(jì)算屬性是在 Vue 組件的計(jì)算屬性對(duì)象中定義的。通過在組件選項(xiàng)中添加一個(gè) computed 對(duì)象，可以在其中定義計(jì)算屬性的名稱和相應(yīng)的處理函數(shù)。

2.自動(dòng)依賴追蹤：計(jì)算屬性會(huì)自動(dòng)追蹤其依賴的響應(yīng)式數(shù)據(jù)。當(dāng)依賴的數(shù)據(jù)發(fā)生變化時(shí)，計(jì)算屬性會(huì)重新計(jì)算，并更新相關(guān)的 DOM。

3.緩存機(jī)制：計(jì)算屬性默認(rèn)具有緩存機(jī)制，即只有在依賴的數(shù)據(jù)發(fā)生變化時(shí)才會(huì)重新計(jì)算。在數(shù)據(jù)沒有發(fā)生變化時(shí)，計(jì)算屬性會(huì)返回上一次的計(jì)算結(jié)果，從而避免不必要的計(jì)算開銷。

4.使用方式：在模板中使用計(jì)算屬性時(shí)，可以像使用普通屬性一樣直接引用計(jì)算屬性的名稱。Vue 會(huì)自動(dòng)處理計(jì)算屬性的求值和更新。

通過使用計(jì)算屬性，可以將復(fù)雜的數(shù)據(jù)計(jì)算邏輯封裝起來(lái)，使組件中的模板代碼更加簡(jiǎn)潔和可讀。它們對(duì)于基于多個(gè)響應(yīng)式數(shù)據(jù)計(jì)算衍生數(shù)據(jù)、格式化數(shù)據(jù)、過濾數(shù)據(jù)等場(chǎng)景非常有用，避免了在模板中編寫復(fù)雜的計(jì)算邏輯。

需要注意的是，計(jì)算屬性是基于已有響應(yīng)式數(shù)據(jù)的派生，而不是用于修改數(shù)據(jù)。如果需要修改數(shù)據(jù)，應(yīng)該使用對(duì)應(yīng)的 setter 函數(shù)或使用方法（methods）來(lái)實(shí)現(xiàn)。

總結(jié)起來(lái)，計(jì)算屬性是一種用于處理衍生數(shù)據(jù)的機(jī)制，具有自動(dòng)依賴追蹤和緩存的特性。它們通過將復(fù)雜的數(shù)據(jù)計(jì)算邏輯抽象成屬性，在組件中提供了更簡(jiǎn)潔和可維護(hù)的代碼方式。