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,213