計算屬性computed和偵聽屬性watch的區別? 應用場景?
阿新 • • 發佈:2021-06-25
計算屬性computed :
支援快取
,只有依賴資料發生改變
,才會重新進行計算不支援非同步
,當computed內有非同步操作時無效,無法監聽資料的變化- computed 屬性值會
預設走快取
,計算屬性是基於它們的響應式依賴進行快取的,也就是基於data中
宣告過或者父元件傳遞的props中的資料
通過計算得到的值 - 如果一個屬性是由其他屬性計算而來的,這個屬性依賴其他屬性,是一個多對一或者一對一,一般用computed
- 如果computed屬性屬性值是函式,那麼預設會走get方法;函式的
返回值就是屬性的屬性值
;在computed中的,屬性都有一個get和一個set方法,當資料變化時,呼叫set方法。
偵聽屬性watch:
-
不支援快取,資料發生改變,會直接觸發
相應的操作; -
watch支援非同步
; -
監聽的函式接收
兩個引數,第一個引數是最新的值;第二個引數是輸入之前的值
; -
當一個屬性發生變化時,需要執行對應的操作;
一對多
; -
監聽資料必須是
data中宣告過
或者父元件傳遞過來的props中的資料
,當資料變化時,觸發其他操作,函式有兩個引數,immediate
:元件載入立即觸發回撥函式執行,deep
: 深度監聽,為了發現物件內部值的變化,複雜型別的資料時使用,例如陣列中的物件內容的改變,注意監聽陣列的變動不需要這麼做。注意:deep無法監聽到陣列的變動和物件的新增,參考vue陣列變異,只有以響應式的方式觸發才會被監聽到。
監聽的物件也可以寫成字串的形式
當需要在資料變化時執行非同步或開銷較大的操作時,這個方式是最有用的。這是和computed最大的區別。
作者:小隻前端攻城獅
連結:https://juejin.cn/post/6977363418273562660
來源:掘金
著作權歸作者所有。商業轉載請聯絡作者獲得授權,非商業轉載請註明出處。