Introduction to Composition API

A presentation at Vue.js Amsterdam in February 2021 in by Ben Hong

Slide 1

Introduction to Composition API A new and different way to write your Vue apps. Introduction to Composition API • Vue Amsterdam 2021 • @bencodezen

Slide 2

Senior DX Engineer @ Netlify A little about me Vue.js Core Team Vue Mastery Instructor Google Developer Expert Introduction to Composition API • Vue Amsterdam 2021 • @bencodezen

Slide 3

What is the Composition API? Introduction to Composition API • Vue Amsterdam 2021 • @bencodezen

Slide 4

At its core, the Composition API is another way to build Vue.js apps and organize your code. Introduction to Composition API • Vue Amsterdam 2021 • @bencodezen

Slide 5

At its core, the Composition API is another way to build Vue.js apps and organize your code. Introduction to Composition API • Vue Amsterdam 2021 • @bencodezen

Slide 6

The Composition API does not replace the Options API. Introduction to Composition API • Vue Amsterdam 2021 • @bencodezen

Slide 7

Let’s ReVue: The Options API Introduction to Composition API • Vue Amsterdam 2021 • @bencodezen

Slide 8

simple-option-api.vue <script> export default { data: () => ({ count: 0 }), computed: { doubleCount() { return this.count * 2 } }, methods: { incrementCount() { this.count++ } } } </script> <template> <p>{{ count }}</p> </template>

Slide 9

simple-option-api.vue <script> export default { data: () => ({ count: 0 }), computed: { doubleCount() { return this.count * 2 } }, methods: { incrementCount() { this.count++ } } } </script> <template> <p>{{ count }}</p> </template>

Slide 10

simple-option-api.vue <script> export default { data: () => ({ count: 0 }), computed: { doubleCount() { return this.count * 2 } }, methods: { incrementCount() { this.count++ } } } </script> <template> <p>{{ count }}</p> </template>

Slide 11

simple-option-api.vue <script> export default { data: () => ({ count: 0 }), computed: { doubleCount() { return this.count * 2 } }, methods: { incrementCount() { this.count++ } } } </script> simple-composition-api.vue <script> import { computed, ref } from ‘vue’ export default { setup() { const count = ref(0) const doubleCount = computed(() => { return count.value * 2 }) const incrementCount = () => { count.value += 1 } } return { count, doubleCount, incrementCount } } </script> <template> <p>{{ count }}</p> </template> <template> <p>{{ count }}</p> </template>

Slide 12

simple-option-api.vue <script> export default { data: () => ({ count: 0 }), computed: { doubleCount() { return this.count * 2 } }, methods: { incrementCount() { this.count++ } } } </script> simple-composition-api.vue <script> import { computed, ref } from ‘vue’ export default { setup() { const count = ref(0) const doubleCount = computed(() => { return count.value * 2 }) const incrementCount = () => { count.value += 1 } } return { count, doubleCount, incrementCount } } </script> <template> <p>{{ count }}</p> </template> <template> <p>{{ count }}</p> </template>

Slide 13

simple-option-api.vue <script> export default { data: () => ({ count: 0 }), computed: { doubleCount() { return this.count * 2 } }, methods: { incrementCount() { this.count++ } } } </script> simple-composition-api.vue <script> import { computed, ref } from ‘vue’ export default { setup() { const count = ref(0) const doubleCount = computed(() => { return count.value * 2 }) const incrementCount = () => { count.value += 1 } } return { count, doubleCount, incrementCount } } </script> <template> <p>{{ count }}</p> </template> <template> <p>{{ count }}</p> </template>

Slide 14

simple-option-api.vue <script> export default { data: () => ({ count: 0 }), computed: { doubleCount() { return this.count * 2 } }, methods: { incrementCount() { this.count++ } } } </script> simple-composition-api.vue <script> import { computed, ref } from ‘vue’ export default { setup() { const count = ref(0) const doubleCount = computed(() => { return count.value * 2 }) const incrementCount = () => { count.value += 1 } } return { count, doubleCount, incrementCount } } </script> <template> <p>{{ count }}</p> </template> <template> <p>{{ count }}</p> </template>

Slide 15

simple-option-api.vue <script> export default { data: () => ({ count: 0 }), computed: { doubleCount() { return this.count * 2 } }, methods: { incrementCount() { this.count++ } } } </script> simple-composition-api.vue <script> import { computed, ref } from ‘vue’ export default { setup() { const count = ref(0) const doubleCount = computed(() => { return count.value * 2 }) const incrementCount = () => { count.value += 1 } } return { count, doubleCount, incrementCount } } </script> <template> <p>{{ count }}</p> </template> <template> <p>{{ count }}</p> </template>

Slide 16

simple-option-api.vue <script> export default { data: () => ({ count: 0 }), computed: { doubleCount() { return this.count * 2 } }, methods: { incrementCount() { this.count++ } } } </script> simple-composition-api.vue <script> import { computed, ref } from ‘vue’ export default { setup() { const count = ref(0) const doubleCount = computed(() => { return count.value * 2 }) const incrementCount = () => { count.value += 1 } } return { count, doubleCount, incrementCount } } </script> <template> <p>{{ count }}</p> </template> <template> <p>{{ count }}</p> </template>

Slide 17

simple-composition-api.vue

<script> export default { setup() { const count = 0 } return { count } } </script>

Slide 18

simple-composition-api.vue

<script> export default { setup() { const count = 0 } return { count } } </script>

Slide 19

simple-composition-api.vue

<script> export default { setup(props, context) { const count = 0 } return { count } } </script>

Slide 20

simple-composition-api.vue

<script> export default { setup(props, ctx) { const count = 0 } return { count } } </script>

Slide 21

simple-composition-api.vue

<script> export default { setup(props, { attrs, slots, emit }) { const count = 0 } return { count } } </script>

Slide 22

simple-composition-api.vue

<script> export default { setup(props, ctx) { const count = 0 } return { count } } </script>

Slide 23

simple-composition-api.vue

<script> export default { setup(props, ctx) { const count = 0 } return { count } } </script>

Slide 24

simple-composition-api.vue

<script> export default { setup(props, ctx) { const count = 0 } return { count } } </script>

Slide 25

simple-composition-api.vue

<script> export default { setup(props, ctx) { const count = 0 } return { count } } </script>

Slide 26

Reactive Data in Composition API

Slide 27

reactive-in—composition-api.vue

<script> export default { data() { return { count: 0 } } } </script>

<template> <p>{{ count }}</p> </template>

Slide 28

reactive-in—composition-api.vue

<script> export default { setup() { const count = 0 } return { count } } </script>

<template> <p>{{ count }}</p> </template>

Slide 29

ref Launching with Composition API Netlify DevEx Team December 2020

Slide 30

reactive-in—composition-api.vue

<script> export default { setup() { const count = 0 } return { count } } </script>

<template> <p>{{ count }}</p> </template>

Slide 31

reactive-in—composition-api.vue

<script> import { ref } from ‘vue’ export default { setup() { const count = 0 } return { count } } </script>

<template> <p>{{ count }}</p> </template>

Slide 32

reactive-in—composition-api.vue

<script> import { ref } from ‘vue’ export default { setup() { const count = ref(0) } return { count } } </script>

<template> <p>{{ count }}</p> </template>

Slide 33

reactive-in—composition-api.vue

<script> import { ref } from ‘vue’ export default { setup() { const count = ref(0) } return { count } } </script>

<template> <p>{{ count }}</p> </template>

Slide 34

reactive-in—composition-api.vue

<script> import { ref } from ‘vue’ export default { setup() { const count = ref(0) const incrementCount = () => { } } return { count } } </script> <template> <p>{{ count }}</p>

Slide 35

reactive-in—composition-api.vue

<script> import { ref } from ‘vue’ export default { setup() { const count = ref(0) const incrementCount = () => { count += 1 } } return { count } } </script> <template> <p>{{ count }}</p>

Slide 36

reactive-in—composition-api.vue

<script> import { ref } from ‘vue’ export default { setup() { const count = ref(0) const incrementCount = () => { count += 1 } } return { count } } </script> <template> <p>{{ count }}</p>

Slide 37

reactive-in—composition-api.vue

<script> import { ref } from ‘vue’ export default { setup() { const count = ref(0) const incrementCount = () => { count += 1 } } return { count } } </script> <template> <p>{{ count }}</p>

Slide 38

reactive-in—composition-api.vue

<script> import { ref } from ‘vue’ export default { setup() { const count = ref(0) const incrementCount = () => { this.count += 1 } } return { count } } </script> <template> <p>{{ count }}</p>

Slide 39

reactive-in—composition-api.vue

<script> import { ref } from ‘vue’ export default { setup() { const count = ref(0) const incrementCount = () => { this.count += 1 } } return { count } } </script> <template> <p>{{ count }}</p>

Slide 40

reactive-in—composition-api.vue

<script> import { ref } from ‘vue’ export default { setup() { const count = ref(0) const incrementCount = () => { count += 1 } } return { count } } </script> <template> <p>{{ count }}</p>

Slide 41

reactive-in—composition-api.vue

<script> import { ref } from ‘vue’ export default { setup() { const count = ref(0) const incrementCount = () => { count.value += 1 } } return { count } } </script> <template> <p>{{ count }}</p>

Slide 42

reactive Launching with Composition API Netlify DevEx Team December 2020

Slide 43

reactive-in—composition-api.vue

<script> export default { setup() { const count = 0 } return { count } } </script>

<template> <p>{{ count }}</p> </template>

Slide 44

reactive-in—composition-api.vue

<script> import { reactive } from ‘vue’ export default { setup() { const count = 0 } return { count } } </script>

<template> <p>{{ count }}</p> </template>

Slide 45

reactive-in—composition-api.vue

<script> import { reactive } from ‘vue’ export default { setup() { const count = 0 const state = reactive({}) } return { count } } </script> <template> <p>{{ count }}</p> </template>

Slide 46

reactive-in—composition-api.vue

<script> import { reactive } from ‘vue’ export default { setup() { const count = 0 const state = reactive({}) } return { count, state } } </script> <template> <p>{{ count }}</p> </template>

Slide 47

reactive-in—composition-api.vue

<script> import { reactive } from ‘vue’ export default { setup() { const count = 0 const state = reactive({ }) } return { count, state } } </script> <template>

Slide 48

reactive-in—composition-api.vue

<script> import { reactive } from ‘vue’ export default { setup() { const state = reactive({ count: 0 }) } return { count, state } } </script> <template> <p>{{ count }}</p> </template>

Slide 49

reactive-in—composition-api.vue

<script> import { reactive } from ‘vue’ export default { setup() { const state = reactive({ count: 0 }) } return { state } } </script> <template> <p>{{ count }}</p> </template>

Slide 50

reactive-in—composition-api.vue

<script> import { reactive } from ‘vue’ export default { setup() { const state = reactive({ count: 0 }) } return { state } } </script> <template> <p>{{ state.count }}</p> </template>

Slide 51

reactive-in—composition-api.vue

<script> import { reactive } from ‘vue’ export default { setup() { const state = reactive({ count: 0 }) const incrementCount = () => { count.value += 1 } } return { state } } </script>

Slide 52

reactive-in—composition-api.vue

<script> import { reactive } from ‘vue’ export default { setup() { const state = reactive({ count: 0 }) const incrementCount = () => { count += 1 } } return { state } } </script>

Slide 53

reactive-in—composition-api.vue

<script> import { reactive } from ‘vue’ export default { setup() { const state = reactive({ count: 0 }) const incrementCount = () => { state.count += 1 } } return { state } } </script>

Slide 54

reactive-in—composition-api.vue

<script> import { reactive } from ‘vue’ export default { setup() { const state = reactive({ count: 0 }) } return { state } } </script> <template> <p>{{ state.count }}</p> </template>

Slide 55

toRefs Launching with Composition API Netlify DevEx Team December 2020

Slide 56

reactive-in—composition-api.vue

<script> import { reactive } from ‘vue’ export default { setup() { const state = reactive({ count: 0 }) } return { state } } </script> <template> <p>{{ state.count }}</p> </template>

Slide 57

reactive-in—composition-api.vue

<script> import { reactive } from ‘vue’ export default { setup() { const state = reactive({ count: 0 }) } return { …state } } </script> <template> <p>{{ state.count }}</p> </template>

Slide 58

reactive-in—composition-api.vue

<script> import { reactive } from ‘vue’ export default { setup() { const state = reactive({ count: 0 }) } return { …state } } </script> <template> <p>{{ count }}</p> </template>

Slide 59

reactive-in—composition-api.vue

<script> import { reactive } from ‘vue’ export default { setup() { const state = reactive({ count: 0 }) } return { …state } } </script> <template> <p>{{ count }}</p> </template>

Slide 60

reactive-in—composition-api.vue

<script> import { reactive } from ‘vue’ export default { setup() { const state = reactive({ count: 0 }) } return { …state } } </script> <template> <p>{{ count }}</p> </template>

Slide 61

reactive-in—composition-api.vue

<script> import { reactive, toRefs } from ‘vue’ export default { setup() { const state = reactive({ count: 0 }) } return { …state } } </script> <template> <p>{{ count }}</p> </template>

Slide 62

reactive-in—composition-api.vue

<script> import { reactive, toRefs } from ‘vue’ export default { setup() { const state = reactive({ count: 0 }) } return { …toRefs(state) } } </script> <template> <p>{{ count }}</p> </template>

Slide 63

reactive-in—composition-api.vue

<script> import { reactive, toRefs } from ‘vue’ export default { setup() { const state = reactive({ count: 0 }) } return { …toRefs(state) } } </script> <template> <p>{{ count }}</p> </template>

Slide 64

Computed Properties Introduction to Composition API • Vue Amsterdam 2021 • @bencodezen

Slide 65

computed-in-composition-api.vue

<script> import { reactive, toRefs } from ‘vue’ export default { setup() { const state = reactive({ count: 0 }) } return { …toRefs(state) } } </script>

Slide 66

computed-in-composition-api.vue

<script> import { reactive, toRefs } from ‘vue’ export default { setup() { const state = reactive({ count: 0 }) const doubleCount = state.count * 2 } return { …toRefs(state) } } </script>

Slide 67

computed-in-composition-api.vue

<script> import { reactive, toRefs } from ‘vue’ export default { setup() { const state = reactive({ count: 0 }) const doubleCount = state.count * 2 } return { …toRefs(state), doubleCount } } </script>

Slide 68

computed-in-composition-api.vue

<script> import { reactive, toRefs } from ‘vue’ export default { setup() { const state = reactive({ count: 0 }) const doubleCount = state.count * 2 } return { …toRefs(state), doubleCount } } </script>

Slide 69

computed-in-composition-api.vue

<script> import { reactive, toRefs } from ‘vue’ export default { setup() { const state = reactive({ count: 0 }) const doubleCount = state.count * 2 } return { …toRefs(state), doubleCount } } </script>

Slide 70

computed-in-composition-api.vue

<script> import { reactive, toRefs } from ‘vue’ export default { setup() { const state = reactive({ count: 0 }) const doubleCount = state.count * 2 } return { …toRefs(state), doubleCount } } </script>

Slide 71

computed-in-composition-api.vue

<script> import { reactive, toRefs } from ‘vue’ export default { setup() { const state = reactive({ count: 0 }) const doubleCount = state.count * 2 } return { …toRefs(state), doubleCount } } </script>

Slide 72

computed-in-composition-api.vue

<script> import { reactive, toRefs } from ‘vue’ export default { setup() { const state = reactive({ count: 0 }) const doubleCount = state.count * 2 } return { …toRefs(state), doubleCount } } </script>

Slide 73

computed-in-composition-api.vue

<script> import { computed, reactive, toRefs } from ‘vue’ export default { setup() { const state = reactive({ count: 0 }) const doubleCount = state.count * 2 } return { …toRefs(state), doubleCount } } </script>

Slide 74

computed-in-composition-api.vue

<script> import { computed, reactive, toRefs } from ‘vue’ export default { setup() { const state = reactive({ count: 0 }) const doubleCount = computed(() => { return state.count * 2 }) } } return { …toRefs(state), doubleCount }

Slide 75

computed-in-composition-api.vue

<script> import { computed, reactive, toRefs } from ‘vue’ export default { setup() { const state = reactive({ count: 0 }) const doubleCount = computed(() => { return state.count * 2 }) } } return { …toRefs(state), doubleCount }

Slide 76

computed-in-composition-api.vue

<script> import { computed, reactive, toRefs } from ‘vue’ export default { setup() { const state = reactive({ count: 0 }) const doubleCount = computed(() => { return state.count * 2 }) } } return { …toRefs(state), doubleCount }

Slide 77

computed-in-composition-api.vue

<script> import { computed, reactive, toRefs } from ‘vue’ export default { setup() { const state = reactive({ count: 0, doubleCount: computed(() => { return state.count * 2 }) }) } return { …toRefs(state), doubleCount } } </script>

Slide 78

computed-in-composition-api.vue

<script> import { computed, reactive, toRefs } from ‘vue’ export default { setup() { const state = reactive({ count: 0, doubleCount: computed(() => { return state.count * 2 }) }) } return { …toRefs(state) } } </script>

Slide 79

computed-in-composition-api.vue

<script> import { computed, reactive, toRefs } from ‘vue’ export default { setup() { const state = reactive({ count: 0, doubleCount: computed(() => { return state.count * 2 }) }) } return { …toRefs(state) } } </script>

Slide 80

Methods Introduction to Composition API • Vue Amsterdam 2021 • @bencodezen

Slide 81

methods-in-composition-api.vue

<script> import { reactive } from ‘vue’ export default { setup() { const state = reactive({ count: 0 }) } return { state } } </script>

Slide 82

methods-in-composition-api.vue

<script> import { reactive } from ‘vue’ export default { setup() { const state = reactive({ count: 0 }) const incrementCount = () => { state.count += 1 } } return { state } } </script>

Slide 83

setup() { const state = reactive({ count: 0 }) const incrementCount = () => { state.count += 1 } } return { state } } </script> <template> <p>{{ state.count }}</p> </template>

Slide 84

setup() { const state = reactive({ count: 0 }) const incrementCount = () => { state.count += 1 } } return { state, incrementCount } } </script> <template> <p>{{ state.count }}</p> </template>

Slide 85

setup() { const state = reactive({ count: 0 }) const incrementCount = () => { state.count += 1 } } return { state, incrementCount } } </script> <template> <button @click=”incrementCount”> Increment Count: {{ count }} </button> </template>

Slide 86

setup() { const state = reactive({ count: 0 }) const incrementCount = () => { state.count += 1 } } return { state, incrementCount } } </script> <template> <button @click=”incrementCount”> Increment Count: {{ count }} </button> </template>

Slide 87

That’s the basics!

Slide 88

Is there more? • • • • Lifecycle Hooks Watch Modules And many more APIs…

Slide 89

Next Steps

Slide 90

Can be more verbose and have less structure compared to Options API More JavaScript knowledge is needed Trade-offs Deeper understanding of Vue.js is required to use it Architectural decisions are up to you Introduction to Composition API • Vue Amsterdam 2021 • @bencodezen

Slide 91

You may be tempted to rewrite your entire app in Composition API. Introduction to Composition API • Vue Amsterdam 2021 • @bencodezen

Slide 92

You may be tempted to rewrite your entire app in Composition API. Please don’t. Introduction to Composition API • Vue Amsterdam 2021 • @bencodezen

Slide 93

The Composition API is a powerful technique to understand and have in your skillset, but remember that at the end of the day. Introduction to Composition API • Vue Amsterdam 2021 • @bencodezen

Slide 94

The Composition API is a powerful technique to understand and have in your skillset, but remember that at the end of the day. All code is compromise. Introduction to Composition API • Vue Amsterdam 2021 • @bencodezen

Slide 95

“But I want more Composition API!” Introduction to Composition API • Vue Amsterdam 2021 • @bencodezen

Slide 96

Section title goes here and wraps nicely Introduction to Composition API • Vue Amsterdam 2021 • @bencodezen

Slide 97

Section title goes here and wraps nicely Introduction to Composition API • Vue Amsterdam 2021 • @bencodezen

Slide 98

Section title goes here and wraps nicely Introduction to Composition API • Vue Amsterdam 2021 • @bencodezen

Slide 99

Thank you! Find me at @bencodezen GitHub.com/bencodezen Twitter.com/bencodezen YouTube.com/bencodezen Introduction to Composition API • Vue Amsterdam 2021 • @bencodezen