在 Vue 的使用過程中會遇到各種場景，當普通使用時覺得沒什么，但是或許優(yōu)化一下可以更高效更優(yōu)美地進行開發(fā)。下面有一些我在日常開發(fā)的時候用到的小技巧。

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

1.1 一般情況

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

mounted()?{
??setTimeout(()?=>?window.onresize?=?()?=>?{
????this.$refs.chart1.chartWrapperDom.resize()
????this.$refs.chart2.chartWrapperDom.resize()
????//?...?
??},?200)
destroyed()?{?window.onresize?=?null?}

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

1.2 優(yōu)化

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

computed:?{
??/**
???*?圖表DOM
???*/
??chartWrapperDom()?{
????const?dom?=?document.getElementById('consume-analy-chart-wrapper')
????return?dom?&&?Echarts.init(dom)
??},
??/**
???*?圖表resize節(jié)流，這里使用了lodash，也可以自己使用setTimout實現(xiàn)節(jié)流
???*/
??chartResize()?{
????return?_.throttle(()?=>?this.chartWrapperDom?&&?this.chartWrapperDom.resize(),?400)
??}
},
mounted()?{
??window.addEventListener('resize',?this.chartResize)
},
destroyed()?{
??window.removeEventListener('resize',?this.chartResize)
}

1.3 再次優(yōu)化

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

import?Echarts?

然后在每個 chart 組件中：

其實通過配置 transformToRequire 后，就可以直接配置，這樣 vue-loader 會把對應的屬性自動 require 之后傳給組件。

{
??vue:?{
????transformToRequire:?{
??????avatar:?['default-src']
????}
??}
}

于是我們代碼就可以簡化不少。

<div><avatar?default-src="./assets/default-avatar.png">avatar>div>
</template>

在 vue-cli 的 webpack 模板下，默認配置是：

transformToRequire:?{
??video:?['src',?'poster'],
??source:?'src',
??img:?'src',
??image:?'xlink:href'
}

可以舉一反三進行一下類似的配置。

vue-loader 還有很多實用的 API 例如最近加入的 自定義塊，感興趣的各位可以去文檔里找找看。

8. render 函數(shù)

在某些場景下你可能需要 render 渲染函數(shù)帶來的完全編程能力來解決不太容易解決的問題，特別是要動態(tài)選擇生成標簽和組件類型的場景。

8.1 動態(tài)標簽

(1)一般情況

比如根據(jù) props 來生成標簽的場景。

<div><div?v-if="level?===?1">?<slot>slot>?div><p?v-else-if="level?===?2">?<slot>slot>?p><h1?v-else-if="level?===?3">?<slot>slot>?h1><h2?v-else-if="level?===?4">?<slot>slot>?h2><strong?v-else-if="level?===?5">?<slot>slot>?stong><textarea?v-else-if="level?===?6">?<slot>slot>?textarea>div>
</template>

其中 level 是 data 中的變量，可以看到這里有大量重復代碼，如果邏輯復雜點，加上一些綁定和判斷就更復雜了，這里可以利用 render 函數(shù)來對要生成的標簽加以判斷。

(2)優(yōu)化

使用 render 方法根據(jù)參數(shù)來生成對應標簽可以避免上面的情況。

<div><child?:level="level">Hello?world!child>div>
</template>

示例可以查看 CodePen(https://codepen.io/SHERlocked93/pen/mLEJPE)。

8.2 動態(tài)組件

當然 render 函數(shù)還有很多用法，比如要使用動態(tài)組件，除了使用 :is 之外也可以使用 render 函數(shù)。

<div><button?@click='level?=?0'>嘻嘻button><button?@click='level?=?1'>哈哈button><hr><child?:level="level">child>div>template>

總結(jié)

以上是生活随笔為你收集整理的uni-app中使用lodash_Vue 使用中的小技巧的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。