Vue3 Composition API

What's all the fuzz?

About me

• Norman
• Full-Stack developer and consultant at Wunderdog (Ask me about jobs 😉)
• Uses Vue.js as the weapon of choice since before it was cool
• Organises the Vuejs//Berlin Meetup

So what's the fuzz about?

• What makes the Composition API cool
• What are those Reactive References
• How do methods and computed props work?
• What's this reactive function about?

What's cool about the Composition API?

For this, we need to talk about the limitations of Vue2:

• BigcComponents get less readable
• Current ways to reuse code have drawbacks

😢

Readability issues

• Large components become hard to read because functionalities are spread all over different parts.
• Code cannot be organised by logical concerns

But what about Mixins?

Oh no, he said the M-Word!

Current ways of code reuse

• Mixins
• Mixin Factories
• Scoped Slots

Mixins

✅ Organised by logical concerns

❌ Prone to cause conflicts

❌ Relationships are shady

❌ Reusability is very limited

❌ Implicit Property additions

❌ No access to this

Mixin Factories

✅ (still) Organised by logical concerns

✅ Easily reusable

✅ Clearer relationships

❌ Namespacing works but is hard

❌ Implicit Property additions

❌ Still no access to this

Scoped Slots

✅ Organised by logical concerns

✅ Solves most of the issues with Mixins

❌ Moves configuration into template

❌ Hard to reach from the code

❌ Performance might become an issue (because more components)

😭

Composition API benefits

✅ the config is now in our component code

✅ Solves all of the issues with Mixins

import useCoolStuff from '@my/cool-stuff'
import useFunctionality from '@my/functionality'

export default {
  setup () {
    const coolStuff = useCoolStuff({/* config */})
    const actualStuff = useFunctionality({/* config */})

    return { coolStuff, actualStuff }
  }
}

Composition API benefits

✅ It's just a function that provides the scope for the template

<template>
  <h1>Hello {{ toWhom }}!</h1>
</template>

<script>
  export default {
    setup () {
      return { toWhom: "World" }
    }
  }
</script>

Composition API

Okay, better make this reactive

<template>
  <h1>Hello {{ toWhom }}!</h1>
</template>

<script>
  import { ref } from 'vue'

  export default {
    setup () {
      const toWhom = ref("World") // reactive string
      return { toWhom }
    }
  }
</script>

Composition API

Lets add an input field:

<template>
  <h1>Hello {{ toWhom }}!</h1>
  <input v-model="toWhom" />
</template>

<script>
  import { ref } from 'vue'

  export default {
    setup () {
      const toWhom = ref("World")
      return { toWhom }
    }
  }
</script>

edit in codesandbox

Composition API

But this should be a computed value!

<template>
  <h1>{{ greeting }}</h1>
  <input v-model="toWhom" />
</template>

<script>
  import { ref, computed } from 'vue'

  export default {
    setup () {
      const toWhom = ref("World")
      const greetung = computed(() => `Hello ${toWhom.value}!`)
      return { toWhom }
    }
  }
</script>

edit in codesandbox

Composition API

Watching and Methods

<template>
  <div>
    <h2>{{ greeting }}</h2>
    <input v-model="toWhom">
    <button v-if="danger" @click="callPolice">Call Police</button>
  </div>
</template>

<script>
import { ref, computed, watch } from "@vue/composition-api";

export default {
  setup() {
    const toWhom = ref("World");
    const danger = ref(false);
    const greeting = computed(() => `Hello ${toWhom.value}!`);

    const callPolice = () => {
      console.log("Bad name detected. Police is informed!");
    };

    const nameWatcher = watch(toWhom, newName => {
      if (newName === "bad") {
        danger.value = true;
        toWhom.value = "good";
      }
    });

    return { toWhom, greeting, danger, callPolice };
  }
};
</script>

edit in codesandbox

So is that how things work now?

Jain!

Optional, but advanced

• Completely optional
• The options syntax is still possible
• ...and will still be the common way
• new syntax is especially interesting for library authors

In Vue3 the composition API is the underlying technology and the component syntax builds on top of it.

When to use the Composition API

• a component grows due to a mix of functionalities
• code can be reused
• there are a couple of very similar, but yet not quite the same™ components
• Typescript!

Thank you!

twitter: @koehr_in

blog: https://koehr.tech

slides: https://koehr.in/slides/2020/vue3-composition-api