Copied to Clipboard
Use cases:
- Accessing updated DOM elements
- Measuring element size
- Managing focus after state change
Without nextTick(), you may interact with outdated DOM.
🟢 watchEffect()
Most developers use watch(), but watchEffect() is often simpler.
watchEffect() automatically tracks reactive dependencies.
Example:
<script setup>
import { ref, watchEffect } from 'vue'
const count = ref(0)
watchEffect(() => {
console.log('Count is:', count.value)
})
</script>
No need to specify dependencies manually.
Difference:
-
watch() → explicit dependency
-
watchEffect() → automatic dependency tracking
Best used for:
- Side effects
- Logging
- Reactive debugging
- Simple reactive reactions
🟢 provide() / inject()
Prop drilling becomes painful in large component trees.
Instead of passing props multiple levels down, you can use dependency injection.
Parent:
<script setup>
import { provide } from 'vue'
provide('theme', 'dark')
</script>
Child (deeply nested):
<script setup>
import { inject } from 'vue'
const theme = inject('theme')
</script>
Use cases:
- Theming
- Plugin systems
- Form context
- Shared services
It’s lightweight and avoids unnecessary prop chains.
But remember:
👉 It’s not a state management replacement. Use it intentionally.
🟢 useId()
useId() generates unique, SSR-safe IDs.
Very useful for accessibility and form labeling.
Example:
<script setup>
import { useId } from 'vue'
const id = useId()
</script>
<template>
<label :for="id">Email</label>
<input :id="id" type="email" />
</template>
Benefits:
- No ID collisions
- SSR compatibility
- Cleaner form components
Especially helpful in reusable UI libraries.
🟢 shallowRef()
Normally, ref() makes nested objects reactive.
But sometimes you don’t want deep reactivity.
That’s where shallowRef() helps.
Example:
<script setup>
import { shallowRef } from 'vue'
const chartInstance = shallowRef(null)
</script>
Best used for:
- Third-party libraries
- Large objects
- Non-reactive instances
- Performance optimization
shallowRef() tracks only .value changes — not nested properties.
This avoids unnecessary reactive overhead.
🟢 v-once
v-once renders an element only once.
After that, it never updates again.
Example:
<h1 v-once>
Static Title
</h1>
Use cases:
- Static content
- Large lists of immutable data
- Performance optimization
Be careful:
👉 It will never update — even if data changes.
🟢 v-memo
v-memo is lesser-known but powerful.
It memoizes part of a template based on dependencies.
Example:
<div v-memo="[user.id]">
{{ user.name }}
</div>
The block only re-renders when user.id changes.
Useful for:
- Large lists
- Performance-critical UI
- Preventing unnecessary updates
It gives you fine-grained control over rendering behavior.
🟢 CSS v-bind()
Vue allows binding reactive values directly inside <style>.
Example:
<script setup>
import { ref } from 'vue'
const color = ref('red')
</script>
<template>
<div class="box">Hello</div>
</template>
<style scoped>
.box {
background-color: v-bind(color);
}
</style>
This enables:
- Dynamic styling without inline styles
- Cleaner separation of logic and presentation
- Reactive CSS variables
Great for:
- Theming
- Dynamic layouts
- Design systems
📖 Learn more
If you would like to learn more about Vue, Nuxt, JavaScript or other useful technologies, checkout VueSchool by clicking this link or by clicking the image below:
Vue School Link
It covers most important concepts while building modern Vue or Nuxt applications that can help you in your daily work or side projects 😉
🧪 Advance skills
A certification boosts your skills, builds credibility, and opens doors to new opportunities. Whether you're advancing your career or switching paths, it's a smart step toward success.
Check out Certificates.dev by clicking this link or by clicking the image below:
Certificates.dev Link
Invest in yourself—get certified in Vue.js, JavaScript, Nuxt, Angular, React, and more!
✅ Summary
Vue has many powerful features beyond the basics.
In this article, you discovered:
- How
nextTick() helps with DOM timing
- Why
watchEffect() simplifies reactive side effects
- How
provide() / inject() reduces prop drilling
- When to use
useId() for accessibility
- How
shallowRef() optimizes performance
- How
v-once and v-memo improve rendering control
- How CSS
v-bind() enables reactive styling
These features can elevate your Vue code from good to great — when used intentionally.
Take care!
And happy coding as always 🖥️