成都網(wǎng)站建設(shè)：Vue使用中的小技巧

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

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

1.1 一般情況

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

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

1.2 優(yōu)化

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

1.3 再次優(yōu)化

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

然后在每個(gè) chart 組件中：

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

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

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

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

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

廣告

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