Vue中,使用過多的偵聽器和計算屬性有什麼不好的影響?

Manny李文輝


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 選項提供了一個更通用的方法,來響應數據的變化。當需要在數據變化時執行異步或開銷較大的操作時,這個方式是最有用的。


分享到:


相關文章: