Explain how template method calls are executed during render, why they run again on every component re-render, the performance/correctness pitfalls (expensive work, unstable references, side effects), and when to prefer computed properties or precomputed data.
Interview answer drill
Use this Vue interview question to rehearse a quick answer, common mistake, follow-up, and production pitfall.
What happens when you call methods inside Vue templates?Frontend interview answer
Interview focus
This Vue interview question tests whether you can explain Happens When You Call Methods in Vue Templates, connect it to production trade-offs, and handle common follow-up questions.
- Happens When You Call Methods in Vue Templates explanation without falling back to memorized docs wording
- Templates and Methods reasoning, edge cases, and production failure modes
- How you would answer the most likely Vue interview follow-up
Interview quick answer
Full interview answer
Core idea
Anything you reference in a Vue template is evaluated during the component’s render. A method call in the template is just a function call inside the compiled render function. That means:
• The method runs on the initial render.
• The method runs again on every subsequent re-render of that component.
Vue will track reactive reads that happen inside the method (because it runs during render), but the result is not cached like a computed property.
Approach | How often it runs | Caching | Best for |
|---|---|---|---|
Method call in template: {{ format() }} | Every render of the component | No | Event-ish logic, cheap formatting, simple helpers |
Computed: {{ formatted }} | Only when its reactive deps change (then reused) | Yes (until invalidated) | Derived state, expensive transforms, stable references |
Inline expression: {{ a + b }} | Every render | No | Very small expressions only |
HTML
<script setup>
import { ref, computed } from 'vue';
const count = ref(0);
const theme = ref('light');
function expensiveFormat(n) {
// pretend heavy work
let s = '';
for (let i = 0; i < 50000; i++) s = String(n);
return `Count: ${s}`;
}
const formatted = computed(() => expensiveFormat(count.value));
</script>
<template>
<!-- Method: runs whenever this component re-renders (even if only theme changes) -->
<p>{{ expensiveFormat(count) }}</p>
<!-- Computed: recomputes only when count changes -->
<p>{{ formatted }}</p>
<button @click="count++">inc</button>
<button @click="theme = theme === 'light' ? 'dark' : 'light'">toggle theme</button>
</template>
Why this can hurt performance
A component can re-render for many reasons (any reactive dependency used in render changes). If you call a method in the template, it’s executed again even when the method’s “inputs” didn’t change. In lists, it’s worse: a method used inside v-for can run per item per render.
Pitfall | What you’ll see | Fix |
|---|---|---|
Expensive method in template | UI jank / slow typing / slow toggles | Move work into a computed, or precompute once (e.g., computed map / cached lookup) |
Method allocates new objects/arrays each render | Child components update unnecessarily (new prop reference each render) | Return stable references via computed, or compute once and reuse |
Method has side effects (mutates reactive state, logs, API calls) | Infinite update loops, warnings, repeated API calls | Keep template-called methods pure; do side effects in events/watchers |
Method depends on params (e.g., format(item)) | You can’t just “convert to computed” 1:1 | Precompute a derived structure (Map/object) via computed; or memoize by key |
When it’s OK to use a method in the template
• It’s cheap (simple string/number formatting).
• It’s pure (no state writes, no I/O).
• It doesn’t allocate large new structures on every call.
Rule of thumb: if you’d be annoyed seeing it run on every render in a profiler, make it a computed (or precomputed data) instead.
Similar questions
Guides
Preparing for interviews?
Use this as one explanation rep, then continue with the Vue.js interview questions cluster or a guided prep path.