您好,登錄后才能下訂單哦!
這篇文章主要介紹“vue前端重構(gòu)computed及watch組件通信怎么使用”,在日常操作中,相信很多人在vue前端重構(gòu)computed及watch組件通信怎么使用問題上存在疑惑,小編查閱了各式資料,整理出簡單好用的操作方法,希望對大家解答”vue前端重構(gòu)computed及watch組件通信怎么使用”的疑惑有所幫助!接下來,請跟著小編一起來學(xué)習(xí)吧!
繼續(xù)更新
當(dāng)前項(xiàng)目進(jìn)度的前端重構(gòu)已經(jīng)完成了,在重構(gòu)之余也對一些交互做了優(yōu)化等。在本次的重構(gòu)過程中感覺還是有不少收獲,尤其是對于一些vue的前端知識的應(yīng)用。
今天不做具體的開發(fā)記錄分享,整理一下過程中用到的一些vue知識點(diǎn),結(jié)合實(shí)際項(xiàng)目代碼舉例,方便后續(xù)回顧,也供有需要的童鞋參考。
主要可以分為 2 個大類:常規(guī)的、組件通信相關(guān)。
mounted 和 created 這兩個都是 vue 生命周期中的鉤子函數(shù)。在實(shí)際開發(fā)中,通常用來做一些初始化的事情,比如訂閱一個消息、綁定一個自定義事件、發(fā)送一個http請求等等。
再通俗一點(diǎn)講,比如有些事情是我一上來就要做的,就可以放在這里去執(zhí)行。
但是要注意這兩者存在的區(qū)別:
created
: 在模板渲染成html前調(diào)用,這時候?yàn)g覽器雖然解析dom、css、js,
mounted
:在模板渲染成html后調(diào)用
拿項(xiàng)目中的代碼舉例:
使用 created
有一個列表頁,里面的數(shù)據(jù)是通過后端接口返回的,我希望列表一上來就能自動展示數(shù)據(jù),所以我自然要先去做后端的接口請求的。
使用 mounted
再比如,我抽離出來的一個組件,我希望組件只要準(zhǔn)備好了就要給自身綁定一個事件 clear,以便其他組件隨時調(diào)用這個事件。
如果你的操作不涉及要操作一些dom,那么就可以放在 created 里去做,這時候 data 里的數(shù)據(jù)是可以訪問的。反之就只能放在 mounted 里,因?yàn)橹挥袖秩就瓿闪耍悴拍懿僮鱠om。
如果你有要使用的一些屬性不存在,而需要你通過已有屬性進(jìn)一步運(yùn)算得來,那么推薦使用計算屬性。
實(shí)際代碼舉例:
我在vuex(后面會講到)中有一些重要的屬性需要獲取到值,為我當(dāng)前組件使用。但是直接獲取的表達(dá)式又臭又長,在這個組件里我要復(fù)用很多次,我想簡潔點(diǎn),那我就可以定義一個計算熟悉來使用。
這里我定義了一個計算屬性叫needRefreshList
,因?yàn)橛嬎銓傩宰罱K出現(xiàn)在vm上,那么我在模板里可以直接needRefreshList
使用。而在一些其他方法里也可以通過this.needRefreshList
來獲取。
這里注意的是,上圖中的是一個完整的寫法,有get
和set
方法,干什么用:
get:初次讀取的時候、以及依賴的數(shù)據(jù)發(fā)生變化的時候執(zhí)行。
set:如果計算屬性需要被修改,只能通過set函數(shù)去修改。而且set函數(shù)中還要去改依賴的數(shù)據(jù)才可以。
如果只用獲取而不需要去更改,則可以使用簡寫方式。
通常來說,使用method方法也可以做到這個結(jié)果。但是,computed有這vue內(nèi)部的緩存機(jī)制,效率更高,調(diào)試也方便。
顧名思義,監(jiān)視屬性可以用來監(jiān)視屬性的變化。當(dāng)被監(jiān)視的屬性變化時,自動調(diào)用回調(diào)函數(shù),進(jìn)行你的一些相關(guān)操作。
還是拿上面的計算屬性needRefreshList
繼續(xù)舉例。
我在 watch 里監(jiān)視了屬性needRefreshList
,這個屬性是我用來標(biāo)記是否需要刷新列表用的,所以我要關(guān)注needRefreshList
值的變化,當(dāng)產(chǎn)生變動的時候,就去執(zhí)行handler()
方法里的事情。
上圖這里也是一個完整寫法,還看到了immediate
和deep
:
immediate
: 立即的意思,初始化的時候立馬就調(diào)用一次。
deep
: 深度監(jiān)視,如果你監(jiān)視的屬性是一個對象,里面可能還有多個層級,只要里面任何層級的值有變動你都要知道,那么deep:true
即可。
如果上面這2個配置項(xiàng)你用不到,那么就可以使用簡寫方式。
剩下的就是本次重構(gòu)中用到的重點(diǎn)知識了,都是圍繞著組件之間通信來的。
首先,通過一個圖說明一下各組件之間的關(guān)系。
A 是最外層的父組件,里面包含了2個子組件 B 和 CB 和 C 是兄弟組件C 中 又包含了一個子組件 D
比如,父組件 C 中要給子組件 D 傳值(或者方法),這里使用props
來傳遞。
首先,在父組件綁定要傳遞的數(shù)據(jù),比如這里current-tab-name
和current-data
。
然后,在子組件中使用props
來定義要接收屬性。
通過在父組件中綁定一個自定義事件,然后通過事件的方法接收參數(shù),最終由子組件調(diào)用這個方法,并且把參數(shù)傳遞過來。
這里在父組件中綁定了自定義事件@getArgInfo
,事件觸發(fā)的getArgInfo
方法:
子組件中通過$emit
來調(diào)用getArgInfo
方法,并且發(fā)送要傳遞的值。
如果B 和 C 這種兄弟組件也有東西要傳遞,通??梢允褂?種方法:全局事件總線,消息發(fā)布與訂閱。
消息發(fā)布與訂閱我并沒有使用,因?yàn)橥ㄟ^安裝三方的js庫來實(shí)現(xiàn)。這里我就直接使用了vue原生的全局事件總線的方式。
首先開啟全局事件總線的配置,在main.js
中添加。
接著,在需要接收數(shù)據(jù)的組件上綁定一個全局事件,通過使用this.$bus.$on
,圖中的getModule
即事件名稱,data
接收傳遞來的數(shù)據(jù)。
最后,在發(fā)送數(shù)據(jù)的組件上使用這個全局事件,通過this.$bus.$emit
,傳入要發(fā)送的事件名稱,帶上要發(fā)送的數(shù)據(jù)。
vuex的定義:專門在 Vue 中實(shí)現(xiàn)集中式狀態(tài)(數(shù)據(jù))管理的一個 Vue 插件,對 vue 應(yīng) 用中多個組件的共享狀態(tài)進(jìn)行集中式的管理(讀/寫),也是一種組件間通信的方 式,且適用于任意組件間通信。
簡單來說,什么時候用這個vuex:
多個組件依賴于同一狀態(tài)來自不同組件的行為需要變更同一狀態(tài)
原理圖是這樣:
在項(xiàng)目中的位置和結(jié)構(gòu)是這樣的:
注意在項(xiàng)目的前端腳手架中,vuex 是在store
這個模塊中使用。
state
這里記錄了 vuex 管理的狀態(tài)對象。
actions
值為一個對象,包含多個響應(yīng)用戶動作的回調(diào)函數(shù)。通過commit()
來觸發(fā)mutation
中函數(shù)的調(diào)用,間接更新state
。
在組件中使用$store.dispatch('對應(yīng)的 action 回調(diào)名')
觸發(fā)。
不過在實(shí)際應(yīng)用中,如果我只是為了直接修改state,而不用加一些邏輯判斷條件后才去修改state,那就可以直接繞開action
,直接調(diào)用mutations
里的方法。
目前項(xiàng)目中actions
就是空的,我在代碼中直接調(diào)用mutations
:
mutations
值是一個對象,包含多個直接更新 state 的方法,供actions
里調(diào)用。
mutations
中方法的特點(diǎn):不能寫異步代碼、只能單純的操作 state。
getters
這里還有一個非必須配置項(xiàng)getters
,值也是一個對象,包含多個用于返回數(shù)據(jù)的函數(shù)。
什么時候用呢?
比如說 state 中的某個屬性值,你需要依賴它然后進(jìn)一步做計算處理,而且這個處理后的值很多組件都會用到,那么就可以使用getters
配置項(xiàng)來處理。
這是腳手架里統(tǒng)一存放的位置,也可以跟上面的actions
等寫在一個文件中。
最后,要對外暴露這些屬性才可以,腳手架中vuex的配置處理在這里:
到此,關(guān)于“vue前端重構(gòu)computed及watch組件通信怎么使用”的學(xué)習(xí)就結(jié)束了,希望能夠解決大家的疑惑。理論與實(shí)踐的搭配能更好的幫助大家學(xué)習(xí),快去試試吧!若想繼續(xù)學(xué)習(xí)更多相關(guān)知識,請繼續(xù)關(guān)注億速云網(wǎng)站,小編會繼續(xù)努力為大家?guī)砀鄬?shí)用的文章!
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點(diǎn)不代表本網(wǎng)站立場,如果涉及侵權(quán)請聯(lián)系站長郵箱:is@yisu.com進(jìn)行舉報,并提供相關(guān)證據(jù),一經(jīng)查實(shí),將立刻刪除涉嫌侵權(quán)內(nèi)容。