Check out these 3 must-ask interview questions to test your Vue mastery!

This article will share with you 3 Vue must-ask interview questions to test your mastery of Vue and see if you can answer them correctly!

Question 1: What is the difference between v-show and v-if?

This question is to examine the interviewer’s Vue basics. Generally, anyone who has used Vue will definitely use v-show and v-if. (Learning video sharing: vue video tutorial)

v-if instruction is used to conditionally render a piece of content, while v-show Also used for conditional display elements.

Elements using v-show will be rendered and retained in the DOM, and CSS display will be used to control the display and hiding of the elements. v-show does not support the <template> element, nor does v-else.

Using v-if is "true" conditional rendering, and the element's event listeners and subcomponents will be destroyed and rebuilt. v-if is also lazy. If the initial condition is false, it will not be rendered, and the first rendering will not be triggered until it becomes true. And v-show will render regardless of the conditions, and control the display and hiding according to the display attribute.

Generally speaking, v-if has greater switching overhead, while v-show only has initial rendering overhead. If the element needs to be switched frequently, use v-show. If the conditions rarely change, use v- if is better.

Question 2: What is the principle of v-model? The

v-model command is mainly used in <input>, <select>, <textarea>On form elements or components to achieve two-way binding of data. It's not that magical, it just listens to the user's input events to update the data.

v-model will trigger different events based on different elements:

• text and textarea elements use input events;
• checkbox / radio and select use the change event;

Take the input form as an example:

<input v-model=&#39;something&#39;>

<!-- 等价于 -->

<input v-bind:value="something" v-on:input="something = $event.target.value">

If in a custom component:

<!-- 父组件： -->
<ModelChild v-model="message"></ModelChild>

<!-- 子组件： -->
<template>
  <div>{{value}}</div>
</template>

<script>
  export default {
    props:{
      value: String
    },
    methods: {
      test1(){
         this.$emit('input', '小红')
      },
    },
  }
</script>

in In the parent component, if the value of the message is modified, the value field of the props in the child component will be automatically changed. If the input event is triggered in the child component, the message value in the parent component will also be changed.

Question 3: What are the communication methods between Vue components?

This question is also a very common question in interviews. The more ways you can answer it, the more proficient you are in Vue. Generally, communication between components can be roughly divided into three types: parent-child component communication, grandfather-grandson component communication, and sibling component communication. Let’s look at them separately:

• props / $emit Suitable for communication between parent and child components

  • This is also the most basic data communication method of Vue. If you don’t know this, you won’t be able to talk about it later.

• ref and $parent / $children are suitable for communication between parent and child components

  • refIf used on a component, you can get the instance object of the component and manipulate the data
  • $parent / $children: You can also access the parent/child instance object for data operations

• EventBus ($emit/$on) Suitable Communication between father-son, grandfather-grandson, and brother components

  • This method uses an empty Vue instance in the scene as the event center, and uses it to trigger events and listen for events, thereby realizing communication between any components.
  • UsingEventBusThis method has many disadvantages. It is not recommended for everyone to use it in projects. Just know this implementation idea.

• ##$attrs/$listeners Suitable for grandfather-grandson component communication

  • $attrs: Contains attribute bindings and events in the parent scope that are not component props and custom events, and can be passed in via v-bind="$attrs" Internal components.
  • $listeners: Contains v-on event listeners (without .native decorators) in the parent scope. It can be passed into internal components via v-on="$listeners". Note: Removed in Vue 3. Event listeners are now part of $attrs.

• provide / inject Suitable for grandfather-grandson component communication

  Pass provide on the grandfather component to provide variables, and then inject the variables in the grandchild component.

• Vuex is suitable for father-son, grandfather-grandson, and brother component communication

  • Vuex is specifically designed to solve state management problems in Vue applications.

(Learning video sharing: web front-end development, Basic programming video)

The above is the detailed content of Check out these 3 must-ask interview questions to test your Vue mastery!. For more information, please follow other related articles on the PHP Chinese website!