在 Vue 的使用過程中會遇到各種場景，當普通使用時覺得沒什么，但是優(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 來考慮復用，因此我想到了 Vue 提供的 Mixins，所以我在這里做了點優(yōu)化，可以讓每個同類型的 chart 組件更優(yōu)雅一點，新建一個 mixin.js 文件：

然后在每個 chart 組件中：

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

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

以上關(guān)于Vue 使用中的小技巧屬成都網(wǎng)站建設(shè)工程師的個人觀點，大家如果對此有著不同的見解，可以關(guān)注公眾號“創(chuàng)新互聯(lián)派”給我留言，大家可以交流一下自己的心德體會，共同學習進步。

文章名稱：成都網(wǎng)站建設(shè)：Vue使用中的小技巧
新聞來源：http://jinyejixie.com/news12/314112.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供企業(yè)網(wǎng)站制作、Google、面包屑導航、網(wǎng)頁設(shè)計公司、網(wǎng)站維護、手機網(wǎng)站建設(shè)

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源： 創(chuàng)新互聯(lián)