vue 自學筆記(三) 計算屬性與偵聽器

一:計算屬性

　　雖然在模板內使用表達式對屬性進行處理十分便利，例如在小鬍子語法裏寫number + 1實現對數據的簡單處理，但若咱們在其中加入大量的代碼，使得邏輯變重，致使難以維護。例以下面的代碼，並非簡單的邏輯處理，而是須要通過一段時間的推算後，才知道在 div 中展現的是怎麼樣的內容

　　　　能夠在小鬍子語法中直接書寫簡單js 

　　

　　　　Vue 建議咱們在其中只作一些簡單的運算便可，那麼當給頁面要綁定的屬性需要大量邏輯處理的時候，咱們建議使用計算屬性

　　　　1:基礎例子

　　　　

　　　　建立了一個根節點，咱們如今給其掛載實例

　　　　

　　　　明確觀點,  fullname 在調用時爲屬性

　　　　如今咱們能夠看到頁面有一個輸入框，受v-model雙向綁定影響，框內會呈現 lastName 的屬性值。咱們須要明確一點，雖然 fullname 相似方法，但實際上它是一個屬性（所以按照屬性使用放在模板語法中），只是沒有定義在 data 中。fullname 的值收到 firstName 和 lastName 影響，當咱們改變 lastName 的值時，頁面上的 fullname 也發生了變化。

 

　　　　2:  不使用計算屬性,使用方法進行改寫

　　　　

　　　　借用上面的代碼，咱們能夠將 Anotherfullname 綁定在頁面上，也能夠呈現出和計算屬性同樣的效果。咱們能夠將同一函數定義爲一個方法而不是一個計算屬性。兩種方式的最終結果確實是徹底相同的。然而，不一樣的是計算屬性是基於它們的依賴進行緩存的。只在相關依賴發生改變時它們纔會從新求值。

　　　　注意!!!

　　　　..就是說函數,每次刷新都話在次執行. 而計算屬性,不會從新加載

　　　　

 

 

　　　　3 :計算屬性的getter 和setter

　　　　vue 官網文檔解釋

　　　　

 

 　　　　個人解釋:

計算屬性默認只有 getter 函數，用來獲取新值。當咱們不明確的寫出他們的時候，僅作方法寫(如上例子)，就只利用了 getter 函數。須要使用 setter 的話，咱們要明確寫出。

　　　　

 

 　　　　getter 函數明確的獲取了其依賴的兩個屬性，而後處理返回。當咱們要設置 fullname 的屬性值時，會觸發 setter 屬性，參數 value 是咱們設置的內容，例子中，setter 被調用後，相應的：vm 的 firstName 和 lastName 也會發生改變。

 　　二:偵聽器的使用:

　　　　　

　　　　　　雖然計算屬性在大多數狀況下更合適，但有時也須要一個自定義的偵聽器。這就是爲何 Vue 經過 watch 選項提供了一個更通用的方法，來響應數據的變化。當須要在數據變化時執行異步或開銷較大的操做時，這個方式是最有用的。

　　　　　　watch 始終監視着你寫在裏面的屬性，當它發生變化的時候，就會執行你提早寫好的邏輯處理。咱們來看用計算屬性實現的例子，如何被 watch 實現。

　　　　使用watch 實現時間偵聽

　　　　

　　　　　　wtach 監視着 lastName 這個屬性，當咱們修改 input 框，致使 data 中的 lastName 變化的時候，觸發了 watch，執行對應的邏輯。