解讀計(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)我們再去使用計(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使用Sentry實(shí)現(xiàn)錯(cuò)誤監(jiān)控
Sentry?是一款功能強(qiáng)大的開源錯(cuò)誤監(jiān)控服務(wù),廣泛用于追蹤和修復(fù)應(yīng)用中的異常情況,本文將詳細(xì)介紹如何在?Vue?應(yīng)用中集成和使用?Sentry,感興趣的可以了解下2024-11-11
最近接到一個(gè)需求,公司需要對(duì)vue項(xiàng)目實(shí)現(xiàn)線上打包,下面這篇文章主要給大家介紹了關(guān)于Vue項(xiàng)目分包打包配置(包含dev)的相關(guān)資料,文中通過實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下2023-06-06
下面小編就為大家分享一篇Vue2 模板template的四種寫法總結(jié)，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2018-02-02
Vue 列表頁帶參數(shù)進(jìn)詳情頁的操作(router-link)
這篇文章主要介紹了Vue 列表頁帶參數(shù)進(jìn)詳情頁的操作(router-link)，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2020-11-11
這篇文章主要介紹了vue多次循環(huán)操作,結(jié)合實(shí)例形式分析了vue.js針對(duì)json嵌套數(shù)據(jù)的多次循環(huán)讀取操作相關(guān)實(shí)現(xiàn)技巧,需要的朋友可以參考下2019-02-02
這篇文章主要介紹了Vue開發(fā)之封裝分頁組件與使用,結(jié)合實(shí)例形式分析了vue.js封裝分頁組件操作以及使用組件進(jìn)行分頁的相關(guān)實(shí)現(xiàn)技巧,需要的朋友可以參考下2019-04-04
nuxt.js 在middleware(中間件)中實(shí)現(xiàn)路由鑒權(quán)操作
這篇文章主要介紹了nuxt.js 在middleware(中間件)中實(shí)現(xiàn)路由鑒權(quán)操作，具有很好的參考價(jià)值，希望大家有所幫助。一起跟隨小編過來看看吧2020-11-11
最近遇到了個(gè)問題,用v-bind動(dòng)態(tài)綁定img的src,圖片加載不出來,所以下面這篇文章主要給大家介紹了關(guān)于vue動(dòng)態(tài)加載本地圖片的相關(guān)資料,需要的朋友可以參考下2021-07-07
nuxt 服務(wù)器渲染動(dòng)態(tài)設(shè)置 title和seo關(guān)鍵字的操作
這篇文章主要介紹了nuxt 服務(wù)器渲染動(dòng)態(tài)設(shè)置 title和seo關(guān)鍵字的操作，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2020-11-11
vue項(xiàng)目中實(shí)現(xiàn)多文件上傳功能實(shí)例代碼
我們平時(shí)經(jīng)常做的是上傳文件,下面這篇文章主要給大家介紹了關(guān)于vue項(xiàng)目中實(shí)現(xiàn)多文件上傳功能的相關(guān)資料,文中通過實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下2022-11-11