Armağan Amcalar PRO
Armagan is the founder of Coyotiv GmbH, and is currently on a mission to bring a scalable and nimble engineering culture to startups and enterprises. Armagan is a public speaker, a mentor and a lecturer.
Vuelve Vue 2!
A CRITICAL LOOK AT THE COMPOSITION API IN VUE 3
Armağan Amcalar
WHO AM I?
AUTHORED ON GITHUB
Introduction to Composition API
dashersw
Inspired by...
dashersw
Inspired by...
dashersw
React hooks.
Concepts to learn
ref shallowRef reactive watchEffect
unwrapping a ref
hooks
dashersw
Caveats
Which reactivity API to use when?
Challenges during destructuring
Challenges with primitives
Challenges with arrays and maps
https://vuejs.org/guide/essentials/reactivity-fundamentals.html
dashersw
WHY ARE WE DOING THIS?
dashersw
dashersw
dashersw
Composition API
vs
Options API
dashersw
dashersw
export default {
data() {
return {
count: 0
}
},
methods: {
increment() {
this.count++
}
},
mounted() {
this.increment()
}
}import { ref, onMounted } from 'vue'
export default {
setup() {
const count = ref(0)
function increment() {
// .value is needed
// in JavaScript
count.value++
}
onMounted(increment)
// don't forget to expose the
// function as well.
return {
count,
increment
}
}
}<script setup>
import { ref, onMounted } from 'vue'
const count = ref(0)
function increment() {
count.value++
}
onMounted(increment)
</script>WHAT IS THE PROBLEM WITH THE COMPOSITION API?
dashersw
Imperative vs Declarative Programming
dashersw
dashersw
import { ref, onMounted } from 'vue' // Declaration (module import)
export default { // Declaration (export)
setup() { // Declaration (function within an object)
const count = ref(0) // Declaration (constant variable)
// & Expression (calling ref)
function increment() { // Declaration (function)
count.value++ // Expression (increment operation)
}
onMounted(increment) // Expression (calling onMounted)
return { // Expression (return statement)
count, // Expression (object property shorthand)
increment // Expression (object property shorthand)
}
}
}
dashersw
export default { // Declaration (export of an object)
data() { // Declaration (object property)
return { // Expression (return statement)
count: 0 // Declaration (property inside an object)
}
},
methods: { // Declaration (object property)
increment() { // Declaration (method inside an object)
this.count++ // Expression (increment operation)
}
},
mounted() { // Declaration (lifecycle hook as a method)
this.increment() // Expression (method call)
}
}The problem is...
dashersw
The problem is...
dashersw
OPTIONS API only works in components.
dashersw
ENTER Vuelve.
dashersw
dashersw
import vuelve from 'vuelve'
export default vuelve({
data: {
count: 0
},
methods: {
increment() {
this.count.value++
}
},
mounted() {
this.increment()
}
})
dashersw
import vuelve from 'vuelve' // Declaration (module import)
export default vuelve({ // Expression (calling vuelve) & Declaration (export)
data: { // Declaration (object property)
count: 0 // Declaration (property inside an object)
},
methods: { // Declaration (object property)
increment() { // Declaration (method inside an object)
this.count.value++ // Expression (increment operation on a reactive property)
}
},
mounted() { // Declaration (lifecycle hook as a method)
this.increment() // Expression (method call)
}
})
Demo tIme!
THANK YOU!
Armağan Amcalar
dashersw
Vuelve Vue 2! A Critical Look at the Composition API in Vue 3
By Armağan Amcalar
Vuelve Vue 2! A Critical Look at the Composition API in Vue 3
This talk will begin with a brief introduction to the Composition API in Vue 3 and will show examples of how it compares to the Options API in Vue 2. We will then look at definitions of imperative and declarative programming in the context of CSS, JavaScript, and HTML. In the second part of the talk, I will argue that Vue 3 Composition API is a step backwards in the library’s programming model. This talk will introduce you to Vuelve, an open-source library I wrote to enhance the imperative programming model of Vue 3 with a declarative syntax similar to Vue 2. Finally, I will give some examples of how this results in less code, and an easier-to-understand mental model.
