The first five Essentials chapters define the vocabulary every other chapter uses. Interviewers rarely ask about them directly, but they catch gaps through them: a candidate who does not know that a ref only unwraps at the top level of a template, or that v-bind can bind a whole object, or that a computed getter must be side-effect free, is telling the interviewer where to dig.

Know — Creating an Application

• createApp(RootComponent) returns an application instance; app.mount('#app') renders the root component into the container and returns the root component instance. Mount last, after registering components, directives and plugins.
• Multiple applications can live on one page, each with its own configuration and scope.
• app.config holds app-level options: errorHandler, warnHandler, performance, compilerOptions, globalProperties (the Vue 3 replacement for Vue.prototype), optionMergeStrategies, idPrefix (3.5), throwUnhandledErrorInProduction (3.5).
• Global registration: app.component('TodoItem', TodoItem), app.directive(...), app.use(plugin), app.provide(key, value).
• In-DOM root template: if the root component has no template, Vue uses the container's innerHTML; that requires the full build with the compiler.

Know — Template Syntax

• Text interpolation {{ msg }} renders text, HTML-escaped. v-html renders raw HTML: never for user content (XSS), and it cannot compose templates.
• Attribute binding v-bind:id="id", shorthand :id, and same-name shorthand :id alone (3.4+) meaning :id="id". Boolean attributes (disabled) are included when the value is truthy or "" and omitted when falsy. v-bind="obj" binds several attributes at once.
• Expressions are single JavaScript expressions (no statements, no flow control), evaluated in a sandbox with a whitelist of globals (Math, Date, …); extend it through app.config.globalProperties. Functions called in bindings run on every update and must not have side effects.
• Directives are v- attributes whose value is an expression; arguments follow a colon (v-on:click, shorthand @click), dynamic arguments use brackets (:[attrName], must evaluate to a string or null; no spaces or quotes, and lowercase in in-DOM templates), modifiers follow a dot (@submit.prevent).

Know — Reactivity Fundamentals

• ref() wraps a value in an object with .value; refs unwrap automatically in templates, but only top-level refs: {{ object.id + 1 }} does not unwrap object.id if id is a ref, while {{ object.id }} alone does (final value of a text interpolation unwraps).
• Why refs: Vue needs a getter/setter to track reads and writes; a plain variable cannot be observed. Refs are deeply reactive by default; shallowRef opts out for the nested levels.
• DOM updates are batched to the next tick; await nextTick() to read the updated DOM.
• reactive() returns a Proxy of an object (objects, arrays, Map, Set); reactive(raw) !== raw, calling it twice on the same raw returns the same proxy, and nested objects are proxied on access. Limitations: only object types; cannot be replaced (the reference is lost); destructuring copies plain values.
• Ref unwrapping in reactive objects: a ref stored as a property of a reactive object is unwrapped on access and assigning a new ref replaces it; refs inside reactive arrays or collections are not unwrapped.

Know — Computed Properties

• A computed is cached by its reactive dependencies and re-evaluates only when they change; a method call in a template runs on every render. Use a method when you do not want caching.
• Writable computed takes { get, set }. Previous value (3.4+): the getter receives the previous value as its argument.
• Best practices: getters must be side-effect free (no async, no DOM, no mutations); treat the computed value as read-only, derive a new value instead of mutating it.
• Since 3.4 a computed only notifies dependents when its computed value actually changed (Object.is), so returning a new object every time defeats that optimisation.

Know — Class and Style Bindings

• :class accepts a string, an object ({ active: isActive }), or an array (which may contain objects and ternaries); it merges with the static class.
• On a component with a single root, classes are added to the root element; with multiple roots you pick the element with :class="$attrs.class".
• :style accepts an object (camelCase or quoted kebab-case keys) or an array of objects; Vue auto-prefixes vendor properties and accepts an array of values for one property (display: ['-webkit-box', '-ms-flexbox', 'flex']), rendering the last supported one.

How it works

The facts above in one component:

<script setup lang="ts">
const id = 'title-field'
const title = ref('Hello')
const state = reactive({ count: 0, tags: [ref('a')] }) // refs inside arrays are NOT unwrapped
const attrs = { placeholder: 'Type…', maxlength: 40 }
const isActive = ref(true)
const size = ref<'sm' | 'lg'>('sm')

// Cached: recomputes only when title changes; receives the previous value since 3.4
const shout = computed(prev => (title.value ? `${title.value.toUpperCase()}!` : prev ?? ''))

// Writable computed
const upper = computed({
  get: () => title.value.toUpperCase(),
  set: v => { title.value = v.toLowerCase() },
})
</script>

<template>
  <!-- :id same-name shorthand (3.4+), object binding, boolean attribute, dynamic argument -->
  <label :for="id">Title</label>
  <input :id v-model="title" v-bind="attrs" :disabled="!isActive" :[isActive ? 'data-on' : 'data-off']="''">

  <p>{{ shout }} / {{ upper }} / {{ state.count }} / {{ state.tags[0].value }}</p>

  <!-- class object + array, style object with auto-prefixing -->
  <div :class="[{ active: isActive }, `size-${size}`]" :style="{ display: 'flex', userSelect: 'none' }" />
</template>

Exercise

Be able to say