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