Web front-end interview high-frequency test site - Vue interview questions

For detailed answers to the following questions, please refer to the link below:

content	Reference link
Basic use of Vue	The basic use of Vue (one article to master the most basic knowledge points of Vue)
Vue communication and advanced features	Communication between Vue components and advanced features (communication between various components, custom v-model, nextTick, slots)
Vue advanced features	Advanced features of Vue (dynamic components, asynchronous loading, keep-alive, mixin, Vuex, Vue-Router)
Vue Principle 1	Vue principle (understanding MVVM model, in-depth / monitoring data changes, monitoring array changes, in-depth understanding of virtual DOM)
Vue Principle 2	Vue principle (diff algorithm, template compilation, component rendering and updating, JS implementation routing)

Article directory

1. The difference between v-show and v-if

v-show controls show and hide through CSS display
v-if components actually render and destroy, not show and hide
Use v-show to switch the display state frequently, otherwise use v-if

2. Why use key in v-for

Must use key, and cannot be index and random
In the diff algorithm, it is judged by tag and key whether it is the sameNode
Reduce rendering times and improve rendering performance

3. Describe the life cycle of Vue components (parent-child components)

Single component life cycle diagram (from the official website)
Parent-child component lifecycle relationship

insert image description here

4. How Vue components communicate (common)

Parent-child component props and this.$emit
custom eventevent.$on event.$off event.$emit
vuex

5. Describe the process of component rendering and updating

Three modules of vue principle: responsive, vdom and diff, template compilation

insert image description here

6. The realization principle of two-way data binding v-model

value of the input element = this.name
Bind the input event this.name = $event.target.value
data update triggers re-render

7. Understanding of MVVM

8. Features of computed

Cached, data remains unchanged and will not be recalculated
Improve performance

9. Why component data must be a function

In fact, the .vuefile is written as a class
When using components everywhere, it is equivalent to instantiating
Execute data when instantiating, if data is not a function, then the data of each component instance is shared

10. Which life cycle should the ajax request be placed in?

mounted (component rendering is complete, DOM loading is complete)
JS is single-threaded, and ajax fetches data asynchronously
It is useless to put it before mounted, it will only make the logic more confusing

11. How to pass all props of a component to child components

$props

<User v-bind = "$props">

12. How to implement v-model by yourself

Use :valueand not use v-model
Change and model.event name can correspond

<template>
  <input
    type="text"
    :value="text"
    @input="$emit('change', $event.target.value)"
  />
</template>

<script>
export default {
    
    
  model: {
    
    
    prop: "text", //对应到 props text
    event: "change",
  },
  props: {
    
    
    text: String,
  },
};
</script>

13. Multiple components have the same logic, how to separate them?

Reference link

mixin
and some disadvantages of mixins

14. When to use asynchronous components?

load large components
Routes are loaded asynchronously

15. When to use keep-alive

Cache components, no need to re-render
Such as switching between multiple static tab pages
Optimize performance

16. When to use beforeDestory

Bind custom event event.$off
clear timer
Bind custom DOM events, such as window scroll, etc.

17. What is a scoped slot?

The content of the slot may want to use data from both the parent's domain and the child's domain

Parent component:

Use the url of the parent component && the title of the child component

<template>
  <div>
    <ScopedSlot :url="website.url">
      <template v-slot="slotProps">
        {
    
    {
    
     slotProps.slotData.title }}
      </template>
    </ScopedSlot>
  </div>
</template>

Subassembly:

<template>
  <a :href="url">
    <slot :slotData="website">
      {
    
    {
    
     website.subTitle }}
    </slot>
  </a>
</template>

18. What is the difference between action and mutation in Vuex

Asynchronous can be handled in action, but not in mutation
mutation do atomic operations
action can integrate multiple mutations

19. Common routing patterns of Vue-router

hsah mode
H5 history (requires server support)
comparison of the two

20. How to configure Vue-router to load asynchronously

component: () => import './xxx'

21. Describe a DOM structure with vnode

DOM structure

<div id="div1" class="container">
    <p>vdom</p>
    <ul style="font-size: 20px">
        <li>a</li>
    </ul>
</div>

vnode form

{
    
    
  tag: 'div',
  props: {
    
    
    className: 'container',
    id: 'div1'
  }
  children: [
    {
    
    
      tag: 'p',
      children: 'vdom'
    },
    {
    
    
      tag: 'ul',
      props: {
    
    style: 'font-size: 20px'}
      children: [
        {
    
    
          tag: 'li',
          children: 'a'
        }
      ]
    }
  ]
}

22. What is the core API for monitoring data changes?

Object.defineProperty
And deep monitoring, monitoring array
But there are also disadvantages

23. How does Vue monitor array changes

Object.defineProperty cannot monitor array changes
Redefine the prototype, rewrite push pop and other methods, and implement monitoring
Proxy can natively support monitoring array changes

24. Describe the principle of responsiveness

Monitor data changes
Component rendering and update process

25. Time complexity of diff algorithm

O(n)
Made some adjustments on top of O(n^3)

26. Briefly describe the diff algorithm process

patch(elem, vnode) and patch(vnode, newVnode)
- patchVnode and addVnodes and removeVnodes
updateChildren (importance of key)

27. Why is Vue asynchronous rendering, and what is the use of $nextTick?

Asynchronous rendering (and incorporating data modifications) to improve rendering performance
$nextTick fires the callback after the DOM has been updated

28. Common performance optimization methods of Vue

Reasonable use of v-show and v-if
Reasonable use of computed
Add key when v-for, and avoid using it with v-if
Timely destruction of custom events and DOM events
Use asynchronous components wisely
Reasonable use of keep-alive
The data level should not be too deep
Use vue-loader to do template compilation (pre-compilation) in the development environment
Optimization at the webpack level
Front-end general performance optimization, such as image lazy loading

不积跬步无以至千里，不积小流无以成江海

Click to follow and don't get lost, continue to update...