Vue JS Interview Questions and Answers
Question - 91 : - How can you redirect to another page in Vue.js?
Answer - 91 : -
In Vue.js, if you are using vue-router, you should use router.go(path) to navigate to any particular route. You can access the router from within a component using this.$router. router.go() changed in Vue.js 2.0. You can use router.push({ name: "yourroutename"}) or just router.push("yourroutename") now to redirect.
Question - 92 : - What do you understand by slots in Vue.js?
Answer - 92 : -
In Vue.js, the element is used to serve as distribution outlets for content.
Let's take an example to create an alert component with slots for content insertion.
Example:
In Vue.js, the element is used to serve as distribution outlets for content.
Let's take an example to create an alert component with slots for content insertion.
Example:
Vue.component('alert', {
template: `
})
We can insert dynamic content as follows:
There is an issue with in application.
Question - 93 : - What are the problems solved by Single File Components in Vue.js?
Answer - 93 : -
In Vue.js, the Single File Components are used to solve the common problems in a JavaScript-driven application with a .vue extension.
Following is a list of issues solved by Single File Components in Vue.js:
- Global definitions specify unique names for every component.
- String templates lack syntax highlighting and require ugly slashes for multiline HTML.
- No CSS support. It means while HTML and JavaScript are modularized into components, CSS is conspicuously left out.
- No, build step restrictions to HTML and ES5 JavaScript, rather than preprocessors like Pug and Babel.
Question - 94 : - What are the different ways to create filters?
Answer - 94 : -
There are two ways to define filters:
Local filters: You can define local filters in a component's options. In this case, filter is applicable to that specific component.
filters: {
capitalize: function (value) {
if (!value) return ''
valuevalue = value.toString()
return value.charAt(0).toUpperCase() + value.slice(1)
}
}
Global filters: You can also define a filter globally before creating the Vue instance. In this case, filter is applicable to all the components within the vue instance,
Vue.filter('capitalize', function (value) {
if (!value) return ''
valuevalue = value.toString()
return value.charAt(0).toUpperCase() + value.slice(1)
})
new Vue({
// ...
})
Question - 95 : - What do you understand by mapState helper?
Answer - 95 : -
In the Vuex application, creating a computed property every time whenever we want to access the store's state property or getter is going to be repetitive, difficult, and boring, especially if a component needs more than one state property. In this situation, we can use the mapState helper of vuex, which generates computed getter functions for us.
In the following increment example, we have demonstrated the mapState helper:
// in full builds helpers are exposed as Vuex.mapState
import { mapState } from 'vuex'
export default {
// ...
computed: mapState({
// arrow functions can make the code very succinct!
username: state => state.username,
// passing the string value 'username' is same as `state => state.username`
usernameAlias: 'username',
// to access local state with `this`, a normal function must be used
greeting (state) {
return this.localTitle + state.username
}
})
}
You can also pass a string array to mapState when the name of a mapped computed property is the same as a state sub-tree name
computed: mapState([
// map this.username to store.state.username
'username'
])
Question - 96 : - What are the most prominent features of stylelint?
Answer - 96 : -
Following is a list of the most prominent features of stylelint:
- The stylelint has more than 160 built-in rules to catch errors, apply limits and enforce stylistic conventions.
- It understands the latest CSS syntax, including custom properties and level 4 selectors.
- It extracts the embedded styles from HTML, markdown, and CSS-in-JS object & template literals.
- It is also used to parse CSS-like syntaxes like SCSS, Sass, Less, and SugarSS.
- It supports for reusing community plugins and creating their plugins.
Question - 97 : - What are the most common cause of memory leaks in Vue.js apps, and how can they be solved?
Answer - 97 : -
In Vue.js applications, memory leaks often come from using third-party libraries that create their own instances and/or manipulate the DOM. The v-if directive and the Vue Router destroy Vue component instances. To overcome this issue, do a cleanup action before the component gets destroyed. It should be done manually in the beforeDestroy() lifecycle hook.
For example, suppose we have a fictional library named PowerGraph.js, inside our component. It creates a graph instance that displays some data on the page:
mounted() {
this.chart = new PowerGraph();
}
Here, we have to call the graph instance's destroy() method or implement our own cleanup method:
beforeDestroy() {
this.chart.destroy();
}
If we don't do cleanup action before our component gets destroyed, then that memory will never be released, and this will be a memory leak.
Question - 98 : - What is dynamic route matching?
Answer - 98 : -
Sometimes it may be required to map routes to the same component based on a pattern.
Let's take a user component with the mapped URLs like /user/john/post/123 and /user/jack/post/235 using dynamic segments,
const User = {
template: '
User {{ $route.params.name }}, PostId: {{ route.params.postid }}
'
}
const router = new VueRouter({
routes: [
// dynamic segments start with a colon
{ path: '/user/:name/post/:postid', component: User }
]
})
Question - 99 : - How to make router param changes as reactive?
Answer - 99 : -
When you navigate from one URL to other(mapped with a single component) using routes with params then the same component instance will be reused. Even though it is more efficient than destroying the old instance and then creating a new one, the lifecycle hooks of the component will not be called.
This problem can be solved using either of the below approaches,
Watch the $route object:
const User = {
template: '
User {{ $route.params.name }}
',
watch: {
'$route' (to, from) {
// react to route changes...
}
}
}
Use beforeRouteUpdate navigation guard: This is only available since 2.2 version.
const User = {
template: '
User {{ $route.params.name }}
',
beforeRouteUpdate (to, from, next) {
// react to route changes and then call next()
}
}
Note that the beforeRouteEnter guard does NOT have access to this. Instead you can pass a callback to next to access the vm instance.
Question - 100 : - What is route matching priority?
Answer - 100 : -
Sometimes the URL might be matched by multiple routes and the confusion of which route need to be mapped is resolved by route matching priority. The priority is based on order of routes configuration. i.e, The route which declared first has higher priority.
const router = new VueRouter({
routes: [
// dynamic segments start with a colon
{ path: '/user/:name', component: User } // This route gets higher priority
{ path: '/user/:name', component: Admin }
{ path: '/user/:name', component: Customer }
]
})