解讀計(jì)算屬性和watch監(jiān)聽的區(qū)別及說明
計(jì)算屬性和watch監(jiān)聽的區(qū)別
計(jì)算屬性在調(diào)用時(shí)需要在模板中渲染
watch在調(diào)用時(shí)只需修改數(shù)據(jù)
計(jì)算屬性默認(rèn)深度依賴，watch默認(rèn)淺度觀測
計(jì)算屬性適合做篩選，不可異步；watch適合做執(zhí)行異步或開銷較大的操作
computed
我們?nèi)サ谝淮问褂糜?jì)算屬性的時(shí)候，會(huì)執(zhí)行計(jì)算屬性并進(jìn)行計(jì)算，然后將計(jì)算的結(jié)果緩存起來。
后續(xù)當(dāng)我們?cè)偃ナ褂糜?jì)算屬性的時(shí)候，如果計(jì)算屬性中使用到的據(jù)沒有發(fā)生變化，那么就會(huì)直接讀取緩存的結(jié)果，不會(huì)重新計(jì)算。
watch
當(dāng)需要在數(shù)據(jù)變化時(shí)執(zhí)行異步或開銷較大的操作時(shí)，使用watch監(jiān)聽是最有用的；
使用 watch 監(jiān)聽允許我們執(zhí)行異步操作 (訪問一個(gè) API)，限制我們執(zhí)行該操作的頻率，并在我們得 到最終結(jié)果前，設(shè)置中間狀態(tài)。這些都是計(jì)算屬性無法做到的；
設(shè)置{immediate: true }屬性 將立即以表達(dá)式的當(dāng)前值觸發(fā)回調(diào)
什么是深度監(jiān)聽
Deep是深入觀察，監(jiān)聽器會(huì)一層層的往下遍歷，給對(duì)象的所有屬性都加上這個(gè)監(jiān)聽器
但是這樣性能開銷就會(huì)非常大了，任何修改obj里面任何一個(gè)屬性都會(huì)觸發(fā)這個(gè)監(jiān)聽器
總結(jié)
以上為個(gè)人經(jīng)驗(yàn)，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。
相關(guān)文章
vue實(shí)現(xiàn)滑動(dòng)切換效果（僅在手機(jī)模式下可用）
這篇文章主要為大家詳細(xì)介紹了vue實(shí)現(xiàn)滑動(dòng)切換效果，僅在手機(jī)模式下可用，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2019-07-07
這篇文章主要介紹了Vue3中插槽(slot)用法匯總,本文通過實(shí)例代碼給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2022-08-08
Vue中路由參數(shù)與查詢參數(shù)傳遞對(duì)比解析
在Vue.js中，路由與導(dǎo)航不僅涉及頁面切換，還包括了向頁面?zhèn)鬟f參數(shù)和獲取查詢參數(shù)，這篇文章主要介紹了Vue路由參數(shù)與查詢參數(shù)傳遞,需要的朋友可以參考下2023-08-08
Vue關(guān)鍵字搜索功能實(shí)戰(zhàn)小案例
在vue項(xiàng)目中,搜索功能是我們經(jīng)常需要使用的一個(gè)場景,下面這篇文章主要給大家介紹了關(guān)于Vue關(guān)鍵字搜索功能的相關(guān)資料,文中通過實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下2023-06-06
開發(fā)項(xiàng)目有一段時(shí)間了,隨著項(xiàng)目越來越大,打包的時(shí)間也相應(yīng)的變長了,打包時(shí)的內(nèi)存也增多了,這時(shí)候產(chǎn)生了一個(gè)問題,在發(fā)布項(xiàng)目的時(shí)候,會(huì)出現(xiàn)Vue熱更新出現(xiàn)內(nèi)存溢出的問題,所以本文給大家介紹了Vue熱更新出現(xiàn)內(nèi)存溢出的解決方法,需要的朋友可以參考下2024-05-05
vue點(diǎn)擊右鍵出現(xiàn)自定義操作菜單實(shí)現(xiàn)代碼
這篇文章主要給大家介紹了關(guān)于vue點(diǎn)擊右鍵出現(xiàn)自定義操作菜單實(shí)現(xiàn)的相關(guān)資料,在網(wǎng)頁中我們也希望可以像桌面軟件一樣,點(diǎn)擊右鍵后出現(xiàn)操作菜單,對(duì)選中的數(shù)據(jù)項(xiàng)進(jìn)行相應(yīng)的操作,需要的朋友可以參考下2023-08-08
vue3結(jié)合typescript中使用class封裝axios
這篇文章主要為大家介紹了vue3結(jié)合typescript中使用class封裝axios實(shí)現(xiàn)示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2023-06-06
這篇文章主要介紹了vue組件中props與data的結(jié)合使用方式，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-10-10
這篇文章主要介紹了vue頁面圖片不顯示問題解決方案,本篇文章通過簡要的案例,講解了該項(xiàng)技術(shù)的了解與使用,以下就是詳細(xì)內(nèi)容,需要的朋友可以參考下2021-09-09
使用vue3+TS實(shí)現(xiàn)簡易組件庫的全過程
當(dāng)市面上主流的組件庫不能滿足我們業(yè)務(wù)需求的時(shí)候,那么我們就有必要開發(fā)一套屬于自己團(tuán)隊(duì)的組件庫,下面這篇文章主要給大家介紹了如何使用vue3+TS實(shí)現(xiàn)簡易組件庫的相關(guān)資料,需要的朋友可以參考下2022-03-03