Introduction to the previous framework and project interview 2

First, let’s look at a few interview questions

First look at a few interview questions, think for yourself, how much you can answer, and compare the answers to the interview questions

Thinking about how to deal with these interview questions and all interviews

1. Vue interview questions

1. What is the difference between v-sho and v-if

the difference:

(1) When the condition is true, there is no difference. When the condition is false, v-if does not create elements v-show rendering elements and then hide them
(2), v-if is more suitable for data filtering and initial rendering, v -show is more suitable for element switching

2. Why use key in v-for

(1) The list loop in vue needs to add: key="unique identifier" The unique identifier should be the id in the item as much as possible, because the vue component is highly reused and the Key can identify the uniqueness of the component, in order to better distinguish the key of each component The main purpose is to efficiently update the virtual DOM.
(2) The key is mainly used for the dom diff algorithm. The diff algorithm is a comparison of the same level. It compares the key on the current label and its current label name. If the key and the label name are the same, only a move is made. Operation does not re-create or delete elements.
(3) The "in-place reuse" strategy is used by default when there is no key. If the order of the data items is changed, Vue does not move the Dom element to match the change of the data item, but simply reuses each element in the original position. If you delete the first element, when you find that the label is the same and the value is different during the comparison, the previous position will be reused, and the new value will be placed directly in that position, and so on, the last one will be deleted if there is one more Drop.
(4) Try not to use the index value index as the key value, and be sure to use a unique identification value, such as id. Because if you use the array index index as the key, when a new element is inserted into the specified position in the array, the index index will be updated at this time, and the key values ​​corresponding to the subsequent virtual DOM will all be updated. At this time, it will still be unnecessary. The update is just like no key is added, so although index can solve the problem of key non-conflict, it cannot solve the reuse situation. If it is static data, it is no problem to use the index number index as the key value.
(5) If the tag name is the same, the key will be reused at this time. If the tag name is different, the key will not be reused.

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

Load the rendering process
parent beforeCreate —> parent created —> parent beforeMount —> child beforeCreate —> child created —> child beforeMount —> child mounted —> parent mounted
child component update process
parent beforeUpdate —> child beforeUpdate —> child updated —> parent updated
parent component update process
parent beforeUpdate —> parent updated
destruction process
parent beforeDestroy —> child beforeDestroy —> child destroyed —> parent destroyed

4. How do Vue components communicate

The communication between Vue components can be roughly divided into the following types:

1. Use the props attribute.

Props are mainly used by the parent component to pass data to the child component. You can register some custom features on the component. When a value is passed to a prop property, it becomes a property of that component instance. This value can be used in the subcomponent. Please note: all props form a one-way downward binding between the parent and child props, that is, the update of the parent prop will flow down to the child component, but the reverse will not work, the child component cannot change the state of the parent component .

Every time the parent component is updated, all props in the child component will be refreshed to the latest value.

Demonstrated in the example as follows:

To reference the TodoList component in the parent component, use :todos (v-bind:todos) to pass an array, use :deleteTodo to pass a function,

and use props in the child component to receive the incoming parameters, and then use it in this component. No need to define in data. When passing a function to a child component, it means that the child component needs to modify a value of the parent component, but it cannot modify it by itself. It can only pass a specific value (such as a subscript of an array) or not pass it to the parent. Component, notify the parent component to update operation (for example, delete an element in the array).

2. Use Vue custom events.

How to use it?

1. The parent component can directly use v-on to listen to events triggered by the child component where the child component is used. That is, use v-on to bind custom events in the parent component, and then use $emit(eventName,data) to trigger the event in the child component. Use as follows:
   

addTodo is a function, the specific content of the function is no longer displayed, and the event is triggered by $emit in the child component.

Please note: This method is only used for parent-child component transfer, not applicable to three layers and above

2. Each Vue object instance implements the event interface, so you can use $On-(EVEn-TNAmE)supervisorto\; listen\; tosomethingmember,makeuse$ emit trigger event.
   
   parent element, when mounted, an event listener for binding subassembly:
   
   subassembly emit or be triggered by the $ event.

3. Message subscription and publishing (PubSubJS library)

   Subscribe to the message PubSub.subscribe('msg',function(msg,data){})

   Publish message: PubSub.publish('msg',data)

Note: First import PubSub component import PubSub from'pubsub-js'

// 订阅消息   
//PubSub.subscribe('deleteTodo',function(msg,data){ 
 //     this.deleteTodo(index) ; 
 // 这样是存在问题的，是因为this使用的是回调函数中的，并不是外部的this ，于是，可以使用箭头函数，将外部this绑定
//})
PubSub.subscribe('deleteTodo', (msg,data) =>{
    
    // 箭头函数，绑定的是外部的this
  this.deleteTodo(index); 
})

Publish a message in another component:

// 注意先导入 PubSub
 
PubSub.publish('deleteTodo',index) // indx 为传入的数据

Note: 1) Advantages: This method can realize communication (data) between any relational components

4. Communication between components: Slot

This method is used by the parent component to pass "label data" to the child component. That is, the child component first has a "placeholder", waiting for the parent component to pass in a specific label, and the child component is rendering.

usage:

Subassembly:

// 子组件  ：Child.vue
<template>
   <div>
      <slot name="xxx"> 不确定的标签结构1</slot> <!--定义架子，我理解为定义一个占位符 -->
      <div> 组件确定的标签结构</div>
      <slot name="yyy">不确定的标签结构2</slot>
   </div>
</template>

Parent component:

// 父组件：Parent.vue
<child>
   <div slot="xxx">xxx对应的标签结构</div> <!-- 实际的标签结构-->
<div slot="yyy">yyy对应的标签结构</div> <!-- 实际的标签结构-->
</child>

Note: Because the specific label passed is in the parent component, the operation should also be placed in the parent component. That is to say, the child component should be passed in after the parent component is running, and all its operations should be performed in the parent component.

As shown below, these operations on the child components are all put into the parent component:

5. Describe the process of component rendering and update

1. The initial rendering process of the vue component

Parse the template into the render function

Trigger response, monitor the getter and setter of the data property

Execute the render function to generate vnode, patch(elem,vnode)

2. Vue component update process

Modify the data, trigger the setter (previously, it has been monitored in the getter)

Re-execute the render function to generate newVnode

patch(vnode, newVnode)

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

The v-model in vue can achieve two-way binding. Its core idea is to hijack Vue data through Object.definePropery. It is
mainly divided into three parts. The
observer is mainly responsible for data hijacking of Vue data so that the data has get and set method The
instruction parser is responsible for binding data and instructions, and the binding attempt to update method
watcher is responsible for data monitoring. When the data changes, the subscriber is notified, and the view update function is called to update the view.