The Composition API consists of a number of different Vue.js internals exposed via utility functions. It helps to better organize component code by logical concern and makes it easier to separate component logic from the component template and even reuse that logic across multiple components. Finally, it brings better Typescript support to Vue.js.
What is Composition API or CAPI?
- Is an alternative to the Option API which is based on Vue 2
- Defining component internals such as data, methods, and computed props
https://vuejs.org/guide/extras/composition-api-faq.html#why-composition-api https://vuejs.org/guide/typescript/overview.html#using-with-composition-api https://github.com/vuejs/composition-api
This template should help get you started developing with Vue 3 in Vite. The template uses Vue 3 <script setup> SFCs, check out the script setup docs to learn more.
- VS Code + Volar (and disable Vetur) + TypeScript Vue Plugin (Volar).
-
Install Node.js
-
Open Terminal,
# Run Vite
$ npm init vite
# Install NPM
$ npm install
# Run in development
$ npm run dev
https://vuejs.org/api/composition-api-setup.html
https://vuejs.org/api/reactivity-core.html#ref https://vuejs.org/guide/extras/composition-api-faq.html#reactive-variables-with-ref
https://developer.mozilla.org/en-US/docs/Glossary/Primitive
https://vuejs.org/api/reactivity-core.html#reactive
When has an object or an array, which is non-primitive data can use reactive function instead ref function
Ref function
- Advantages
- Works on primitives and non-primitives data
# Ref function
const name = ref('The Burger Ramly')
name.value = "Mummy's Burger"
# Reactive function
let name = reactive('The Burger Ramly')
name = "Mummy's Burger"- Can re-assign the value of the reactive references
# Ref function
let posts = ref(['post 1', 'post 2'])
posts.value = ['post 3', 'post 4']
# Reactive function
let posts = reactive(['post 1', 'post 2'])
posts = ['post 3', 'post 4'] // It can mutate any property but cannot replace data itself- Lend itself to destructuring
import usePostComposable from './PostComposable'
export default {
setup() {
const { title, author } = usePostComposable()
}
}
#Ref function
import { ref } from 'vue'
export default() => {
return {
title: ref('Awesome'),
author: ref('Iz'),
tags: ref(['javascript', 'vue'])
}
}
- Disadvantages
- Auto unwrapping makes the ref api different depending on context
<template>
{{ name }}
</template>
<script>
import {ref} from 'vue'
export default {
setup() {
const name = 'The Ramly Burger'
console.log(name.value)
return { name }
},
# created() {
# console.log(this.name)
# }
}
</script>- Having to use .value
Reactive function
- Advantages
- No need to use .value
- Consistent interface between, setup, template, and options
<template>
{{ restaurant.name }}
</template>
<script>
import {reactive} from 'vue'
export default {
setup() {
const restaurant = reactive({
name: 'The Ramly Burger'
})
console.log(restaurant.name)
return { restaurant }
},
created() {
console.log(this.restaurant.name)
}
}- Easily made destructurable with toRefs
import { reactive, toRefs } from 'vue'
export default() => {
return toRefs(reactive ({
title: ref('Awesome'),
author: ref('Iz'),
tags: ref(['javascript', 'vue'])
}))
}- Disadvantages
- Does not work on primitives values
const name = reactive('The Ramly Burger') // Wrong
const restaurant = reactive({
name: 'The Ramly Burger' // Right
})
Using ref function (string, number, boolean)
Using reactive function (Object)
- Cannot reassign the variable
let posts = reactive(['post 1', 'post 2'])
posts = ['post 3', 'post 4'] // It can mutate any property but cannot replace data itself // Wrong
const restaurant = reactive({
name: 'The Ramly Burger',
rating: 5
})
# add
restaurant.address = 'No 3, Walt Street'
# alter
restaurant.name = 'The Pizza Burger'
# delete
delete restaurant.rating // Right
const posts = reactive(['post 1', 'post 2'])
# update by index
posts[0] = "post 1 updated";
# remove last
posts.pop();
# add new to end
posts.push("post 3") // Right
- In Option API, use this function to keep eye reactive data and execute function whenever that data changes.
- Knows what reactive data we use inside callback function.
- Don't have access to the old value of data dependency.
- Add new script tag like Option API
<script>
export default {
props: {
name: String,
price: Number,
},
data() {
},
methods: {
}
}
</script>
- Replace in script tag as setup
<script setup>
const props = defineProps({
name: String,
price: Number,
})
</script>