Scribd
Upload
48 views

Vue Mastery Vue 3 Composition API Cheat Sheet

Uploaded by

liffestar
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
48 views

Vue Mastery Vue 3 Composition API Cheat Sheet

Uploaded by

liffestar
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 2

VUE 3 COMPOSITION API

CHEAT SHEET
<template>
Use the composition API when:
<div>
The component is too large, and
<p>Spaces Left: {{ spacesLeft }} out of {{ capacity }}</p>
should be organized by logical
<h2>Attending</h2> concerns(feature).
<ul>
AND / OR
<li v-for="(name, index) in attending" :key="index">
Code needs to be extracted and reused
{{ name }} across mulitiple components, as an
</li> alternative to Mixins/Scoped Slots.
</ul> AND / OR
<button @click="increaseCapacity()">Increase Capacity</button> Type safety in TypeScript is important.
</div>
</template>
If using Vue 2 with Composition API plugin configured:
<script>
import { ref, computed } from "vue"; import { ref, computed } from "@vue/composition-api";
export default {
setup() { Reactive Reference
const capacity = ref(4); Wraps primitives in an object to track changes
const attending = ref(["Tim", "Bob", "Joe"]);
const spacesLeft = computed(() => { Computed Property
return capacity.value - attending.value.length;
});
function increaseCapacity() { Access the value of a Reactive Reference by calling .value
capacity.value++;
}
Methods declared as functions
return { capacity, attending, spacesLeft, increaseCapacity };
}
}; Gives our template access to these objects & functions
</script>

CAN ALSO BE WRITTEN AS:


import { reactive, computed, toRefs } from "vue";
export default {
setup() { Reactive takes an object and returns a reactive object
const event = reactive({
capacity: 4,
attending: ["Tim", "Bob", "Joe"],
spacesLeft: computed(() => { return event.capacity - event.attending.length; })
});
function increaseCapacity() { Notice we don’t have to use .value since the object is reactive
event.capacity++;
} toRefs creates a plain object with reactive references
return { ...toRefs(event), increaseCapacity };
}
};

Watch the Vue 3 Essentials course on VueMastery.com


VUE 3 COMPOSITION API
CHEAT SHEET
TO ORGANIZE BY FEATURE:
<template> … </template> Watch the Vue 3 Essentials course at
</script> VueMastery.com, taught by Gregg Pollack.
export default {
setup() {
const productSearch = useSearch( )
The setup() method
const resultSorting = useSorting({ })
Called after beforeCreate hook and before created hook.
Does not have access to this.
return { productSearch, resultSorting }
}
props The first optional argument of setup:
}
function useSearch(getResults) { export default {
props: {
} name: String Props are reactive
function useSorting({ input, options }) { }, and can be watched
setup(props) {
} watch(() => {
</script> console.log(`name is: ` + props.name)
})
}
TO EXTRACT SHARED CODE: }

<template> … </template>
context The second optional argument of setup:
</script>
import useSearch from '@use/search' setup(props, context) {
import useSorting from '@use/sorting' context.attrs;
export default { context.slots;
setup() { context.parent;
const productSearch = useSearch( ) context.root;
Exposes properties previously
const resultSorting = useSorting({ }) accessed using this
context.emit;
}
return { productSearch, resultSorting }
} Declare them inside setup
life-cycle hooks
}
</script> setup() {
onMounted(() => { ... });
onUpdated(() => { ... });
use/search.js onUnmounted(() => { ... });
}
export default function useSearch(getResults) {

Instead of using beforeCreate or created hooks, just


}
write code or call functions inside setup() instead.

use/sorting.js

export default function useSorting({ input, options }) { See the API documentation for additional info.

You might also like