Consider this Vue component using mustache syntax for interpolation:
<template>
<div>Hello, {{ name }}!</div>
</template>
<script setup>
const name = 'Alice'
</script>What is the rendered output inside the <div>?
<template>
<div>Hello, {{ name }}!</div>
</template>
<script setup>
const name = 'Alice'
</script>Mustache syntax {{ }} replaces the variable with its value.
The mustache syntax {{ name }} inserts the value of the variable name which is 'Alice'. So the output is 'Hello, Alice!'.
Given this Vue component:
<template>
<div>Count: {{ count }}</div>
<button @click="increment">Add</button>
</template>
<script setup>
import { ref } from 'vue'
const count = ref(0)
function increment() {
count.value++
}
</script>What happens to the displayed text when the button is clicked once?
<template>
<div>Count: {{ count }}</div>
<button @click="increment">Add</button>
</template>
<script setup>
import { ref } from 'vue'
const count = ref(0)
function increment() {
count.value++
}
</script>Reactive variables update the UI automatically when changed.
The count variable is reactive using ref. When increment runs, count.value increases by 1, so the displayed text updates to 'Count: 1'.
Which Vue template snippet correctly interpolates a computed property greeting?
<script setup> import { computed } from 'vue' const name = 'Bob' const greeting = computed(() => `Hi, ${name}!`) </script>
In Vue templates, refs and computed properties are automatically unwrapped.
In Vue 3 templates, computed properties return a readonly ref that is automatically unwrapped, so {{ greeting }} displays the value directly (e.g., 'Hi, Bob!'). .value is unnecessary in templates (used in JS). {{ greeting() }} errors as it's not a function.
Look at this Vue component:
<template>
<p>User: {{ user.name }}</p>
</template>
<script setup>
const user = null
</script>Why does the page show 'User: undefined' instead of an error or empty text?
<template>
<p>User: {{ user.name }}</p>
</template>
<script setup>
const user = null
</script>Think about what happens when you access a property on null in JavaScript.
Accessing user.name when user is null results in a runtime error in JavaScript. But Vue's template compiler safely returns undefined for such cases to avoid crashing, so it displays 'undefined'.
Why does Vue use the mustache syntax {{ }} for text interpolation instead of plain JavaScript expressions directly in the template?
Think about how templates mix code and HTML safely.
Mustache syntax clearly marks where dynamic data goes, helping Vue safely update the DOM and avoid security issues like cross-site scripting (XSS). It also keeps templates readable by separating code from markup.