71. How can you write duplicate virtual nodes in a component?
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,
```javascript
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,
```javascript
render: function (createElement) {
return createElement('div',
Array.apply(null, { length: 3 }).map(function () {
return createElement('h1', 'This is a Virtual Node')
})
)
}
```
72. List down the template equivalents in render functions?
VueJS provides proprietary alternatives and plain javascript usage for the template features. Let's list down them in a table for comparision,
| 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|
73. What are functional components?
The functional components are just simple functions to create simple components just by passing a context. Every functional component follows two rules,
1. **Stateless:** It doesn’t keep any state by itself
2. **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,
```javascript
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) {
// ...
}
})
```
**Note:** The functional components are quite popular in React community too.
74. What are the similarities between VueJS and ReactJS?
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.
1. Both frameworks are based on the **Virtual DOM** model
2. They provide features such Component-based structure and reactivity
3. They are intended for working with the root library, while all the additional tasks are transferred to other libraries(routing, state management etc).
75. What is the difference between VueJS and ReactJS?
Even though VueJS and ReactJS share few common features there are many difference between them. Let's list down them in a table format.
| Feature | VueJS | ReactJS |
|---- | --------- | ---- |
| Type | JavaScript MVC Framework | JavaScript Library |
| Platform | Primarily focused on web development | Both Web and Native |
| Learning Curve | A steep learning curve and requires deep knowledge | A steep learning curve and requires deep knowledge |
| Simplicity | Vue is simpler than React | React is more complex than Vue |
| Bootstrap Application | Vue-cli | CRA (Create React App) |
76. What are the advantages of VueJS over ReactJS?
Vue has the following advantages over React
1. Vue is smaller and faster
2. The convenient templates ease the process of developing
3. It has simpler javascript syntax without learning JSX
77. What are the advantages of ReactJS over VueJS?
React has the following advantages over Vue
1. ReactJS gives more flexibility in large apps developing
2. Easy to test
3. Well-suited for mobile apps creation
4. The eco system is quite big and well matured.
78. What are the differences between VueJS and AngularJS?
The the syntax of Vue and Angular is common at some points because Angular is the basis for VueJS development in the beginning. But there are many differences between VueJS and Angular as listed,
| Feature | VueJS | AngularJS |
|---- | --------- | ---- |
| Complexity | Easy to learn, simple API and design | The framework is bit huge and need some learning curve on typescript etc |
| Binding of Data | One-way binding | Two-way binding |
| Learning Curve | A steep learning curve and requires deep knowledge | A steep learning curve and requires deep knowledge |
| Founders | Created by Former Google Employee | Powered by Google |
| Initial Release | February 2014 | September 2016 |
| Model | Based on Virtual DOM(Document Object Model) | Based on MVC(Model-View-Controller) |
| Written in | JavaScript | TypeScript |
79. What are dynamic components?
The dynamic component is used to dynamically switch beetween multiple components using **<component>** element and pass data to v-bind:is attribute.
Let's create a dynamic component to switch between different pages of a website,
```javascript
new Vue({
el: '#app',
data: {
currentPage: 'home'
},
components: {
home: {
template: "<p>Home</p>"
},
about: {
template: "<p>About</p>"
},
contact: {
template: "<p>Contact</p>"
}
}
})
```
Now you can use the dynamic component which holds the current page,
```html
<div id="app">
<component v-bind:is="currentPage">
<!-- component changes when currentPage changes! -->
<!-- output: Home -->
</component>
</div>
```
80. What is the purpose of keep alive tag?
Keep-alive tag is an abstract component used to preserve component state or avoid re-rendering. When you wrapped <keep-alive> tag around a dynamic component, it caches the inactive component instances without destroying them.
Let's see the example usage of it,
```javascript
<!-- Inactive components will be cached! -->
<keep-alive>
<component v-bind:is="currentTabComponent"></component>
</keep-alive>
```
When there are multiple conditional children, it requires that only one child is rendered at a time.
```javascript
<!-- multiple conditional children -->
<keep-alive>
<comp-a v-if="a > 1"></comp-a>
<comp-b v-else></comp-b>
</keep-alive>
```
**Note:** Remember that keep-alive tag doesn’t render a DOM element itself, and doesn’t show up in the component parent chain.
81. What are async components?
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,
```javascript
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.
82. What is the structure of async component factory?
Async component factory is useful to resolve the component asynchronously. The async component factory can return an object of the below format.
```javascript
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
})
```
83. What are inline templates?
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.
```javascript
<my-component inline-template>
<div>
<h1>Inline templates</h1>
<p>Treated as component component owne content</p>
</div>
</my-component>
```
**Note:** Even though this inline-templates gives more flexibility for template authoring, it is recommended to define template using template property or <template> tag inside .vue component.
84. What are X Templates?
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,
```javascript
<script type="text/x-template" id="script-template">
<p>Welcome to X-Template feature</p>
</script>
```
Now you can define the template using reference id,
```javascript
Vue.component('x-template-example', {
template: '#script-template'
})
```
85. What are recursive components?
The Components that can recursively invoke themselves in their own template are known as recursive components.
```javascript
Vue.component('recursive-component', {
template: `<!--Invoking myself!-->
<recursive-component></recursive-component>`
});
```
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.
**Note:** Remember that recursive component can lead infinite loops with `max stack size exceeded` error, so make sure recursive invocation is conditional(for example, v-if directive).
86. How do you resolve circular dependencies between components?
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,
```javascript
//ComponentA
<div>
<component-b >
</div>
```
```javascript
//ComponentB
<div>
<component-b >
</div>
```
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:**
```javascript
beforeCreate: function () {
this.$options.components.componentB = require('./component-b.vue').default
}
```
**Solution2:**
```javascript
components: {
componentB: () => import('./component-b.vue')
}
```
87. How do you make sure vue application is CSP complaint?
Some environments(Google Chrome Apps) prohibits the usage of `new Function()` for evaluating expressions and the full builds of vue applications depends on this feature to compile templates. Due to this reason, the full builds of VueJS application are not CSP complaint. In this case you can use **runtime-only** builds with Webpack + vue-loader or Browserify + vueify technology stack through which templates will be precompiled into render functions. This way you can make sure VueJS applications are 100% CSP complaint.
88. What is the difference between full and runtime only builds?
There are two types of builds provided by VueJS,
**1. Full:** These are the builds that contain both the compiler and the runtime.
**2. Runtime Only:** These builds doesn't include compiler but the code is responsible for creating Vue instances, rendering and patching virtual DOM. These are about 6KB lighter min+gzip.
89. List down different builds of vuejs?
Below are the list of different builds of VueJS based on type of build,
| Type | UMD | CommonJS | ES Module (for bundlers) | ES Module (for browsers) |
|---- | --------- | ---- | ---- | --- |
| Full | vue.js | vue.common.js | vue.esm.js | vue.esm.browser.js |
| Runtime only | vue.runtime.js | vue.runtime.common.js | vue.runtime.esm.js | NA |
| Full (production) | vue.min.js | NA | NA | vue.esm.browser.min.js |
| Runtime-only (production) | vue.runtime.min.js | NA | NA | NA |
90. How do you configure vuejs in webpack?
You can configure vueJS in webpack using alias as below,
```javascript
module.exports = {
// ...
resolve: {
alias: {
'vue$': 'vue/dist/vue.esm.js' // 'vue/dist/vue.common.js' for webpack 1
}
}
}
```
91. What is the purpose of vuejs compiler?
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,
```javascript
// this requires the compiler
new Vue({
template: '<div>{{ message }}</div>'
})
// this does not
new Vue({
render (h) {
return h('div', this.message)
}
})
```
92. What is Dev Tools and its purpose?
DevTools is a browser extension allowing you to inspect and debug your Vue applications in a more user-friendly interface. You can find the below extensions for different browsers or environments,
1. Chrome Extension
2. Firefox Addon
3. Standalone Electron app (works with any environment)
The DevTools plugins can be used as shown in the below snapshot,
<img src="https://github.com/sudheerj/vuejs-interview-questions/blob/master/images/DevTools.png" width="700" height="500">
**Note:**
1. If the page uses a production/minified build of Vue.js, devtools inspection is disabled by default so the Vue pane won't show up.
2. To make it work for pages opened via `file://` protocol, you need to check "Allow access to file URLs" for this extension in Chrome's extension management panel.
93. What is the browser support of VueJS?
It supports all ECMAScript5 complaint browsers as mentioned in this [url](https://caniuse.com/#feat=es5). VueJS doesn't support IE8 browser and below, because it uses ECMAScript 5 features that are un-shimmable(require support from the underlying JS engine) in IE8.
94. How do you use various CDNs?
VueJS is available in jsdelivr, unpkg and cdnjs etc CDNs. Normally you can use them for prototyping or learning purposes. For example, you can use them using jsdelivr with latest versions as below,
```javascript
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.7/dist/vue.js"></script>
```
You can use it for native ES modules as below,
```javascript
<script type="module">
import Vue from 'https://cdn.jsdelivr.net/npm/vue@2.6.7/dist/vue.esm.browser.js'
</script>
```
**Note:** You can remove version number to get latest version.
95. How do you force update?
It is extremely rare situation of having to manually force an update despite the fact that no reactive data has changed. i.e, To force the Vue instance to re-render manually. You can do it force update using **vm.$forceUpdate()** API method.
**Note:** It does not affect all child components but only the instance itself and child components with inserted slot content.
96. What is the purpose of vuejs once directive?
If you want to render `a lot of static content` then you need to make sure it only evaluated once and then cached thereafter. In this case, you can use `v-once` directive by wrapping at the root level. The example usage of v-once directive would be as below,
```javascript
Vue.component('legal-terms', {
template: `
<div v-once>
<h1>Legal Terms</h1>
... a lot of static content goes here...
</div>
`
})
```
**Note:** It is recommended not to overuse unless there is slow rendering due to lot of static content.
97. How do you access the root instance?
The root instance(new Vue()) can be accessed with the `$root` property. Let's see the usage of root instance with an example. First let's create a root instance with properties and methods as below,
```javascript
// The root Vue instance
new Vue({
data: {
age: 26
},
computed: {
fullName: function () { /* ... */ }
},
methods: {
interest: function () { /* ... */ }
}
})
```
Now you can access root instance data and it's methods with in subcomponents as below,
```javascript
// Get root data
this.$root.age
// Set root data
this.$root.age = 29
// Access root computed properties
this.$root.fullName
// Call root methods
this.$root.interest()
```
It is recommend using Vuex to manage state instead of using root instance as a global store.
98. List out top 10 organizations using Vuejs?
Below are the top 10 organizations using VueJS for their applications or products,
1. Facebook - Used on marketing side of its Newsfeed
2. Netflix - Used in two internal apps for building movie streaming interfaces
3. Adobe - Used for Portfolio, a custom website builder designed to help users showcase their creative work
4. Xiaomi - Used for products where it sells from consumer electronics to software
5. Alibaba - Provide their apps an excellent experience to its customers
6. WizzAir - A budget airline WizzAir used for their customers user interface
7. EuroNews
8. Laracasts
9. GitLab
10. Laracasts
99. What is the purpose of renderError?
When the default render function encounters an error then you can use rennderError as an alternative render output. The error will be passed to renderError as the second argument. The example usage of renderError is as below,
```javacript
new Vue({
render (h) {
throw new Error('An error')
},
renderError (h, err) {
return h('div', { style: { color: 'red' }}, err.stack)
}
}).$mount('#app')
```
100. How do you access parent instance?
The $parent object refers to the **immediate outer scope**. The parent will be accessible as `this.$parent` for the child, and the child will be pushed into the parent’s $children array. It establishes a parent-child relationship between the two instances(parent and child). You can access parent data and properties similar to $root.
101. What is vuex?
Vuex is a state management pattern + library (Flux-inspired Application Architecture) for Vue.js applications. It serves as a centralized store for all the components in an application, with rules ensuring that the state can only be mutated in a predictable fashion.
102. What are the major components of State Management Pattern?
The state management has state, view and actions as major components. The pattern followed by these components in a application is known as State Management Pattern. Below are the components in a detail,
1. The **state**, which is the source of truth that drives our app
2. The **view**, which is just a declarative mapping of the state
3. The **actions**, which are the possible ways the state could change in reaction to user inputs from the view.
Let us take a counter example which follows state management pattern with the above 3 components,
```javascript
new Vue({
// state
data () {
return {
count: 0
}
},
// view
template: `
<div>{{ count }}</div>
`,
// actions
methods: {
increment () {
this.count++
}
}
})
```
103. How do you represent one way data flow in vuex?
Vue.js has a one-way data flow model, through the props property. The same concept can be represented in vuex has below,
<img src="https://github.com/sudheerj/vuejs-interview-questions/blob/master/images/flow.png" width="400" height="500">
104. What is a vuejs loader?
Vue loader is a loader for webpack that allows you to author Vue components in a format called Single-File Components (SFCs). For example, it authors HelloWorld component in a SFC,
```javascript
<template>
<div class="greeting">{{ message }}</div>
</template>
<script>
export default {
data () {
return {
message: 'Hello world for vueloader!'
}
}
}
</script>
<style>
.greeting {
color: blue;
}
</style>
```
105. How do you configure vue loader in webpack?
Vue Loader's configuration is a bit different from other loaders by adding Vue Loader's plugin to your webpack config. The vue loader plugin is required for cloning any other rules(js and css rules) defined and applying them to the corresponding language blocks(<script> and <style>) in .vue files.
For example, the simple demonistration of webpack configuration for vue loader would be as below,
```javascript
// webpack.config.js
const VueLoaderPlugin = require('vue-loader/lib/plugin')
module.exports = {
mode: 'development',
module: {
rules: [
{
test: /\.vue$/,
loader: 'vue-loader'
},
// this will apply to both plain `.js` files and `<script>` blocks in `.vue` files
{
test: /\.js$/,
loader: 'babel-loader'
},
// this will apply to both plain `.css` files and `<style>` blocks in `.vue` files
{
test: /\.css$/,
use: [
'vue-style-loader',
'css-loader'
]
}
]
},
plugins: [
// make sure to include the plugin for cloning and mapping them to respective language blocks
new VueLoaderPlugin()
]
}
```
Comments
Post a Comment
please do not enter any spam link in the comment box