忙了一晚上用CompositionAPI征服產品妹子花裏胡哨的需求

下午正在看咱們組大帥老溼寫的composition 動畫演示的文章。前端

就有一個產品小姐姐找我，單聊。api

1、花裏胡哨的需求

第一天：產品妹子突發奇想，讓我把按鈕字體隨機變色。

兩個小時後：產品妹子又說是否是按鈕的背景也能夠隨機變色。

兩分鐘後：產品妹子又說兩個按鈕的變色頻率是否是能夠不同，或者隨心組合。 markdown
我就問他要不要按照手機殼變色呢app
產品妹子說那樣可能會被大家暴打。less

2、解決思路

這個需求看起來花裏胡哨實際上核心的邏輯只有一個就是隨機變色。dom

至於後面提出的變態的變色頻率自定需求能夠考慮將邏輯函數升階爲函數工廠的方式解決。

難度在實現複雜的邏輯組合時很難保證代碼的耦合度。這也是Vue2的一個明顯的缺點。React在使用Hooks後這個問題得以很好的解決。

1. OptionAPI的不足

1.1 煩人反覆橫跳

在傳統的Vue OptionsAPI中，新增或者修改一個需求，就須要分別在data，methods，computed裏修改，滾動條反覆上下移動，我稱之爲『反覆橫跳』

1.2 Mixin與繼承之殤

想象一下若是咱們想在全部的組件中都實現這樣的花裏胡哨的需求，又要考慮代碼的耦合度。咱們首先想到的是

Mixins
高階組件 (Higher-order Components, aka HOCs)
Renderless Components (基於 scoped slots / 做用域插槽封裝邏輯的組件

但三者都不是很是的理想，主要問題存在

模板數據來源不清晰, 譬如mixin光看模板很難分清一個屬性是哪裏來的。
命名空間衝突
性能問題。譬如HOC須要額外的組件邏輯嵌套會致使無謂的性能開銷。

2. CompositionAPI橫空出世

composition就是爲了解決這個問題存在的，經過組合的方式，把零散在各個data，methods的代碼，從新組合，一個功能的代碼都放在一塊兒維護，而且這些代碼能夠單獨拆分紅函數。

3、代碼實現

編寫一個變色的複合API工廠首先將變色邏輯封裝在一個複合API工廠中，這個API能夠還能夠保證用參數控制變色範圍，和變色頻率。你要怎麼變我就怎麼變。

function useColor(type, time) {
 const state = reactive({  color: '#000000'  })  onMounted(() => {  setInterval(() => {  const r = type === 'r' ? Math.floor(Math.random() * 255).toString(16) : '00'  const g = type === 'g' ? Math.floor(Math.random() * 255).toString(16) : '00'  const b = type === 'b' ? Math.floor(Math.random() * 255).toString(16) : '00'  var color =  `#${ r + g + b}`  state.color = color  }, time)  })  return toRefs(state) }  複製代碼

根據需求組裝視圖組件

咱們只須要根據產品小姐姐的需求，調用原有的變色API去組裝就能夠了，你要怎樣就怎樣。因爲輸出的數據自己仍是響應式的，其實你即便組合後也能夠是響應式的。因此幾乎是隨心而變。

const MyComponent = {
 template: `<button type="button" class="el-button" :style="{ background,color }"><span>按鈕</span></button>`,  setup() {  const {  color  } = useColor('r', 100)  const {  color: background  } = useColor('b', 1000)  return {  color,  background  }  } } createApp(MyComponent).mount('#app') 複製代碼

4、總結

CompositionAPI我認爲是Vue3中最香的功能，可讓咱們的邏輯自由的組合。

本文使用 mdnice 排版

這是咱們團隊的開源項目 element3
一個支持 vue3 的前端組件庫