忙了一晚上用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 的前端组件库