Vue JS Interview Questions and Answers
Question - 121 : - Explain the structure of createElement with arguments?
Answer - 121 : -
All virtual nodes(VNodes) in the component tree must be unique.i.e, You can't write duplicated nodes in a straightforward way. If you want to duplicate the same element/component many times then you should use factory function.
The below render function is invalid where you are trying to duplicate h1 element 3 times,
render: function (createElement) {
var myHeadingVNode = createElement('h1', 'This is a Virtual Node')
return createElement('div', [
myHeadingVNode, myHeadingVNode, myHeadingVNode
])
}
You can make duplicates with factory function,
render: function (createElement) {
return createElement('div',
Array.apply(null, { length: 3 }).map(function () {
return createElement('h1', 'This is a Virtual Node')
})
)
}
Question - 122 : - What are functional components?
Answer - 122 : -
The functional components are just simple functions to create simple components just by passing a context. Every functional component follows two rules,
Stateless: It doesn’t keep any state by itself
Instanceless: It has no instance, thus no this
You need to define functional: true to make it functional. Let's take an example of functional components,
Vue.component('my-component', {
functional: true,
// Props are optional
props: {
// ...
},
// To compensate for the lack of an instance,
// we are now provided a 2nd context argument.
render: function (createElement, context) {
// ...
}
})
Question - 123 : - What are the similarities between VueJS and ReactJS?
Answer - 123 : -
Even though ReactJS and VueJS are two different frameworks there are few similarities(apart from the common goal of utilized in interface design) between them.
- Both frameworks are based on the Virtual DOM model
- They provide features such Component-based structure and reactivity
- They are intended for working with the root library, while all the additional tasks are transferred to other libraries(routing, state management etc).
Question - 124 : - What are the advantages of VueJS over ReactJS?
Answer - 124 : -
Vue has the following advantages over React
- Vue is smaller and faster
- The convenient templates ease the process of developing
- It has simpler javascript syntax without learning JSX
Question - 125 : - What are the advantages of ReactJS over VueJS?
Answer - 125 : -
React has the following advantages over Vue
- ReactJS gives more flexibility in large apps developing
- Easy to test
- Well-suited for mobile apps creation
- The eco system is quite big and well matured.
Question - 126 : - What is the purpose of keep alive tag?
Answer - 126 : -
Keep-alive tag is an abstract component used to preserve component state or avoid re-rendering. When you wrapped tag around a dynamic component, it caches the inactive component instances without destroying them.
Let's see the example usage of it,
When there are multiple conditional children, it requires that only one child is rendered at a time.
Question - 127 : - What are inline templates?
Answer - 127 : -
If you keep an inline-template on a child component then it will use its inner content as a template instead of treating as reusable independent content.
Inline templates
Treated as component component owne content
Question - 128 : - What are X Templates?
Answer - 128 : -
Apart from regular templates and inline templates, you can also define templates using a script element with the type text/x-template and then referencing the template by an id.
Let's create a x-template for simple use case as below,
Now you can define the template using reference id,
Vue.component('x-template-example', {
template: '#script-template'
})
Question - 129 : - What are recursive components?
Answer - 129 : -
The Components that can recursively invoke themselves in their own template are known as recursive components.
Vue.component('recursive-component', {
template: `
`
});
Recursive components are useful for displaying comments on a blog, nested menus, or basically anything where the parent and child are the same, eventhough with different content.
Question - 130 : - How do you resolve circular dependencies between components?
Answer - 130 : -
In complex applications, vue components will actually be each other’s descendent and ancestor in the render tree.
Let's say componentA and componentB included in their respective templates which makes circular dependency,
//ComponentA
//ComponentB
This can be solved by either registering(or wait until) the child component in beforeCreate hook or using webpack's asynchronous import while registering the component,
Solution1:
beforeCreate: function () {
this.$options.components.componentB = require('./component-b.vue').default
}
Solution2:
components: {
componentB: () => import('./component-b.vue')
}