Google News
logo
Vue.JS Interview Questions
A non-prop attribute is an attribute that is passed to a component, but does not have a corresponding prop defined.
 
For example, If you are using a 3rd-party custom-input component that requires a data-tooltip attribute on the input then you can add this attribute to component instance,
<custom-input data-tooltip="Enter your input" />
If you try to pass the props from parent component the child props with the same names will be overridden. But props like class and style are exception to this, these values will be merged in the child component.
<!-- Child component -->
<input type="date" class="date-control">

<!-- Parent component -->
<custom-input class="custom-class" />
Vue provides validations such as types, required fields, default values along with customized validations. You can provide an object with validation requirements to the value of props as below,
 
Let's take an example of user profile Vue component with possible validations,
Vue.component('user-profile', {
  props: {
    // Basic type check (`null` matches any type)
    age: Number,
    // Multiple possible types
    identityNumber: [String, Number],
    // Required string
    email: {
      type: String,
      required: true
    },
    // Number with a default value
    minBalance: {
      type: Number,
      default: 10000
    },
    // Object with a default value
    message: {
      type: Object,
      // Object or array defaults must be returned from
      // a factory function
      default: function () {
        return { message: 'Welcome to Vue' }
      }
    },
    // Custom validator function
    location: {
      validator: function (value) {
        // The value must match one of these strings
        return ['India', 'Singapore', 'Australia'].indexOf(value) !== -1
      }
    }
  }
})
There are many ways Vue provides transition effects when items are inserted, updated, or removed from the DOM.
 
Below are the possible ways,
 
* Automatically apply classes for CSS transitions and animations
* Integrate 3rd-party CSS animation libraries. For example, Animate.css
* Use JavaScript to directly manipulate the DOM during transition hooks
* Integrate 3rd-party JavaScript animation libraries. For example, Velocity.js
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: '<div>User {{ $route.params.name }}, PostId: {{ route.params.postid }}</div>'
}

const router = new VueRouter({
  routes: [
    // dynamic segments start with a colon
    { path: '/user/:name/post/:postid', component: User }
  ]
})
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.
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({  
  // ...  
})  
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'  
])
In Vue.js, the $parent property is used to access the parent instance from a child. It is similar to the $root property. The $parent property provides direct access, but it makes the application hard to test and debug. In this property, it is very difficult to find out where the mutation comes from.
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.
Generally, the app is composed of nested components which are nested multiple levels deep. The segments of a URL corresponds to a certain structure of these nested components. To render components into the nested outlet, you need to use the children option in VueRouter constructor config.
 
Let's take a user app composed of profile and posts nested components with respective routes. You can also define a default route configuration when there is no matching nested route.
const router = new VueRouter({
  routes: [
    { path: '/user/:id', component: User,
      children: [
        {
          // UserProfile will be rendered inside User's <router-view> when /user/:id/profile is matched
          path: 'profile',
          component: UserProfile
        },
        {
          // UserPosts will be rendered inside User's <router-view> when /user/:id/posts is matched
          path: 'posts',
          component: UserPosts
        },
          // UserHome will be rendered inside User's <router-view> when /user/:id is matched
        {  path: '',
           component: UserHome },
      ]
    }
  ]
})