vue前端重構computed及watch元件通訊等實用技巧整理

基於 springboot+vue 的測試平臺開發

繼續更新

當前專案進度的前端重構已經完成了，在重構之餘也對一些互動做了優化等。在本次的重構過程中感覺還是有不少收穫，尤其是對於一些vue的前端知識的應用。

今天不做具體的開發記錄分享，整理一下過程中用到的一些vue知識點，結合實際專案程式碼舉例，方便後續回顧，也供有需要的童鞋參考。

主要可以分為 2 個大類：常規的、元件通訊相關。

一、常規知識點

1.mounted 與 created

mounted 和 created 這兩個都是 vue 生命週期中的勾點函數。在實際開發中，通常用來做一些初始化的事情，比如訂閱一個訊息、繫結一個自定義事件、傳送一個http請求等等。

再通俗一點講，比如有些事情是我一上來就要做的，就可以放在這裡去執行。

但是要注意這兩者存在的區別：

created: 在模板渲染成html前呼叫，這時候瀏覽器雖然解析dom、css、js，

mounted：在模板渲染成html後呼叫

拿專案中的程式碼舉例：

• 使用 created

有一個列表頁，裡面的資料是通過後端介面返回的，我希望列表一上來就能自動展示資料，所以我自然要先去做後端的介面請求的。

• 使用 mounted

再比如，我抽離出來的一個元件，我希望元件只要準備好了就要給自身繫結一個事件 clear，以便其他元件隨時呼叫這個事件。

如果你的操作不涉及要操作一些dom，那麼就可以放在 created 裡去做，這時候 data 裡的資料是可以存取的。反之就只能放在 mounted 裡，因為只有渲染完成了，你才能操作dom。

2. 計算屬性 computed

如果你有要使用的一些屬性不存在，而需要你通過已有屬性進一步運算得來，那麼推薦使用計算屬性。

實際程式碼舉例：

我在vuex(後面會講到)中有一些重要的屬性需要獲取到值，為我當前元件使用。但是直接獲取的表示式又臭又長，在這個元件裡我要複用很多次，我想簡潔點，那我就可以定義一個計算熟悉來使用。

這裡我定義了一個計算屬性叫needRefreshList，因為計算屬性最終出現在vm上，那麼我在模板裡可以直接needRefreshList使用。而在一些其他方法裡也可以通過this.needRefreshList來獲取。

這裡注意的是，上圖中的是一個完整的寫法，有get和set方法，幹什麼用：

get：初次讀取的時候、以及依賴的資料發生變化的時候執行。

set：如果計算屬性需要被修改，只能通過set函數去修改。而且set函數中還要去改依賴的資料才可以。

如果只用獲取而不需要去更改，則可以使用簡寫方式。

通常來說，使用method方法也可以做到這個結果。但是，computed有這vue內部的快取機制，效率更高，偵錯也方便。

3. 監視屬性 watch

顧名思義，監視屬性可以用來監視屬性的變化。當被監視的屬性變化時，自動呼叫回撥函數，進行你的一些相關操作。

還是拿上面的計算屬性needRefreshList繼續舉例。

我在 watch 裡監視了屬性needRefreshList，這個屬性是我用來標記是否需要重新整理列表用的，所以我要關注needRefreshList值的變化，當產生變動的時候，就去執行handler()方法裡的事情。

上圖這裡也是一個完整寫法，還看到了immediate和deep:

immediate: 立即的意思，初始化的時候立馬就呼叫一次。

deep: 深度監視，如果你監視的屬性是一個物件，裡面可能還有多個層級，只要裡面任何層級的值有變動你都要知道，那麼deep：true 即可。

如果上面這2個設定項你用不到，那麼就可以使用簡寫方式。

二、元件通訊相關

剩下的就是本次重構中用到的重點知識了，都是圍繞著元件之間通訊來的。

首先，通過一個圖說明一下各元件之間的關係。

A 是最外層的父元件，裡面包含了2個子元件 B 和 CB 和 C 是兄弟元件C 中 又包含了一個子元件 D

1. 父元件給子元件傳遞

比如，父元件 C 中要給子元件 D 傳值(或者方法)，這裡使用props來傳遞。

首先，在父元件繫結要傳遞的資料，比如這裡current-tab-name和current-data。

然後，在子元件中使用props來定義要接收屬性。

2. 子元件給父元件傳值

通過在父元件中繫結一個自定義事件，然後通過事件的方法接收引數，最終由子元件呼叫這個方法，並且把引數傳遞過來。

這裡在父元件中繫結了自定義事件@getArgInfo，事件觸發的getArgInfo方法：

子元件中通過$emit來呼叫getArgInfo方法，並且傳送要傳遞的值。

3. 任意元件之間傳值

如果B 和 C 這種兄弟元件也有東西要傳遞，通常可以使用2種方法：全域性事件匯流排，訊息釋出與訂閱。

訊息釋出與訂閱我並沒有使用，因為通過安裝三方的js庫來實現。這裡我就直接使用了vue原生的全域性事件匯流排的方式。

首先開啟全域性事件匯流排的設定，在main.js中新增。

接著，在需要接收資料的元件上繫結一個全域性事件，通過使用this.$bus.$on，圖中的getModule即事件名稱，data接收傳遞來的資料。

最後，在傳送資料的元件上使用這個全域性事件，通過this.$bus.$emit，傳入要傳送的事件名稱，帶上要傳送的資料。

4. vuex

vuex的定義：專門在 Vue 中實現集中式狀態(資料)管理的一個 Vue 外掛，對 vue 應 用中多個元件的共用狀態進行集中式的管理(讀/寫)，也是一種元件間通訊的方 式，且適用於任意元件間通訊。

簡單來說，什麼時候用這個vuex：

多個元件依賴於同一狀態來自不同元件的行為需要變更同一狀態

原理圖是這樣：

在專案中的位置和結構是這樣的：

注意在專案的前端腳手架中，vuex 是在store這個模組中使用。

state

這裡記錄了 vuex 管理的狀態物件。

actions

值為一個物件，包含多個響應使用者動作的回撥函數。通過commit()來觸發mutation中函數的呼叫，間接更新state。

在元件中使用$store.dispatch('對應的 action 回撥名') 觸發。

不過在實際應用中，如果我只是為了直接修改state，而不用加一些邏輯判斷條件後才去修改state，那就可以直接繞開action，直接呼叫mutations裡的方法。

目前專案中actions就是空的，我在程式碼中直接呼叫mutations:

mutations

值是一個物件，包含多個直接更新 state 的方法，供actions裡呼叫。

mutations中方法的特點：不能寫非同步程式碼、只能單純的操作 state。

getters

這裡還有一個非必須設定項getters，值也是一個物件，包含多個用於返回資料的函數。

什麼時候用呢？

比如說 state 中的某個屬性值，你需要依賴它然後進一步做計算處理，而且這個處理後的值很多元件都會用到，那麼就可以使用getters設定項來處理。

這是腳手架裡統一存放的位置，也可以跟上面的actions等寫在一個檔案中。

最後，要對外暴露這些屬性才可以，腳手架中vuex的設定處理在這裡：

以上就是vue前端重構computed及watch元件通訊等實用技巧整理的詳細內容，更多關於vue元件computed watch的資料請關注it145.com其它相關文章！