Do you think IIT Guwahati certified course can help you in your career?
Introduction
Composition API is a new way to work with the reactive state in a Vue application. The code can be grouped by features rather than by functionality. This gives the developer greater flexibility while building a Vue application. The template Refs and reactive refs are unified while working with composition API. To obtain a reference of an in-template element or a component instance, we can declare a ref and return it from setup().
Template Refs
<template>
<div ref="root">Root element</div>
</template>
<script>
import { ref, onMounted } from 'vue'
export default {
setup() {
const root = ref(null)
onMounted(() => {
// the DOM element will be assigned to the ref only after the initial render
console.log(root.value)
})
return {
root
}
}
}
</script>
You can also try this code with Online Javascript Compiler
In the above code, we render the root to the content and bind it to the <div> element in the template through the ref=”root” property. If the ref key in VNode corresponds to the ref property on the render context in the template when the Virtual DOM patching algorithm is used, the corresponding ref value in VNode will be assigned to the ref value in context. This process is performed during the Virtual DOM mount/patch, so a value will be assigned to the template ref only after the initial render is done.
Template refs in composition API can be used in two ways:
Usage with JSX
Usage inside V-for
Usage with JSX
JSX stands for Javascript XML and is a syntax extension to Javascript without defined semantics. If you find the render() function in Vue js challenging to work with to create templates in your script files, JSX might be your savior. JSX makes Vue components easier to manage and import.
The template Refs can be used with JSX without the template and directly assigns the root value to the ref.
V-for is a directive used in Vue to render the lists or arrays and to iterate over objects. The composition API template refs can be used inside v-for, but they are not handled primarily. Instead, function refs are used to perform custom handling.
<template>
<div v-for="(item, l) in list" :ref="el => { if (el) divs[i] = el }">
{{ item }}
</div>
</template>
<script>
import { ref, reactive, onBeforeUpdate } from 'vue'
export default {
setup() {
const list = reactive([8, 20, 6])
const divs = ref([])
// reset the refs before each update
onBeforeUpdate(() => {
divs.value = []
})
return {
list,
divs
}
}
}
</script>
You can also try this code with Online Javascript Compiler
In the given code, the V-for iterates or renders over a list or object when used with a <div> in the template, and the setup() returns a value to the ref in each iteration. The refs should be reset immediately after each update in the loop.
Watching Template Refs
Watching the template refs in Vue is an alternative to life cycle hooks in frameworks like angular or react Js. But the watch() and watchEffect() effects are run before the DOM is updated, unlike in life cycle hooks. So the template ref will not be updated yet when the watcher runs the effect.
<template>
<div ref="root">Root element</div>
</template>
<script>
import { ref, watchEffect } from 'vue'
export default {
setup() {
const root = ref(null)
watchEffect(() => {
// This effect runs before the DOM element is updated.
console.log(root.value) // => null
})
return {
root
}
}
}
</script>
You can also try this code with Online Javascript Compiler
So watchers that use template refs must be defined with the flush: 'post' option. After the DOM element is updated, this option will run the effect to ensure that the template ref is in sync with the DOM and references the correct element.
What is a ref in composition API? ref is a way to create a reactive property in Vue.js. These are wrapper objects that can be initialized and assigned to variables.
What is Vue 3 Composition API? The composition API in Vue is a new way of writing components by grouping their features instead of functionality. This gives the developer greater flexibility while building a Vue application.
What is setup in Vue Composition API? It is a function the extracts repeatable parts of components to make them into a reusable piece of code. This function is executed after all the properties specified in the code are resolved.
What is the use of JSX in template refs? JSX - Javascript XML is an extension to javascript that Vue supports to make creating templates and importing in scripts easier.
Key Takeaways:
Hey Ninjas! Let’s discuss the article in brief,
The code in composition API can be grouped by features rather than organizing code by functionality. This gives the developer greater flexibility while building a Vue application.
The template Refs and reactive refs are unified while working with composition API, and they can be used either with JSX or inside V-for to render the context.
Watching the template refs in Vue is an alternative to life cycle hooks in frameworks like angular or react Js. The watch effects are run before the DOM element is mounted or updated in Vue.
Vue js is a Js framework used to build single-page web applications and User interfaces. It supports the usage of JSX along with HTML, which makes code efficient and easy to render, assign and import elements.
Hey ninjas! Aren’t the frameworks in web development interesting. We found the best course for you to become an expert with frameworks, servers, UI, and everything to make you a full-stack developer.
34+ registered 
