回覆列表
-
1 # 碧水小豬豬
-
2 # 俺是花生米她是毛豆豆
react中資料是單向繫結的,而vue中資料是雙向繫結的。為什麼? 在react中,主要是透過setState 去改變state的值;而在vue中,會自動的觸發set 與get 改變屬性的值。
在vue中有兩個比較重要的知識點,computed 與 watch;
一、computed
computed 適用計算一些屬性,記憶體消耗較小依賴值不變,這個也不會變。
一般情況下,我們宣告的計算屬性,調取的是getter 函式,依賴於所繫結的msg 這個值,並隨之發生變化。
在計算屬性中設定set, 呼叫setter 函式,。
此時this.changesmsg會發生改變,然後觸發setter函式,設定this.msg, 最終this.changesmsg 的值是uwuw。
如果一個變數依賴於兩個變數的,比如是兩個變數的和,適用於這種方法。
computed必須在例項範圍內
vue中setter與getter 是想資料的雙向繫結。
二、watch
vue 透過watch選項提供了一個更通用的方法,來響應資料的變化。一般資料變化是執行非同步或開銷較大的時候,比較適合。
三、methods
在vue中,還有methods這個方法,裡面一邊裝著vue中需要呼叫的一些方法,這也可以改變資料,不過相比computed 開銷較大,每次改變都需要呼叫。
PS : 最後說一點,在vue中,var vm = new Vue({}) ,其中vm是區域性變數 ,需要在控制檯列印的話 需要
個人觀點
要儘可能多使用計算屬於,而少用偵聽器。
計算屬效能最佳化模板程式碼。
下面是引用官方說法:
計算屬性 vs 偵聽屬性
Vue 提供了一種更通用的方式來觀察和響應 Vue 例項上的資料變動:偵聽屬性。當你有一些資料需要隨著其它資料變動而變動時,你很容易濫用 watch——特別是如果你之前使用過 AngularJS。然而,通常更好的做法是使用計算屬性而不是命令式的 watch 回撥
偵聽器
雖然計算屬性在大多數情況下更合適,但有時也需要一個自定義的偵聽器。這就是為什麼 Vue 透過 watch 選項提供了一個更通用的方法,來響應資料的變化。當需要在資料變化時執行非同步或開銷較大的操作時,這個方式是最有用的。