CompositionAPI 用法大杂烩

前端

2023-10-13 01:44:47

开篇：需求突然找上门

下午正在看我们组大帅老湿写的Composition动画演示的文章，产品小姐姐就找我单聊。

第一天

产品妹子突发奇想，让我把按钮字体随机变色。

两个小时后：产品妹子又说，是不是按钮的背景也可以随机变色。

两分钟后：产品妹子又说，两个按钮的变色频率是不是可以不一样…

如此反反复复，从早上的9点到中午12点半，小姐姐一共提出了6个需求。

CompositionAPI场景应用

项目中使用的是 Composition API，它的语法非常清晰，容易上手。想要实现这样的效果，只需要定义一个Composition，并在需要的地方调用即可。

import { ref, watch } from 'vue'

export default {
  setup() {
    const color = ref('red')

    watch(color, (newValue) => {
      // 当颜色发生变化时，执行以下操作
    })

    return {
      color
    }
  }
}

方案分享

根据产品小姐姐的需求，我分别实现了以下功能：

按钮字体随机变色
按钮背景随机变色
两个按钮的变色频率不一样

import { ref, watch } from 'vue'

export default {
  setup() {
    const color1 = ref('red')
    const color2 = ref('blue')

    const interval1 = setInterval(() => {
      color1.value = randomColor()
    }, 1000)

    const interval2 = setInterval(() => {
      color2.value = randomColor()
    }, 2000)

    watch([color1, color2], ([newColor1, newColor2]) => {
      // 当颜色发生变化时，执行以下操作
    })

    return {
      color1,
      color2
    }
  }
}

function randomColor() {
  return '#' + Math.floor(Math.random() * 16777215).toString(16)
}