5個(gè)Vue開(kāi)發(fā)小技巧

2020.01.31

下面我們來(lái)看一些vue開(kāi)發(fā)小技巧：

一、狀態(tài)共享

使用Vue進(jìn)行開(kāi)發(fā)時(shí)，隨著項(xiàng)目的復(fù)雜化，組件個(gè)數(shù)也逐漸增加，此時(shí)我們就面臨著一個(gè)問(wèn)題——多組件狀態(tài)共享。也許有人說(shuō)這不是啥問(wèn)題，Vuex就可以解決啊。

是的，Vuex可以解決多組件狀態(tài)共享的問(wèn)題，但是如果此時(shí)我們的項(xiàng)目沒(méi)有那么大那么復(fù)雜，還要使用Vuex來(lái)解決這個(gè)問(wèn)題嗎？答案是否定的，因?yàn)檫@會(huì)導(dǎo)致代碼繁瑣冗余。

那該怎么辦？其實(shí)我們還可以通過(guò)vue.js2.6版本新增的Observable API來(lái)解決這個(gè)問(wèn)題。

示例1：Observable實(shí)現(xiàn)多組件狀態(tài)共享

a) 創(chuàng)建一個(gè) store.js，包含一個(gè)store和一個(gè)mutations，分別用來(lái)指向數(shù)據(jù)和處理方法。

b) 在 App.vue里面引入這個(gè) store.js，使用引入的數(shù)據(jù)和方法。

二、長(zhǎng)列表性能優(yōu)化

Vue會(huì)通過(guò)劫持我們的數(shù)據(jù)，進(jìn)而實(shí)現(xiàn)視圖響應(yīng)數(shù)據(jù)的變化。但有時(shí)候我們的數(shù)據(jù)不需要發(fā)生變化，只是純粹的數(shù)據(jù)展示，此時(shí)Vue再進(jìn)行數(shù)據(jù)劫持會(huì)大大增加組件初始化時(shí)間。此時(shí)我們可以使用object.freeze方法來(lái)阻止vue劫持?jǐn)?shù)據(jù)，進(jìn)而減少組件初始化時(shí)間。

示例2：object.freeze方法凍結(jié)users值

注意：object.freeze方法凍結(jié)的只是users的值，其引用并未被凍結(jié)。

三、作用域插槽

所謂的作用域插槽，就是父組件在調(diào)用子組件時(shí)給子組件傳輸一個(gè)插槽，且該插槽必須放在template標(biāo)簽里邊，同時(shí)聲明從子組件接收的數(shù)據(jù)放在一個(gè)自定義屬性?xún)?nèi)，并定義該數(shù)據(jù)的渲染方式。

那作用域插槽有什么用處呢？

比如項(xiàng)目中有一個(gè)A組件只負(fù)責(zé)布局不管數(shù)據(jù)邏輯，另一個(gè)B組件負(fù)責(zé)數(shù)據(jù)處理，A組件需要數(shù)據(jù)的時(shí)候就去B組件中取。那當(dāng)開(kāi)發(fā)過(guò)程中我們的布局發(fā)生變化時(shí)，我們只需要修改A組件即可，而不需要修改B組件，這樣就能充分復(fù)用B組件的數(shù)據(jù)邏輯處理。

那了解了作用域插槽的用處，接下來(lái)我們通過(guò)一個(gè)簡(jiǎn)單的小例子給大家講解作用域插槽的使用方式。

示例3：使用slot、slot-scope實(shí)現(xiàn)作用域插槽

a) 創(chuàng)建一個(gè)user.vue組件，將user數(shù)據(jù)綁定在<slot>元素上

b) 在父組件中引用 user組件，展示user數(shù)據(jù)的firstName數(shù)據(jù)，此時(shí)給 v-slot帶一個(gè)值來(lái)定義我們提供的插槽 prop 的名字：

四、屬性事件傳遞

學(xué)過(guò)react的同學(xué)應(yīng)該都知道react中的{…this.props}可以一次性傳遞屬性。那在vue中有沒(méi)有這個(gè)功能呢？當(dāng)屬性較多時(shí)，不需要我們一個(gè)個(gè)去傳遞？答案就是vue中的v-bind和v-on。

示例4：v-bind&v-on實(shí)現(xiàn)屬性事件傳遞

BaseList組件只有基礎(chǔ)的列表展示功能，此時(shí)需要為其增加排序功能。

a) 創(chuàng)建一個(gè)高階組件SortList

五、函數(shù)式組件

函數(shù)式組件是一種stateless和instanceless的組件，它內(nèi)部沒(méi)有生命周期處理方式，因而非常輕量，渲染性極高，當(dāng)需要?jiǎng)?chuàng)建的組件只需要根據(jù)外部數(shù)據(jù)的變化而變化時(shí)，就可以將其創(chuàng)建為函數(shù)式組件。

寫(xiě)法如下：

l 在 template標(biāo)簽里面標(biāo)明 functional

l 只接受 props值

l 不需要 script標(biāo)簽

示例5：創(chuàng)建函數(shù)