Vue.js Interview Questions and Answers

Vue 3 batches reactive updates with a scheduler. When trigger fires, the affected render effects and watchers are queued and flushed in a microtask, so several synchronous mutations result in one DOM update. The queue is deduplicated and sorted by component id to keep parent-before-child order.

watch and watchEffect accept a flush option:

• pre (default) runs before the component re-renders.
• post runs after the DOM has been updated.
• sync runs immediately on every change and can cause loops.

nextTick() returns a promise that resolves after the queue is flushed, which is useful for reading refs right after a state change.

state.value = 1;
await nextTick();
console.log(el.value.textContent);

You can stop a watcher with its handle or group several effects with effectScope so they dispose together, which matters for composables. Infinite loops occur when a watcher mutates its own dependency; guard with a flag or use computed instead.

Practical Vue 3 optimisations: use computed instead of methods in templates so results are cached, and split large components. Prefer shallowRef or shallowReactive for large immutable datasets so Vue does not deep-proxy every object, and wrap constants in markRaw.

Use v-once for static content and v-memo to skip re-rendering subtrees when selected dependencies are unchanged. Virtualise long lists rather than rendering thousands of rows, and use KeepAlive only where state must persist.

Keep the reactivity graph narrow by avoiding huge reactive objects and reading .value only when needed. Lazy-load routes and heavy components with defineAsyncComponent, and split vendor bundles so caching survives deploys.

For SSR, enable streaming and avoid blocking work in setup. Measure first with the browser performance panel and the Vue Devtools profiler; premature micro-optimisation often hurts readability more than it helps, and the profiler usually shows one or two real bottlenecks.

In VueJS, the templates are very powerful and recommended to build HTML as part of your application. However, some
of the special cases like dynamic component creation based on input or slot value can be achieved through render
functions. Also, these functions gives the full programmatic power of javascript eco system.

****

Render function is a normal function which receives a createElement method as it's first argument used to create
virtual nodes. Internally Vue.js' templates actually compile down to render functions at build time. Hence
templates are just syntactic sugar of render functions.

Let's take an example of simple Div markup and corresponding render function.
The HTML markup can be written in template tag as below,

<template>
  <div :class="{'is-rounded': isRounded}">
    <p>Welcome to Vue render functions</p>
  </div>
</template>

and the compiled down or explicit render function would appear as below,

render: function (createElement) {
  return createElement('div', {
    'class': {
      'is-rounded': this.isRounded
     }
  }, [
    createElement('p', 'Welcome to Vue render functions')
  ]);
}

Note: The react components are built with render functions in JSX.

****

VueJS provides proprietary alternatives and plain javascript usage for the template features.

Let's list down them in a table for comparison,

| Templates | Render function |
| ----------------------------------------------------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| Conditional and looping directives: v-if and v-for | Use JavaScript's if/else and map concepts |
| Two-way binding: v-model | Apply own JS logic with value binding and event binding |
| Capture Event modifiers: .passive, .capture, .once and .capture.once or .once.capture | &, !, ~ and ~! |
| Event and key modifiers: .stop, .prevent, .self, keys(.enter, .13) and Modifiers Keys(.ctrl, .alt, .shift, .meta) | Use javascript solutions: event.stopPropagation(), event.preventDefault(), if (event.target !== event.currentTarget) return, if (event.keyCode !== 13) return and if (!event.ctrlKey) return |
| Slots: slot attributes | Render functions provide this.$slots and this.$scopedSlots instance properties |

****

In large applications, we may need to divide the app into smaller chunks and only load a component from the server
when it's needed. To make this happen, Vue allows you to define your component as a factory function that
asynchronously resolves your component definition. These components are known as async component.

Let's see an example of async component using webpack code-splitting feature,

Vue.component('async-webpack-example', function (resolve, reject) {
  // Webpack automatically split your built code into bundles which are loaded over Ajax requests.
  require(['./my-async-component'], resolve)
})

Vue will only trigger the factory function when the component needs to be rendered and will cache the result for
future re-renders.

****

Async component factory is useful to resolve the component asynchronously. The async component factory can return
an object of the below format.

const AsyncComponent = () => ({
  // The component to load (should be a Promise)
  component: import('./MyComponent.vue'),
  // A component to use while the async component is loading
  loading: LoadingComponent,
  // A component to use if the load fails
  error: ErrorComponent,
  // Delay before showing the loading component. Default: 200ms.
  delay: 200,
  // The error component will be displayed if a timeout is
  // provided and exceeded. Default: Infinity.
  timeout: 3000
})

****

The compiler is is responsible for compiling template strings into JavaScript render functions.

For example, the below code snippet shows the difference of templates which need compiler and not,

// this requires the compiler
new Vue({
  template: '<div>{{ message }}</div>'
})

// this does not
new Vue({
  render (h) {
    return h('div', this.message)
  }
})

****