Vue 3 cheat sheet

Vue 3 cheat sheet

VUE COMPOSITION API CHEAT SHEET Use the composition API when:        

Spaces Left: {{ spacesLeft }} out of {{ capacity }}

    Attending The component is too large, and should be organized by logical concerns(feature)     

AND / OR        Code needs to be extracted and reused         {{ name }} across mulitiple components, as an         alternative to Mixins/Scoped Slots     

AND / OR     Increase Capacity Type safety in TypeScript is important    If using Vue with Composition API plugin configured: import { ref, computed } from "@vue/composition-api"; import { ref, computed } from "vue"; export default {   setup() {     const capacity = ref(4);     const attending = ref(["Tim", "Bob", "Joe"]);     const spacesLeft = computed(() => { Reactive Reference Wraps primitives in an object to track changes Computed Property       return capacity.value - attending.value.length;     });     function increaseCapacity() {       capacity.value++;     } Access the value of a Reactive Reference by calling value Methods declared as functions     return { capacity, attending, spacesLeft, increaseCapacity };   } }; Gives our template access to these objects & functions 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() {       event.capacity++;     } Notice we don’t have to use value since the object is reactive toRefs creates a plain object with reactive references     return {  toRefs(event), increaseCapacity };   } }; Watch the Vue Essentials course on VueMastery.com VUE COMPOSITION API CHEAT SHEET TO ORGANIZE BY FEATURE: … Watch the Vue Essentials course at VueMastery.com, taught export default { by Gregg Pollack   setup() {     const productSearch = useSearch(      )     const resultSorting = useSorting({      }) The setup() method     return { productSearch, resultSorting }   } Called after beforeCreate hook and before created hook Does not have access to this } function useSearch(getResults) {  props The first optional argument of setup: export default { } function useSorting({ input, options }) {    props: { Props are reactive and can be watched     name: String   }, }   setup(props) {     watch(() => {       console.log(`name is: ` + props.name) TO EXTRACT SHARED CODE: …     })   } } import useSearch from '@use/search' import useSorting from '@use/sorting' export default {   setup() {     const productSearch = useSearch(      )     const resultSorting = useSorting({      }) context The second optional argument of setup: setup(props, context) {   context.attrs;   context.slots;   context.emit; Exposes properties previously accessed using this }     return { productSearch, resultSorting }   } } life-cycle hooks Declare them inside setup setup() {   onMounted(() => {   });   onUpdated(() => {   }); use/search.js export default function useSearch(getResults) {    onUnmounted(() => {   }); } 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  .. .VUE COMPOSITION API CHEAT SHEET TO ORGANIZE BY FEATURE: … Watch the Vue Essentials course at VueMastery.com, taught export default {