Vue JS Interview Questions and Answers
Question - 21 : - What is a single-file component in Vue.js?
Answer - 21 : - In Vue.js, a single-file component is a file with a .vue extension that contains a Vue component. The single-file component consists of the component's template, logic, and styles, all bundled together in one file. It also contains one
Question - 25 : - What is the usage of ref in Vue.js?
Answer - 25 : - The ref if an attribute that is used to access a component directly. Despite having the props and events, if you want to access a child component directly, you can assign a reference ID to the child component using the ref attribute.
Question - 26 : - What is Vue Router? What do you understand by Vue Router?
Answer - 26 : - The official router of Vue.js is called Vue Router. It is by default integrated with Vue.js core and used to build Single Page Applications with Vue.js.
Following is the list of important features of Vue Router:
o Vue Router follows a modular, component-based router configuration.
o Very easy to implement.
o You can customize the Scroll Behavior.
o Provides Nested route/view mapping.
o Provides fine-grained navigation control.
o Route params, query, wildcards
o js' transition system provides View transition effects.
o Links with automatic active CSS classes.
o HTML5 history mode or hash mode, with auto-fallback in IE9.
Question - 27 : - What is the difference between slots and scoped slots in Vue.js?
Answer - 27 : - In Vue.js, a slot is a placeholder in a child component filled with content passed from the parent component.
In the slot, the component is compiled in the parent's scope and then passed to the child component. So, it is not possible to use child component properties in a slot's content.
In Scoped slot, you can pass child component data to the parent scope and then use it in slot content.
Question - 28 : - What is the virtual DOM in Vue.js?
Answer - 28 : - In Vue.js, the virtual DOM is a tree-like data structure or a collection of JavaScript objects that represents DOM nodes. Vue.js manage the nodes of the virtual DOM, and that should be rendered on the page. These objects are called "virtual nodes" or VNodes.
Question - 29 : - What is the main purpose of using virtual DOM in Vue.js? / What is the benefit of using virtual DOM in Vue.js?
Answer - 29 : - The virtual DOM's main purpose is to make DOM manipulation faster and more efficient. It becomes very crucial when you have a lot of nodes in your DOM. In this case, updating these nodes is a very expensive task for processing power and resources required. Here, virtual DOM comes into action and makes JavaScript object significantly faster. Vue.js automatically organizes DOM updates in batches to enhance efficiency.
Question - 30 : - How does data flow between components in a Vue.js app?
Answer - 30 : - In Vue.js, the data is passed to child components from the parent component using a prop or a custom attribute. This custom attribute becomes a property on the child component instance. This procedure is called a one-way data flow.
Once the parent component updates a prop value, the child component is automatically updated. The child component can communicate back to the parent via an event, but mutating a property inside a child component should not be done. It does not affect the parent component also unless it is an object or array. When the child component instance emits an event, the parent assigns a handler to that event, and data is passed back to the parent.