Class & Style Bindings

In Vue.js 3, understanding Class & Style Bindings is vital for building reactive, declarative, and scalable front-end components. Vue combines an intuitive template-based syntax with an optimized Virtual DOM engine and proxy-based reactivity system.

• Declarative Rendering: Vue extends standard HTML with directive attributes to declaratively bind reactive JavaScript state to the DOM.
• Component Driven: Applications are composed of self-contained Single File Components (.vue SFCs) encapsulating template, logic, and scoped styles.
• Reactivity Engine: Primitive reactive references (ref()) and reactive proxy objects (reactive()) allow automatic view recalculations without manual DOM manipulation.

Let us examine a complete single-file component implementation demonstrating Class & Style Bindings using Vue 3 Composition API and <script setup> syntax:

<script setup>
import { ref, computed } from 'vue';

// Define reactive state for Class & Style Bindings
const title = ref('Class & Style Bindings Demonstration');
const count = ref(0);
const items = ref(['Vue 3 Composition API', 'Vite Bundler', 'Pinia State']);

const doubleCount = computed(() => count.value * 2);

function increment() {
  count.value++;
}
</script>

<template>
  <div class="vue-card">
    <h2>{{ title }}</h2>
    <p>Current Counter: <strong>{{ count }}</strong> (Double: {{ doubleCount }})</p>
    <button @click="increment" class="btn">➕ Increment Counter</button>

    <ul style="margin-top: 12px;">
      <li v-for="(item, idx) in items" :key="idx">{{ item }}</li>
    </ul>
  </div>
</template>

<style scoped>
.vue-card {
  background: var(--bg2);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 16px;
  color: var(--text);
}
.btn {
  background: #42b883;
  color: #ffffff;
  border: none;
  padding: 8px 16px;
  border-radius: 6px;
  font-weight: 600;
  cursor: pointer;
}
</style>

In the Composition API snippet above, notice how ref() tracks reactive primitive state while template event listeners (@click) automatically trigger interface re-renders.

Review the comparative specification table below to understand how Vue 3 features operate across development scenarios:

When engineering scalable frontend applications with Vue 3, adhere to production architecture best practices:

// composables/useFetchData.js
import { ref } from 'vue';

export function useFetchData(url) {
  const data = ref(null);
  const error = ref(null);
  const loading = ref(true);

  async function fetchData() {
    loading.value = true;
    try {
      const res = await fetch(url);
      data.value = await res.json();
    } catch (err) {
      error.value = err.message;
    } finally {
      loading.value = false;
    }
  }

  fetchData();

  return { data, error, loading, refetch: fetchData };
}

Avoid these common beginner and intermediate Vue developer mistakes:

• Pitfall 1: Forgetting .value in Script. Accessing a ref() inside <script> without .value returns the Ref object rather than its inner primitive. Solution: Always access myRef.value inside JavaScript code.
• Pitfall 2: Destructuring reactive() Objects. Destructuring properties directly from a reactive() object breaks reactivity tracking. Solution: Use toRefs(myReactiveObj) before destructuring.
• Pitfall 3: Mutating Props Directly. Mutating a prop in a child component violates one-way data flow. Solution: Emit a custom event (emit('update:propName')) or use defineModel().