建站
咨詢
售后
建站咨詢
新聞中心
大家好，本篇文章我們繼續(xù)學(xué)習(xí)和 Vue 相關(guān)的內(nèi)容，今天我們歸納總結(jié)下什么是 computed 計算屬性、如何使用和應(yīng)用場景，以及 computed 和 Method 事件的區(qū)別和應(yīng)用場景。
成都創(chuàng)新互聯(lián) - BGP機(jī)房服務(wù)器托管，四川服務(wù)器租用，成都服務(wù)器租用，四川網(wǎng)通托管,綿陽服務(wù)器托管，德陽服務(wù)器托管，遂寧服務(wù)器托管，綿陽服務(wù)器托管，四川云主機(jī)，成都云主機(jī)，西南云主機(jī)，BGP機(jī)房服務(wù)器托管，西南服務(wù)器托管，四川/成都大帶寬，機(jī)柜大帶寬租用·托管，四川老牌ＩＤＣ服務(wù)商
什么是 computed 計算屬性
Vue.js 中的 computed 計算屬性是一種特殊類型的屬性，它們的值不是簡單地被設(shè)置，而是根據(jù)其它屬性的值計算得出。
computed 計算屬性是基于它們的依賴進(jìn)行緩存的，這意味著只有在它們的依賴發(fā)生變化時，才會重新計算。這使得它們更高效，因為它們只在需要時才會計算，而不是每次都調(diào)用。
下面是一個示例，展示了如何使用 computed 計算屬性:
Full name: {{ fullName }}
在這個例子中，當(dāng) firstName 或 lastName 發(fā)生變化時，fullName 會自動重新計算。
computed 和 method 事件的區(qū)別
與 computed 計算屬性不同的是，methods 方法是每次都會調(diào)用的，不能進(jìn)行緩存。如果你需要在每次渲染時都計算一個值，那么使用 methods 方法會更好。
下面是一個使用 methods 方法的示例：
Full name: {{ getFullName() }}
在這個例子中，每次渲染時都會調(diào)用 getFullName 方法，而不是緩存其結(jié)果。
總結(jié)一下
適用 computed 計算屬性的場景是:
- 適合一些簡單的操作，比如數(shù)組排序或篩選
- 計算屬性可以直接在HTML中使用，像 Data 中的屬性一樣使用。
- 當(dāng)你需要基于其它屬性計算一個新的值。
- 當(dāng)你需要緩存計算結(jié)果,因為這樣能提高應(yīng)用的性能。
適用 methods 方法的場景是:
- 當(dāng)你需要在每次渲染時都計算一個值。
- 當(dāng)你需要執(zhí)行一些復(fù)雜的邏輯或者需要調(diào)用外部函數(shù)。
- 方法通常作為事件監(jiān)聽或公共業(yè)務(wù)邏輯
- 方法可以當(dāng)做普通 JS 函數(shù)使用
另外，計算屬性是可以被觀察的，可以被用在指令和計算屬性依賴中。而 method 方法不能被觀察到,不能用在指令和計算屬性依賴中。
再舉一個例子：
Price: {{ price }}
Discount: {{ discount }}%
Discounted price: {{ discountedPrice }}
在這個例子中，discountedPrice 是基于 price 和 discount 計算得出的，并且當(dāng) price 或 discount 發(fā)生變化時，discountedPrice 會自動重新計算。 而如果用 method 實現(xiàn)的話，每次都會計算一遍，而不是只在需要時計算。
總之，computed 計算屬性是一種高效的方式，能夠基于其它屬性進(jìn)行計算并緩存結(jié)果，而 methods 方法則是每次都會調(diào)用并進(jìn)行計算。
結(jié)束
今天的內(nèi)容就介紹到這里，內(nèi)容比較簡單，希望對你有所幫助。
分享題目：Vue3學(xué)習(xí)筆記，如何理解Computed計算屬性
新聞來源：http://m.fisionsoft.com.cn/article/djgeeih.html
