Template Syntax and Reactivity

Overview

Vue templates are declarative projections of reactive state. You do not manipulate the DOM directly; you model state and let Vue reconcile UI changes predictably.

Reactivity Mental Model

State drives UI output

Each render is a function of current reactive state. When state changes, Vue schedules updates to affected parts of the tree.

import { ref, computed } from 'vue'

const items = ref([{ id: 1, done: false }, { id: 2, done: true }])
const completedCount = computed(() => items.value.filter(i => i.done).length)

Computed vs methods

• Use computed for derived values that should be cached per dependency graph.
• Use methods for event-triggered actions or non-cached calculations.

Template Directives

Conditional rendering

<p v-if="isAdmin">Admin Panel</p>
<p v-else>User Dashboard</p>

List rendering and keys

<li v-for="task in tasks" :key="task.id">
  {{ task.title }}
</li>

Never use unstable keys (like array index for mutable lists) in production features.

Event and input binding

<input v-model="form.email" type="email" />
<button @click="submit" :disabled="isSubmitting">Save</button>

Lifecycle and Effects

Fetching on mount

import { ref, onMounted } from 'vue'

const users = ref([])
onMounted(async () => {
  users.value = await fetch('/api/users').then(r => r.json())
})

Using watchers responsibly

Watchers are for side effects (logging, local storage sync, API trigger), not for primary data derivation that belongs in computed.

Learning Objectives

• Use directives like v-if, v-for, and v-model correctly.
• Model computed state and watchers without side-effect chaos.
• Understand lifecycle hooks and effect timing.

Common Mistakes

• Mutating nested objects in ways that bypass clear state ownership.
• Placing expensive computations directly in template expressions.
• Using watchers where computed state is sufficient.

Engineering Notes

Define a team rule: every non-trivial template must document where state originates (prop, store, local ref, or API composable).

Practice Scope

Deliver one production-style mini-feature, include implementation notes, and record one performance, reliability, or maintainability trade-off in your commit summary.

Back to roadmap: Vue Roadmap