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.