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

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

1.1 一般情況

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

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

1.2 優(yōu)化

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

1.3 再次優(yōu)化

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

然后在每個 chart 組件中：

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

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

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

文章名稱：成都網站建設：Vue使用中的小技巧
新聞來源：http://www.rwnh.cn/news12/314112.html

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

廣告

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