解讀計算屬性和watch監(jiān)聽的區(qū)別及說明
更新時間：2025年01月15日 11:24:55 作者：寫bug啦
計算屬性是基于它們的依賴進行緩存的,只有在它的相關依賴發(fā)生改變時才會重新求值,而watch則是一個更為通用的監(jiān)聽器,它可以在數(shù)據(jù)變化時執(zhí)行異步操作或開銷較大的操作
計算屬性和watch監(jiān)聽的區(qū)別
計算屬性在調用時需要在模板中渲染
watch在調用時只需修改數(shù)據(jù)
計算屬性默認深度依賴，watch默認淺度觀測
計算屬性適合做篩選，不可異步；watch適合做執(zhí)行異步或開銷較大的操作
computed
我們去第一次使用計算屬性的時候，會執(zhí)行計算屬性并進行計算，然后將計算的結果緩存起來。
后續(xù)當我們再去使用計算屬性的時候，如果計算屬性中使用到的據(jù)沒有發(fā)生變化，那么就會直接讀取緩存的結果，不會重新計算。
watch
當需要在數(shù)據(jù)變化時執(zhí)行異步或開銷較大的操作時，使用watch監(jiān)聽是最有用的；
使用 watch 監(jiān)聽允許我們執(zhí)行異步操作 (訪問一個 API)，限制我們執(zhí)行該操作的頻率，并在我們得 到最終結果前，設置中間狀態(tài)。這些都是計算屬性無法做到的；
設置{immediate: true }屬性 將立即以表達式的當前值觸發(fā)回調
什么是深度監(jiān)聽
Deep是深入觀察，監(jiān)聽器會一層層的往下遍歷，給對象的所有屬性都加上這個監(jiān)聽器
但是這樣性能開銷就會非常大了，任何修改obj里面任何一個屬性都會觸發(fā)這個監(jiān)聽器
總結
以上為個人經(jīng)驗，希望能給大家一個參考，也希望大家多多支持腳本之家。
相關文章
Sentry?是一款功能強大的開源錯誤監(jiān)控服務,廣泛用于追蹤和修復應用中的異常情況,本文將詳細介紹如何在?Vue?應用中集成和使用?Sentry,感興趣的可以了解下2024-11-11
最近接到一個需求,公司需要對vue項目實現(xiàn)線上打包,下面這篇文章主要給大家介紹了關于Vue項目分包打包配置(包含dev)的相關資料,文中通過實例代碼介紹的非常詳細,需要的朋友可以參考下2023-06-06
下面小編就為大家分享一篇Vue2 模板template的四種寫法總結，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-02-02
Vue 列表頁帶參數(shù)進詳情頁的操作(router-link)
這篇文章主要介紹了Vue 列表頁帶參數(shù)進詳情頁的操作(router-link)，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-11-11
這篇文章主要介紹了vue多次循環(huán)操作,結合實例形式分析了vue.js針對json嵌套數(shù)據(jù)的多次循環(huán)讀取操作相關實現(xiàn)技巧,需要的朋友可以參考下2019-02-02
這篇文章主要介紹了Vue開發(fā)之封裝分頁組件與使用,結合實例形式分析了vue.js封裝分頁組件操作以及使用組件進行分頁的相關實現(xiàn)技巧,需要的朋友可以參考下2019-04-04
nuxt.js 在middleware(中間件)中實現(xiàn)路由鑒權操作
這篇文章主要介紹了nuxt.js 在middleware(中間件)中實現(xiàn)路由鑒權操作，具有很好的參考價值，希望大家有所幫助。一起跟隨小編過來看看吧2020-11-11
最近遇到了個問題,用v-bind動態(tài)綁定img的src,圖片加載不出來,所以下面這篇文章主要給大家介紹了關于vue動態(tài)加載本地圖片的相關資料,需要的朋友可以參考下2021-07-07
nuxt 服務器渲染動態(tài)設置 title和seo關鍵字的操作
這篇文章主要介紹了nuxt 服務器渲染動態(tài)設置 title和seo關鍵字的操作，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-11-11
我們平時經(jīng)常做的是上傳文件,下面這篇文章主要給大家介紹了關于vue項目中實現(xiàn)多文件上傳功能的相關資料,文中通過實例代碼介紹的非常詳細,需要的朋友可以參考下2022-11-11