vue前端重構(gòu)computed及watch組件通信等實(shí)用技巧整理
基于 springboot+vue 的測(cè)試平臺(tái)開發(fā)
繼續(xù)更新
當(dāng)前項(xiàng)目進(jìn)度的前端重構(gòu)已經(jīng)完成了，在重構(gòu)之余也對(duì)一些交互做了優(yōu)化等。在本次的重構(gòu)過程中感覺還是有不少收獲，尤其是對(duì)于一些vue的前端知識(shí)的應(yīng)用。
今天不做具體的開發(fā)記錄分享，整理一下過程中用到的一些vue知識(shí)點(diǎn)，結(jié)合實(shí)際項(xiàng)目代碼舉例，方便后續(xù)回顧，也供有需要的童鞋參考。
主要可以分為 2 個(gè)大類：常規(guī)的、組件通信相關(guān)。
一、常規(guī)知識(shí)點(diǎn)
1.mounted 與 created
mounted 和 created 這兩個(gè)都是 vue 生命周期中的鉤子函數(shù)。在實(shí)際開發(fā)中，通常用來做一些初始化的事情，比如訂閱一個(gè)消息、綁定一個(gè)自定義事件、發(fā)送一個(gè)http請(qǐng)求等等。
再通俗一點(diǎn)講，比如有些事情是我一上來就要做的，就可以放在這里去執(zhí)行。
但是要注意這兩者存在的區(qū)別：
created: 在模板渲染成html前調(diào)用，這時(shí)候?yàn)g覽器雖然解析dom、css、js，
mounted：在模板渲染成html后調(diào)用
拿項(xiàng)目中的代碼舉例：
- 使用 created
有一個(gè)列表頁，里面的數(shù)據(jù)是通過后端接口返回的，我希望列表一上來就能自動(dòng)展示數(shù)據(jù)，所以我自然要先去做后端的接口請(qǐng)求的。
- 使用 mounted
再比如，我抽離出來的一個(gè)組件，我希望組件只要準(zhǔn)備好了就要給自身綁定一個(gè)事件 clear，以便其他組件隨時(shí)調(diào)用這個(gè)事件。
如果你的操作不涉及要操作一些dom，那么就可以放在 created 里去做，這時(shí)候 data 里的數(shù)據(jù)是可以訪問的。反之就只能放在 mounted 里，因?yàn)橹挥袖秩就瓿闪?，你才能操作dom。
2. 計(jì)算屬性 computed
如果你有要使用的一些屬性不存在，而需要你通過已有屬性進(jìn)一步運(yùn)算得來，那么推薦使用計(jì)算屬性。
實(shí)際代碼舉例：
我在vuex(后面會(huì)講到)中有一些重要的屬性需要獲取到值，為我當(dāng)前組件使用。但是直接獲取的表達(dá)式又臭又長(zhǎng)，在這個(gè)組件里我要復(fù)用很多次，我想簡(jiǎn)潔點(diǎn)，那我就可以定義一個(gè)計(jì)算熟悉來使用。
這里我定義了一個(gè)計(jì)算屬性叫needRefreshList，因?yàn)橛?jì)算屬性最終出現(xiàn)在vm上，那么我在模板里可以直接needRefreshList使用。而在一些其他方法里也可以通過this.needRefreshList來獲取。
這里注意的是，上圖中的是一個(gè)完整的寫法，有get和set方法，干什么用：
get：初次讀取的時(shí)候、以及依賴的數(shù)據(jù)發(fā)生變化的時(shí)候執(zhí)行。
set：如果計(jì)算屬性需要被修改，只能通過set函數(shù)去修改。而且set函數(shù)中還要去改依賴的數(shù)據(jù)才可以。
如果只用獲取而不需要去更改，則可以使用簡(jiǎn)寫方式。
通常來說，使用method方法也可以做到這個(gè)結(jié)果。但是，computed有這vue內(nèi)部的緩存機(jī)制，效率更高，調(diào)試也方便。
3. 監(jiān)視屬性 watch
顧名思義，監(jiān)視屬性可以用來監(jiān)視屬性的變化。當(dāng)被監(jiān)視的屬性變化時(shí)，自動(dòng)調(diào)用回調(diào)函數(shù)，進(jìn)行你的一些相關(guān)操作。
還是拿上面的計(jì)算屬性needRefreshList繼續(xù)舉例。
我在 watch 里監(jiān)視了屬性needRefreshList，這個(gè)屬性是我用來標(biāo)記是否需要刷新列表用的，所以我要關(guān)注needRefreshList值的變化，當(dāng)產(chǎn)生變動(dòng)的時(shí)候，就去執(zhí)行handler()方法里的事情。
上圖這里也是一個(gè)完整寫法，還看到了immediate和deep:
immediate: 立即的意思，初始化的時(shí)候立馬就調(diào)用一次。
deep: 深度監(jiān)視，如果你監(jiān)視的屬性是一個(gè)對(duì)象，里面可能還有多個(gè)層級(jí)，只要里面任何層級(jí)的值有變動(dòng)你都要知道，那么deep：true 即可。
如果上面這2個(gè)配置項(xiàng)你用不到，那么就可以使用簡(jiǎn)寫方式。
二、組件通信相關(guān)
剩下的就是本次重構(gòu)中用到的重點(diǎn)知識(shí)了，都是圍繞著組件之間通信來的。
首先，通過一個(gè)圖說明一下各組件之間的關(guān)系。
A 是最外層的父組件，里面包含了2個(gè)子組件 B 和 CB 和 C 是兄弟組件C 中 又包含了一個(gè)子組件 D
1. 父組件給子組件傳遞
比如，父組件 C 中要給子組件 D 傳值(或者方法)，這里使用props來傳遞。
首先，在父組件綁定要傳遞的數(shù)據(jù)，比如這里current-tab-name和current-data。
然后，在子組件中使用props來定義要接收屬性。
2. 子組件給父組件傳值
通過在父組件中綁定一個(gè)自定義事件，然后通過事件的方法接收參數(shù)，最終由子組件調(diào)用這個(gè)方法，并且把參數(shù)傳遞過來。
這里在父組件中綁定了自定義事件@getArgInfo，事件觸發(fā)的getArgInfo方法：
子組件中通過$emit來調(diào)用getArgInfo方法，并且發(fā)送要傳遞的值。
3. 任意組件之間傳值
如果B 和 C 這種兄弟組件也有東西要傳遞，通?？梢允褂?種方法：全局事件總線，消息發(fā)布與訂閱。
消息發(fā)布與訂閱我并沒有使用，因?yàn)橥ㄟ^安裝三方的js庫來實(shí)現(xiàn)。這里我就直接使用了vue原生的全局事件總線的方式。
首先開啟全局事件總線的配置，在main.js中添加。
接著，在需要接收數(shù)據(jù)的組件上綁定一個(gè)全局事件，通過使用this.$bus.$on，圖中的getModule即事件名稱，data接收傳遞來的數(shù)據(jù)。
最后，在發(fā)送數(shù)據(jù)的組件上使用這個(gè)全局事件，通過this.$bus.$emit，傳入要發(fā)送的事件名稱，帶上要發(fā)送的數(shù)據(jù)。
4. vuex
vuex的定義：專門在 Vue 中實(shí)現(xiàn)集中式狀態(tài)(數(shù)據(jù))管理的一個(gè) Vue 插件，對(duì) vue 應(yīng) 用中多個(gè)組件的共享狀態(tài)進(jìn)行集中式的管理(讀/寫)，也是一種組件間通信的方 式，且適用于任意組件間通信。
簡(jiǎn)單來說，什么時(shí)候用這個(gè)vuex：
多個(gè)組件依賴于同一狀態(tài)來自不同組件的行為需要變更同一狀態(tài)
原理圖是這樣：
在項(xiàng)目中的位置和結(jié)構(gòu)是這樣的：
注意在項(xiàng)目的前端腳手架中，vuex 是在store這個(gè)模塊中使用。
state
這里記錄了 vuex 管理的狀態(tài)對(duì)象。
actions
值為一個(gè)對(duì)象，包含多個(gè)響應(yīng)用戶動(dòng)作的回調(diào)函數(shù)。通過commit()來觸發(fā)mutation中函數(shù)的調(diào)用，間接更新state。
在組件中使用$store.dispatch('對(duì)應(yīng)的 action 回調(diào)名') 觸發(fā)。
不過在實(shí)際應(yīng)用中，如果我只是為了直接修改state，而不用加一些邏輯判斷條件后才去修改state，那就可以直接繞開action，直接調(diào)用mutations里的方法。
目前項(xiàng)目中actions就是空的，我在代碼中直接調(diào)用mutations:
mutations
值是一個(gè)對(duì)象，包含多個(gè)直接更新 state 的方法，供actions里調(diào)用。
mutations中方法的特點(diǎn)：不能寫異步代碼、只能單純的操作 state。
getters
這里還有一個(gè)非必須配置項(xiàng)getters，值也是一個(gè)對(duì)象，包含多個(gè)用于返回?cái)?shù)據(jù)的函數(shù)。
什么時(shí)候用呢？
比如說 state 中的某個(gè)屬性值，你需要依賴它然后進(jìn)一步做計(jì)算處理，而且這個(gè)處理后的值很多組件都會(huì)用到，那么就可以使用getters配置項(xiàng)來處理。
這是腳手架里統(tǒng)一存放的位置，也可以跟上面的actions等寫在一個(gè)文件中。
最后，要對(duì)外暴露這些屬性才可以，腳手架中vuex的配置處理在這里：
以上就是vue前端重構(gòu)computed及watch組件通信等實(shí)用技巧整理的詳細(xì)內(nèi)容，更多關(guān)于vue組件computed watch的資料請(qǐng)關(guān)注腳本之家其它相關(guān)文章！
相關(guān)文章
本文給大家介紹Vue3中setup()函數(shù)中聲明變量的幾種方法,希望本文能夠幫助你更好地理解Vue3的開發(fā)方式,感興趣的朋友跟隨小編一起看看吧2023-11-11
這篇文章主要為大家詳細(xì)介紹了Vue實(shí)現(xiàn)驗(yàn)證碼功能，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2019-12-12
這篇文章主要介紹了vue中的slot與slot-scope的相關(guān)知識(shí)，非常不錯(cuò)，具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2019-04-04
vscode中eslint配置保存自動(dòng)修復(fù)代碼示例詳解
vscode根據(jù)eslint保存?動(dòng)修復(fù)配置,下面這篇文章主要給大家介紹了關(guān)于vscode中eslint配置保存自動(dòng)修復(fù)代碼的相關(guān)資料,文中通過圖文介紹的非常詳細(xì),需要的朋友可以參考下2023-12-12
這篇文章主要介紹了詳解vue-router 命名路由和命名視圖,小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2018-06-06
Vue實(shí)現(xiàn)簡(jiǎn)易計(jì)算器
這篇文章主要為大家詳細(xì)介紹了用Vue制作的簡(jiǎn)易計(jì)算器，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2020-02-02
Vue.js中NaiveUI組件文字漸變的實(shí)現(xiàn)
這篇文章主要介紹了Vue.js中NaiveUI組件文字漸變的實(shí)現(xiàn)，文章圍繞主題展開詳細(xì)的內(nèi)容介紹，具有一定的參考價(jià)值，需要的小伙伴可以參考一下2022-07-07
這篇文章主要為大家詳細(xì)介紹了vue中路由傳參6種方式，文中的示例代碼講解詳細(xì)，具有一定的學(xué)習(xí)價(jià)值，感興趣的小伙伴可以跟隨小編一起了解一下2023-08-08
src/main.js是入口文件,主要作用是初始化vue實(shí)例并使用需要的插件, Vue.use()的作用就是讓它里面被注冊(cè)的組件能夠被全局使用,本文通過實(shí)例代碼介紹vue項(xiàng)目中main.js的用法,感興趣的朋友一起看看吧2023-10-10
Vue router錯(cuò)誤跳轉(zhuǎn)到首頁("/")的問題及解決
這篇文章主要介紹了Vue router錯(cuò)誤跳轉(zhuǎn)到首頁("/")的問題及解決方案,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2023-10-10