FrontendDeveloper.in

Vue.js Interview Questions

  • Question 76

    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.

    FeatureVueJSReactJS
    TypeJavaScript MVVM FrameworkJavaScript Library
    PlatformPrimarily focused on web developmentBoth Web and Native
    Learning CurveEasy to learn the frameworkA steep learning curve and requires deep knowledge
    SimplicityVue is simpler than ReactReact is more complex than Vue
    Bootstrap ApplicationVue-cliCRA (Create React App)
  • Question 77

    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
  • Question 78

    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.
  • Question 79

    What are the differences between VueJS and Angular?

    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,

    FeatureVueJSAngular
    ComplexityEasy to learn, simple API and designThe framework is bit huge and need some learning curve on typescript etc
    Binding of DataOne-way bindingTwo-way binding
    Learning CurveEasy to learn the frameworkA steep learning curve and requires deep knowledge
    FoundersCreated by Former Google EmployeePowered by Google
    Initial ReleaseFebruary 2014September 2016
    ModelBased on Virtual DOM(Document Object Model)Based on MVC(Model-View-Controller)
  • Question 80

    What are dynamic components?

    The dynamic component will allow you to dynamically switch between multiple components without updating the route of the application and even retaining the state of the component when switching back to the initial component. It works by using <component> tag with v-bind:is attribute which accept dynamic component.

    Let's create a dynamic component vue instance to switch between different pages of a website,

    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,

    <component v-bind:is="currentPage">
    <!-- component changes when currentPage changes! -->
    <!-- output: Home -->
    </component>
    

    The component will be unmounted when it is switched away but it is possible to force the inactive component alive using <keep-alive> component

    Note: The value of :is attribute can be either name of the registered component or the actual imported object itself.

  • Question 81

    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,

    <!-- 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.

    <!-- 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.

  • Question 82

    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,

    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.

  • Question 83

    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.

    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
    })
    
  • Question 84

    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.

    <my-component inline-template>
    <h1>Inline templates</h1>
    </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.

  • Question 85

    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,

    <script type="text/x-template" id="script-template">
    </script>
    

    Now you can define the template using reference id,

    Vue.component('x-template-example', {
    template: '#script-template'
    })
    
  • Question 86

    What are recursive components?

    The Components that can recursively invoke themselves in their own template are known as recursive components.

    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).

  • Question 87

    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,

    //ComponentA
    <component-b >
    
    //ComponentB
    <component-a >
    

    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')
    }
    
  • Question 88

    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.

  • Question 89

    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.

  • Question 90

    List down different builds of vuejs?

    Below are the list of different builds of VueJS based on type of build,

    TypeUMDCommonJSES Module (for bundlers)ES Module (for browsers)
    Fullvue.jsvue.common.jsvue.esm.jsvue.esm.browser.js
    Runtime onlyvue.runtime.jsvue.runtime.common.jsvue.runtime.esm.jsNA
    Full (production)vue.min.jsNANAvue.esm.browser.min.js
    Runtime-only (production)vue.runtime.min.jsNANANA
Get LinkedIn Premium at Rs 399