在 Vue 的使用過程中會遇到各種場景，當(dāng)普通使用時覺得沒什么，但是優(yōu)化一下可以更高效更優(yōu)美地進行開發(fā)。接下來就由石家莊網(wǎng)站建設(shè)工程師給大家分享Vue使用時的小技巧吧。

　　1. 多圖表resize事件去中心化

　　1.1 一般情況

　　有時候我們會遇到這樣的場景，一個組件中有幾個圖表，在瀏覽器 resize 的時候我們希望圖表也進行 resize，因此我們會在 父容器組件中寫：

　　這樣子圖表組件如果跟父容器組件不在一個頁面，子組件的狀態(tài)就被放到父組件進行管理。為了維護方便，我們自然希望子組件的事件和狀態(tài)由自己來維護，這樣在添加刪除組件的時候就不需要去父組件挨個修改。

　　1.2 優(yōu)化

　　這里使用了 lodash 的節(jié)流 throttle 函數(shù)，也可以自己實現(xiàn)，這篇文章也有節(jié)流的實現(xiàn)可以參考一下。以 Echarts 為例，在每個圖表組件中：

　　1.3 再次優(yōu)化

　　這里因為多個 chart 實例都使用同一套初始化邏輯，可以使用 extends 來考慮復(fù)用，因此我想到了 Vue 提供的 Mixins，所以我在這里做了點優(yōu)化，可以讓每個同類型的 chart 組件更優(yōu)雅一點，新建一個 mixin.js 文件：

　　然后在每個 chart 組件中：

　　這樣就可以在每個圖表組件中混入之前在 mixin.js 中定義的 resize 事件邏輯，且自動初始化，并在 destroyed 的時候自動銷毀事件。

　　當(dāng)然可以進一步優(yōu)化一下，比如一個頁面有多個圖表的話，上面的代碼就不能滿足了，這里需要重構(gòu)一下，具體代碼可以參照 chartInitMixin - GitHub 的實現(xiàn)。

　　以上關(guān)于Vue 使用中的小技巧屬石家莊網(wǎng)站建設(shè)工程師的個人觀點，大家如果對此有著不同的見解，可以關(guān)注公眾號“尚武科技派”給我留言，大家可以交流一下自己的心德體會，共同學(xué)習(xí)進步。