A Deep Dive into Vue.js Composition API: My Personal Handbook

Published Mar 20, 2023

The content here is under the Attribution 4.0 International (CC BY 4.0) license

Notes from Vue 3 Composition API course available at VueSchool.io by Daniel Kelly.

Why composition

  • solve an issue with mixings
  • better typescript support

Composition

  • setup
    • setup in the <script setup> or in the javascript export default { setup() {} }
      • using <script setup in 3.2 does not need to return everything from the setup function
    • setup is the entry point for composition API
    • setup returns the data that is used in the template
    • inside setup is where the functions are defined to be used in the templates as well
    • arguments
      • setup receives the props as first argument
      • setup receives the context as a second argument

Reactivity

  • if prop is not reactive it is not possible to edit in the vue-dev-tools
    • it is a good idea to copy props to avoid issues from references
    • import ref from vue - it is necessary because it is passed by value not reference; having by reference helps to not loose track of reactivity
    • accessing through options API the value needs a .value (variable.value)
    • when using options API it is used normally as this.variable
    • define ref with const to avoid breaking reactivity
  • objects are stored by ref not value
    • for values use reactive instead of ref
  • ref vs reactive
    • ref
      • works in primitives and not primitives
      • reassigned the variable
      • restructure is allowed
      • .value is verbose
    • reactivity
      • no need for .value
      • it is posible to destruct using toRef
      • not applicable to primitive value
      • breaks reactivity when reassigned
  • utilities functions for reactivity
    • isReadonly
    • isRaw
    • markRaw
    • shallowReactive
    • shallowReadonly

computed properties

  • computed()
  • get and set are available

watch

  • first argument is the variable
  • second argument is a function
  • immediate
  • deep
  • watching reactive() or ref() array it is required to copy the array
  • it is possible to remove a watcher using the value that watch returns

watchEffect

  • always fired immediately
  • automatically register dependencies
  • no access to old value

provide/inject

  • avoid prop drilling
    • it does not matter the nested level
  • provide offers the value
  • inject uses the value

blog - use case

  • composable - (like reactjs hooks)
    • external to a component
    • holds logic to be shared
    • composable are better than mixings
    • avoid name collision via destructuring
  • vue router
    • provides composables to access route params
  • anonymous function to trigger async code with async/await
    • suspense - experimental
      • wait for children components to be ready
      • add <script async setup to start with suspense
      • wrap parent with <suspense>
      • templates to inform state (like loading)
      • composable are also available globally

Typescript support vue3

From https://vueschool.io/courses/typescript-with-vue-js-3

  • in the script tag help the component using lang=”ts”
  • reactive() can by typed with custom type
  • use as MyType to help the editor to have the correct hints
  • Consistently use a symbol with events like ‘@create’ it will list @@ in the component
  • defineProps
    • define props with ts defineProps<{ prop1: string }>
    • default values for props is an experimental feature
  • inject
    • provider uses injectionKey
    • injectionKey needs to be a symbol = Symbol as MyType
Made with 💖 by @MatheusMarabesi