首頁 >web前端 >Vue.js >vue中computed和watch的差別是什麼?

vue中computed和watch的差別是什麼?

青灯夜游
青灯夜游原創
2020-11-13 15:45:2513100瀏覽

區別:計算屬性computed支援緩存,只有依賴資料改變,才會重新進行計算;不支援非同步,當computed內有非同步操作時無效,無法監聽資料的變化。而監聽屬性watch不支援緩存,資料變,直接會觸發對應的操作;支援異步。

vue中computed和watch的差別是什麼?

watch顧名思義,用於監聽資料變化,其中可以監聽的資料來源有三部分:props、data、computed內的資料;watch提供兩個參數(newValue,oldValue),第一個參數是新值,第二個參數保存舊值;

computed用於處理複雜的邏輯運算,主要和methods儲存方法來進行區分;methods儲存方法, ,computed儲存需要處理的資料值;methods每次都會調用,computed有快取機制,只有改變時才執行,效能更佳;

vue中computer與watch區別:

計算屬性computed : 

1. 支援緩存,只有依賴資料改變,才會重新進行計算

2. 不支援非同步,當computed內有非同步操作時無效,無法監聽資料的變化

3.computed 屬性值會預設走緩存,計算屬性是基於它們的響應式依賴進行緩存的,也就是基於data中聲明過的資料透過計算得到的

4. 如果一個屬性是由其他屬性計算而來的,這個屬性依賴其他屬性,是一個多對一或一對一,一般用computed

5.如果computed屬性屬性值就是函數,那麼預設會走get方法;函數的回傳值就是屬性的屬性值;在computed中的,屬性都有一個get和一個set方法,當資料變化時,呼叫set方法。

監聽屬性watch:

1. 不支援緩存,資料變,直接會觸發對應的操作;

2.watch支援非同步;

3.監聽的函數接收兩個參數,第一個參數是最新的值;第二個參數是輸入先前的值;

4. 當一個屬性改變時,需要執行對應的操作;一對多;

相關推薦:

2020年前端vue面試題大匯總(附答案)

vue教學推薦:2020最新的5個vue.js影片教學精選

#更多程式相關知識,請造訪:程式設計教學! !

以上是vue中computed和watch的差別是什麼?的詳細內容。更多資訊請關注PHP中文網其他相關文章!

陳述:
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn