In the afternoon, I was reading the composition animation demonstration article written by the master Lao Shi of our group.

★ ★ ★ ★ STATION B video synchronization ★ ★ ★ ★ ★ ★ ★

★ ★ ★ Code address ★ ★ ★ ★ ★ ★

Summary of Vue3.0 global launch dry goods

Vue3 new features an understanding

I have a product little sister to talk to me alone.

1. Fancy needs

  • Day 1: The product girl had a whim and asked me to change the button font randomly.

  • Two hours later: the product sister said it was not the background of the button can also be randomly changed color.

  • Two minutes later: the product sister said that the frequency of two buttons can be different, or follow the combination.

  • I asked him if he wanted to change color according to the phone case

  • The product girl said you’d probably beat her up.

Second, the solution

This requirement may seem fancy but the only logic at the heart of it is random color change.

As for the requirement of abnormal color change frequency customization, the logical function can be upgraded to function factory.

Difficulty It is difficult to ensure the coupling of code when implementing complex logical combinations. This is also an obvious drawback of the Vue2. React fixes this problem using Hooks.

1. OptionAPI deficiencies

1.1 Annoying repeated cross jump

In traditional Vue OptionsAPI, to add or modify a requirement, you need to move the scrollbar up and down repeatedly in data, Methods, and computed, which I call “cross-hop repeatedly”.


1.2 Mixin and Inheritance

Imagine if we wanted to implement such a fancy requirement in all components, and consider the coupling of the code. The first thing that comes to mind is

  • Mixins
  • Higher-order Components (aka HOCs)
  • Renderless Components (based on Scoped slots/scope slots encapsulates logical Components

But all three are not very ideal, and there are major problems

  • The source of template data is not clear, such as mixin just looking at the template it is difficult to tell where an attribute comes from.
  • Namespace conflict
  • Performance issues. HOC, for example, requires additional nesting of component logic, resulting in unnecessary performance overhead.

2. CompositionAPI came out of nowhere

Composition is to solve this problem. By means of combination, the codes scattered in various data and methods are recombined, and the codes of a function are maintained together, and these codes can be separately divided into functions.



Three, code implementation

  1. Writing a color-changing compound API factory First encapsulates color-changing logic in a compound API factory. This API can also ensure that the color-changing range and color frequency are controlled with parameters. I’ll be whatever you want me to be.
function useColor(type, time) {
  const state = reactive({
    color: '# 000000'
  })
  onMounted((a)= > {
 setInterval((a)= > {  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) }  Copy the code
  1. Assemble view components as required

We just need to call the original color changing API to assemble according to the needs of the little sister of the product, and you can do whatever you want. Since the output data itself is responsive, you can be responsive even when combined. So it’s almost spontaneous.

const MyComponent = {
  template: '.  setup() {
    const {
      color
 } = useColor('r'.100)  const {  color: background  } = useColor('b'.1000)  return {  color,  background  }  } } createApp(MyComponent).mount('#app') Copy the code

Four,

CompositionAPI is the most fragrant feature of Vue3 in my opinion, allowing us to combine logic freely.


This article is formatted using MDNICE

  • This is our team’s open source project, Element3
  • A front-end component library that supports VUE3