vue-interview-questions.md

Vue Interview Questions

Vue.js

• What are the different parts of a single file component?
  • script, template, style
• What are some of the properties available using the options api to define a component?
  • data, components, setup, computed, methods, watch, beforeMount, etc.
• What are the different methods of defining props?

{
  props: ['disabled'],
  props: {
    title: String,
    likes: {
      type: Number,
      required: true
    }
  }
}

// script setup
defineProps({
  title: String,
    likes: {
      type: Number,
      required: true
    }
})

• Why should you never modify the value of a prop passed into a component?
• How do you work around not being able to modify the value of a prop?
• When would you use inheritAttrs: false?
• What does the nextTick() method do, and when would you use it?
• How would you handle rendering a list of items in the template?
• What are the three different ways to bind class definitions to an element?
  • :class="myClassVar"
  • :class="[myClassVar, anotherClassVar]
  • :class="{ border: boolVar }"
• What is the difference between v-if and v-show?
• What are slots, and how are they used?
• What are template refs and what can they be used for?
• On the style tag what does adding the "scoped" attribute do?
• What is the proper way to update a single value in an array?

Vuex

• How do you access the vuex store from a component?
• What does createNamespacedHelpers() do?
• Why should you not directly mutate the vuex state?

Jr

• What is Vue.js
  • Progressive javascript script framework used to create dynamic user interfaces
• List the built in features of VueJs
  • Templates, Reactivity, Components, Transitions, and Routing
• What are the three parts of a single file component?
  • script, template, and style
• List common vue directives
  • v-if, v-else, v-else-if, v-for, v-show
• Should you use v-if and v-for in the same element?
  • No, v-for has a higher priority than v-if and will cause bugs in your code
• What are keys used for in Vue
  • In order to rack track each node identity and thus reuse and reorder existing elements
• What is the shorthand for events
  • @click="someFunction"
• How do you set two-way data binding in Vue
  • v-model directive
  • bonus question: What is the shorthand to bind to an attribute?

<input :value="state" :placeholder="otherState" />

• What are the provided event modifiers in Vue
  • stop, prevent, capture, self, once, passive

Mid

• What directive lets you handle key modifiers?
  • v-on ex: v-on:keyup.13="someFunction"
• What are the v-model supported modifiers?
  • lazy, number, trim
• What are the supported system modifier keys?
  • ctrl, alt, shift, meta ex: @click.ctrl="someFunction"
• How do you set functions to mouse buttons?
  • v-on:mousedown.left="someFunctionOnLeftClick"

Senior

• What are the array detection mutation methods
  • push, pop, shift, unshift, splice, sort, reverse
• What are the array detection for non-mutation methods
  • filter, concat, slice
• What are the caveats of array changes detection?
  • when you directly set an item with the index. The detection will not fire
  • bonus: when you modify the length directly. The detection will not fire
• How do you global register a component?
  • on the Vue instance you run Vue.component(’name-of-component’, ComponentA)