Vue Interview Questions: 30 Practice Questions with Answers and Code Examples

1. How is two-way data binding implemented in Vue?

Two-way data binding is achieved by using the v-model directive. The v-model directive will create a listener on the form element, update the data of the Vue instance in real time when the user enters, and update the value of the form element when the data of the Vue instance changes.

1. How to define a method in Vue?

To define a method in a Vue instance, you can use the methods option. For example:

var app = new Vue({
    
    
  el: '#app',
  data: {
    
    
    message: 'Hello Vue!'
  },
  methods: {
    
    
    greeting: function () {
    
    
      alert(this.message)
    }
  }
})

1. What are Vue components?

Vue components are reusable Vue instances with their own templates, state and behavior. Components allow us to split an application into small, independent parts, making the code easier to maintain and reuse.

1. What are the lifecycle hooks in Vue?

Vue instances will trigger some specific life cycle hook functions when they are created, updated and destroyed, including:

• created: Called after the instance is created
• mounted: called after the instance is mounted
• updated: Called after the instance is updated
• destroyed: Called after the instance is destroyed

1. What is the difference between computed properties and listeners in Vue?

Computed properties are properties that calculate new values ​​based on existing property values. The calculation results can be cached and recalculated only when related dependencies change. A listener listens for a property change and executes some logic in a callback function.

1. How to implement list loop in Vue?

List looping can be achieved using the v-for directive. For example:

<ul>
  <li v-for="item in items">{
    
    {
    
     item }}</li>
</ul>

1. What are the communication methods of components in Vue?

Component communication methods in Vue include:

• props and events: the parent component passes data to the child component through props, and the child component sends a message to the parent component through events
• $emitand$ on: components can pass$emitmethod\; and$ on method for event communication
• Vuex: Vuex is Vue's state management library, which can share state between multiple components

1. How to implement routing in Vue?

Routing can be implemented using Vue Router. Vue Router is the official routing management tool of Vue.js, which can help us realize the jump and navigation between pages in Vue applications.

1. What does the watch option in Vue do?

The watch option can be used to monitor data changes on the Vue instance and execute some logic when the data changes. For example:

var app = new Vue({
    
    
  el: '#app',
  data: {
    
    
    message: 'Hello Vue!'
  },
  watch: {
    
    
    message: function (newVal, oldVal) {
    
    
      console.log('message changed from ' + oldVal + ' to ' + newVal)
    }
  }
})

1. How to handle user input in Vue?

You can use the v-on directive to handle user input. For example:

<input v-model="message" v-on:keyup.enter="sendMessage">

Here, the v-model command is used to bind the content entered by the user to the message property of the Vue instance, and then the v-on command is used to monitor keyboard input events, and the sendMessage method of the Vue instance is called when the user presses the "Enter" key.

1. How is the transition effect implemented in Vue?

Transition effects in Vue are implemented by using transition components and animation class names. The transition component can wrap elements that need to add transition effects, and automatically add or remove CSS class names according to the state of the elements, so as to achieve transition effects.

1. What are the directives in Vue?

Commonly used commands in Vue include:

• v-if: Conditionally render elements based on the value of an expression
• v-for: Iterates over an array or object, rendering each element
• v-bind: Bind one or more properties to the data of the Vue instance
• v-on: bind an event listener to the element
• v-model: Realize two-way binding between form elements and Vue instance data
• v-show: Conditionally show or hide elements based on the value of an expression
• v-text: renders the text content of the element

1. What do mixins in Vue do?

Mixins can extract the shared functions between multiple components to form a mixed-in object, which can be introduced into the component to obtain all the properties and methods of the object.

1. What is the role of slot in Vue?

Slots allow us to define additional templates in components so that parent components can insert content into child components. There are two types of slots: default and named. A named slot allows the parent component to insert different content into the child component.

1. What do filters in Vue do?

Filters can be used to process the data in the Vue instance and return the processed results. Filters can be used in data binding and v-for directives, for example:

<div>{
    
    {
    
     message | capitalize }}</div>

<ul>
  <li v-for="item in items | orderBy('name')">{
    
    {
    
     item.name }}</li>
</ul>

1. What does the v-cloak directive in Vue do?

The v-cloak directive prevents uncompiled Mustache template syntax from being displayed until the Vue instance is rendered. Uncompiled templates can be hidden by setting the display:none attribute of the [v-cloak] selector in the stylesheet.

1. How to use plugins in Vue?

Plugins can be installed using the Vue.use method. For example:

import MyPlugin from './my-plugin.js'

Vue.use(MyPlugin)

1. What are the event modifiers in Vue?

Commonly used event modifiers in Vue include:

• .stop: prevent event bubbling
• .prevent: Prevent the default event
• .capture: use event capture mode
• .self: only fires the event handler when the event target itself fires
• .once: Trigger the event handler only once
• .passive: Tell the browser not to prevent the default behavior of the event, improving scrolling performance

1. What are the routing navigation hooks in Vue?

Routing navigation hooks commonly used in Vue include:

• beforeEach: execute before routing jump
• afterEach: Executed after the routing jump
• beforeRouteEnter: execute before the route enters
• beforeRouteLeave: executed before the route leaves
• beforeRouteUpdate: executed before routing updates

1. What does the computed option in Vue do?

The computed option can be used to define computed properties. Computed properties will calculate new values ​​based on existing property values ​​and recompute when related dependencies change.

1. What does the $refs attribute in Vue do?

The $refs property can be used to access component or element references. For example:

<my-component ref="myComponent"></my-component>

var app = new Vue({
    
    
  el: '#app',
  mounted: function () {
    
    
    console.log(this.$refs.myComponent)
  }
})

1. What do mixin options in Vue do?

The mixin option can be used to mix some common properties and methods into multiple Vue instances. For example:

var myMixin = {
    
    
  created: function () {
    
    
    console.log('mixin created')
  }
}

var app = new Vue({
    
    
  el: '#app',
  mixins: [myMixin],
  created: function() {
    
    
    console.log('component created')
  }
})

1. What does the provide/inject API in Vue do?

The provide/inject API can be used to inject dependencies into child components in parent components. For example:

var myPlugin = {
    
    
  install: function (Vue, options) {
    
    
    Vue.prototype.$myData = 'my data'
  }
}

Vue.use(myPlugin)

var parent = new Vue({
    
    
  provide: {
    
    
    myData: 'parent data'
  }
})

var child = new Vue({
    
    
  inject: ['myData'],
  created: function () {
    
    
    console.log(this.$myData) // 输出"parent data"
  }
})

1. What does the nextTick method in Vue do?

The nextTick method can be used to execute a callback function after the DOM is updated. For example:

var app = new Vue({
    
    
  el: '#app',
  data: {
    
    
    message: 'Hello Vue!'
  },
  methods: {
    
    
    changeMessage: function () {
    
    
      this.message = 'New Message'
      this.$nextTick(function () {
    
    
        console.log('DOM updated')
      })
    }
  }
})

1. What do async components in Vue do?

Asynchronous components can be used to implement on-demand loading and improve application performance. Asynchronous loading can be achieved using Vue's asynchronous component factory function and Webpack's code splitting feature. For example:

Vue.component('my-component', function (resolve) {
    
    
  require(['./my-component.vue'], resolve)
})

1. What does the v-bind directive in Vue do?

The v-bind directive can be used to dynamically bind one or more properties to the data of a Vue instance. For example:

<img v-bind:src="imageSrc">

<button v-bind:disabled="isDisabled">Click me</button>

1. What does the props option in Vue do?

The props option can be used to pass data to child components. For example:

Vue.component('my-component', {
    
    
  props: ['message'],
  template: '<div>{
    
    { message }}</div>'
})

<my-component message="Hello Vue!"></my-component>

1. How to use templates in Vue?

Templates can be defined using the template option in the Vue instance. Templates can contain HTML, Mustache template syntax, and directives. For example:

var app = new Vue({
    
    
  el: '#app',
  data: {
    
    
    message: 'Hello Vue!'
  },
  template: '<div>{
    
    { message }}</div>'
})

1. What is the difference between v-show directive and v-if directive in Vue?

The v-show directive conditionally shows or hides elements based on the value of an expression, implemented using the display property of CSS. The v-if directive conditionally renders an element based on the value of an expression, and if the expression evaluates to false, the element will not be rendered.

1. What do custom directives in Vue do?

Custom directives can be used to encapsulate DOM operations and event processing logic so that they can be reused in multiple components. Custom directives can contain lifecycle hook functions such as bind, inserted, update, componentUpdated, and unbind. For example:

Vue.directive('my-directive', {
    
    
  bind: function (el, binding, vnode) {
    
    
    // 在绑定元素上添加一些事件监听器
  },
  unbind: function (el, binding, vnode) {
    
    
    // 在解绑元素时移除事件监听器
  }
})