v-show controls display and hide through CSS display

The v-if component is actually rendered and destroyed, not shown and hidden

Use v-show for frequently switching display status, 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)

mount

renew

destroy

3.1 Individual components

3.2 Parent-child components

mount process

father- beforeCreate -> father-created -> father- beforeMount -> child-beforeCreate -> child- created -> child-beforeMount -> child-mounted -> father-mounted

update process

father-beforeUpdate -> child-beforeUpdate -> child-updated -> father-updated

destruction process

father-beforeDestory -> child-beforeDestory -> child-destoryed -> father destroyed

Simple version: parent-created -> child-created -> child-mounted -> parent-mounted

Initialization: from the outside to the inside

Rendering: from the inside to the outside (the parent component is not finished until the child component is rendered)

Update: first trigger the change of the parent component data, and then update the child component, (the parent component is not finished until the child component is updated)

Destruction: trigger the destruction of the parent component first, and then destroy the child component, (the parent component is not finished until the child component is destroyed)

4. How Vue components communicate (common)

Parent-child component props and this.$emit

Custom event event.$on event.$off event.$emit

vuex (shared by all components)

5. Describe the process of component rendering and updating

Three major modules of Vue principle:

Responsive (purple Data monitors property changes)

Template rendering (yellow part)

Virtual DOM (green part)

Process: Executing the render function during rendering will trigger the getter of the Touch, and then collect the dependencies into the Watcher. When the Data change is triggered, the Watcher will be notified to see if the data has been collected before. If it has been collected, the setter function will be triggered, and then Trigger the render function and re-render. If it has not been collected before (that is, it is not used in the page template), the setter will not be triggered, nor will it be re-rendered

6. Implementation principle of two-way data binding v-model

value of input element = this.name

Bind input event, @input="name = $event.target.value"

data update triggers re-render

7. Understanding of MVVM

Model: the data passed by the backend

View: the page you see

ViewModel: The core of the MVVM pattern, it is the model that connects Model and View

ViewModel has two directions (to achieve two-way data binding)

Convert the Model into a View, and convert the data passed by the backend into the page you see. The way to achieve it is data binding (Data Bindings)

Convert the View into a Model, and convert the pages you see into back-end data. The way to achieve it is to listen to DOM events (DOM Listeners)

8. What are the characteristics of computed

Cache, the data will not be recalculated if it remains unchanged

improve performance

9. Why must component data be a function?

<script>
export default {
  name: 'app',
  data() {
      return {
        name: 'vue',
        list: ['a', 'b', 'c']
      }
  },
  methods: {
    changeName() {
        this.name = '双越'
    },
    addItem() {
        this.list.push(`${Date.now()}`)
    }
  }
}
</script>

Because after the .vue component is compiled, it is a class (a class),

When using this class in every place, it is actually instantiating the class,

To execute data when instantiated,

If data is not a function, then the data data of each component is the same and shared.

If data is a function, then the two data are in the closure and will not affect each other

10. In which life cycle should ajax requests be placed?

mounted (after the DOM has loaded)

JS is single-threaded , and ajax fetches data asynchronously (after DOM rendering is completed, ajax request is triggered, and data is rendered to the page after request, which is reasonable)

It is useless to put it before mounted, it will only make the logic more confusing (the DOM has not been rendered, and it will not be executed, it is in the queue)

11. How to pass all the props of the component to the child component?

$props

<User v-bind="$props" />

12. How to customize v-model

// 父组件
<CustomVModel v-model="name"/>
 
// 子组件
<template>
    <!-- 例如：vue 颜色选择 -->
    <input type="text"
        :value="text1"
        @input="$emit('change1', $event.target.value)"
    >
    <!--
        1. 上面的 input 使用了 :value 而不是 v-model
        2. 上面的 change1 和 model.event1 要对应起来
        3. text1 属性对应起来
    -->
</template>
 
<script>
export default {
    model: {
        prop: 'text1', // 对应 props text1
        event: 'change1'
    },
    props: {
        text1: String,
        default() {
            return ''
        }
    }
}

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

mixin

The source of the variable is unclear

Multiple mixins may cause naming conflicts

Mixins and components may have a many-to-many relationship, which is more complex

The Composition API proposed by Vue3 aims to solve these problems

14. When to use asynchronous components?

Load large components (editors, charts)

Routes are loaded asynchronously

optimize performance

15. When do you need to use keep-alive?

Cache components without re-rendering

Such as multiple static tab switching

optimize performance

16. When do you need to use beforeDestory?

Unbind custom event event.$off

clear timer

Unbind custom DOM events (addEventListener), such as window scroll, etc.

If the above is not unbound, it is easy to leak memory

17. What is a scoped slot?

// 父组件
<ScopedSlotDemo :url="website.url">
    <template v-slot="slotProps">
        {
   
   {slotProps.slotData.title}}
    </template>
</ScopedSlotDemo>
 
// 子组件
<template>
    <a :href="url">
        <slot :slotData="website">
            {
   
   {website.subTitle}} <!-- 默认值显示 subTitle ，即父组件不传内容时 -->
        </slot>
    </a>
</template>
 
<script>
export default {
    props: ['url'],
    data() {
        return {
            website: {
                url: 'http://wangEditor.com/',
                title: 'wangEditor',
                subTitle: '轻量级富文本编辑器'
            }
        }
    }
}
</script>

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

Asynchronous processing in action, not mutation

mutations do atomic operations (one at a time)

action can integrate multiple mutations

19. What is the common routing mode of Vue-router?

The system of to B recommends using hash, which is easy to use and not sensitive to url rules

To C system, you can consider choosing H5 history (SEO, performance optimization), but server-side support is required

If you can choose simple ones, don’t use complicated ones, and consider costs and benefits

hash (default) window.onhashchange

Features:

Hash changes will trigger webpage jumps, that is, the forward and backward of the browser

Hash changes will not refresh the page, a necessary feature for SPA

The hash will never be submitted to the server side (the front end lives on its own)

H5 history (requires server-side expenditure) history.pushState and window.onpopstate

Features:

Route with url specification, but do not refresh the page when jumping

20. How to configure Vue-router to load asynchronously

Configure by loading asynchronous components through import

21. Please use vnode to describe a DOM structure

<!-- 页面dom结构 -->
<div id="div1" class="container">
  <p>vdom</p>
  <ul style="font-size: 20px;">
    <li>a</li>
  </ul>
</div>
 
<script>
  /* js模拟dom结构 */
  const vdom = {
    tag: 'div',
    props: {
      className: 'container',
      id: 'div1'
    },
    children: [
      {
        tag: 'p',
        children: 'vdom'
      },
      {
        tag: 'ul',
        props: {
          style: 'font-size: 20px'
        },
        children: [
          {
            tag: 'li',
            children: 'a'
          }
        ]
      }
    ]
  }
</script>

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

Object.defineProperty

And deep monitoring, monitoring array

what are the 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

Vue3 Proxy can natively support monitoring array changes

24. Please describe the responsive principle

Monitor data changes (Object.defineProperty)

The process of component rendering and updating

25. Time complexity of diff algorithm

O(n)

With some adjustments based on O(n^3)

Only compare the same level, do not compare across levels

If the tags are not the same, delete and rebuild directly, without further comparison

If the tag and key are both the same, they are considered to be the same node and no further comparison will be made

26. Briefly describe the diff algorithm process

patch（elem，vnode）和 patch（vnode，newVnode）

pathchVnode and addVnodes and removeVnodes

updateChildren (importance of key)

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

Asynchronous rendering (and merging data modification) to improve rendering performance

$nextTick triggers a callback after the DOM update is complete

28. Vue common performance optimization

Reasonable use of v-show and v-if

Reasonable use of computed

Add key when v-for, and avoid using it with v-if at the same time, (v-for has high priority, and each layer must judge v-if, resulting in waste of performance)

Custom events, DOM events destroyed in time (beforeDestory)

Reasonable use of asynchronous components

Reasonable use of keep-live

The data level should not be too deep

Use vue-loader to do template compilation (precompilation) in the development environment

webpack level optimization

General front-end performance optimization, such as lazy loading of images

use SSR

Summary of Vue2 interview questions 1 (notes for personal use)

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