Scribd
Upload
822 views2 pages

Vue 3 Cheat Sheet

The document describes the Vue 3 Composition API and how it can be used as an alternative to options API for organizing component logic. Key points: 1. The Composition API uses the setup() function to declare reactive state, computed properties, and methods instead of options like data and methods. 2. Code can be extracted from components using custom composable functions to share logic across components. 3. Features can be organized into separate functions to improve readability in complex components. 4. Lifecycle hooks are declared directly in setup() instead of as options.

Uploaded by

heidarv
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
822 views2 pages

Vue 3 Cheat Sheet

The document describes the Vue 3 Composition API and how it can be used as an alternative to options API for organizing component logic. Key points: 1. The Composition API uses the setup() function to declare reactive state, computed properties, and methods instead of options like data and methods. 2. Code can be extracted from components using custom composable functions to share logic across components. 3. Features can be organized into separate functions to improve readability in complex components. 4. Lifecycle hooks are declared directly in setup() instead of as options.

Uploaded by

heidarv
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
<script>
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 {
}
  props: {
function useSorting({ input, options }) { 
    name: String Props are reactive
  }, and can be watched
}
  setup(props) {
</script>
    watch(() => {
      console.log(`name is: ` + props.name)
    })
TO EXTRACT SHARED CODE:
  }
<template> … </template> }
<script>
import useSearch from '@use/search' context The second optional argument of setup:
import useSorting from '@use/sorting'
setup(props, context) {
export default {
  context.attrs;
  setup() {
  context.slots; Exposes properties previously
    const productSearch = useSearch(      ) accessed using this
  context.emit;
    const resultSorting = useSorting({      })
}

    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