Composition API

Composable component with

Vue Status

Options-based

Lightweight

DX enhancement

Scalable & Performant

3.x

Functional & Options-based

Lighter-weight

DX enhancement

Scalable & Performant

Better TypeScript support

Better tree-shakable

3.x

A set of low-level APIs to use Vue features outside of Vue component

Composition API

Another way to write complex component

Composition API

Better reusable code quality

Solve the problems that mixins can't solve

ref()

defineComponent()

h()

reactive() / watchEffect()

provide() / inject()

computed() / watch()

lifecycle hooks (using with setup)

export default {
 name: 'MyComp',
 provide: {},
 inject: {},
 data() { return { count: 1 } },
 computed: { /*...*/ },
 watch: { /*...*/ },
 methods: {},
 mounted() {}
 render(h) { return h() }
}
import {
 defineComponent,
 h, onMounted,
 ref, computed, watch,
 provide, inject
} from 'vue'

export default defineComponent({
 name: 'MyComp',
 methods: {},
 setup(props, context) {
  const name = ref('maya')  
  onMounted(() => { /*...*/ })  
  provide('someProvider', {})  
  const injectValue = inject('someInjector')  
  watch(name, (newValue) => {})  
  const msg = computed(
   () => `hi ${name.value}`
  )
  
  return () => h(
   'div', 
   [name, injectValue, msg]
  )
 },
})

readonly()

Immutable state 

readonly()
watchEffect(
  onInvalidate => {}, options
)

Apply side-effect based on reactive state

beforeCreate

created

beforeMount

mounted

beforeUpdate

Lifecycle Hooks with setup()

updated

beforeDestroy

destroyed

errorCaptured

Vue 2.x

beforeCreate

created

beforeMount

mounted

beforeUpdate

updated

beforeUnmount

unmounted

errorCaptured

renderTracked

renderTriggered

Vue 3.x

onBeforeMount

onBeforeUpdate

onMounted

onUpdated

onUnmounted

onBeforeUnmount

onErrorCaptured

onRenderTracked

onRenderTriggered

What's next?

Use Vite instead of Webpack

Migration tools in Q1 (hopefully) for simple components

Vuex 5 (haven't we all upgraded to Vuex 4 😆 ?)

Migration to Vue Router

Ditch IE11 finally!

console.log(Maya)

Senior Frontend Developer

Core maintainer of StorefrontUI

NuxtJS Ambassador

Everything about Frontend/Web

THANK YOU!

Compose component with Composition API

By Maya Shavin

Compose component with Composition API

  • 1,168