Vue interview questions (continuously updated)

Vue interview questions (continuously updated)

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

v-show is to switch the display state of the element, that is, display and hide, and modify the display value of the element

v-if also toggles the display and hiding of elements, but it is operating dom

The same point: can make page elements achieve the effect of displaying and hiding

The difference: one is to operate the display, and the other is to operate the dom.

​ The v-if component is really rendering and destroying. If you frequently switch between displaying and hiding effects, the overhead of v-if is greater than that of v-for. It is better to use v-for

2. Why is key used in v-for

​ First of all, the most shallow thing is that the list loop in Vue needs to add a key, otherwise the system will report an error, which is the most obvious.

​ In a more in-depth way, it is because of the high reusability of vue's layout. Increasing the key can identify the uniqueness of the component (somewhat similar to id), which can better distinguish the role of each component key to efficiently update the virtual dom.

​ The official words are: Vue updates the list of elements rendered by v-for` by default according to the "in-place update" strategy. When the order of data items changes, Vue does not move the order of DOM elements accordingly, but updates each element in place to ensure that they are rendered at the originally specified index position.

The default mode is efficient, but only suitable for cases where the result of list rendering output does not depend on child component state or temporary DOM state (such as form input values).

​In order to give Vue a hint so that it can track the identity of each node and thus reuse and reorder existing elements, you need to provide a unique key for each element's corresponding block

​ * In the diff algorithm, it is judged by tag and key whether it is the sameNode

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

​ I won’t say much about the life cycle of vue, here is only a comparison of the life cycle of vue2 and vue3

​ beforeCreate -> 使用 setup()
​ created -> 使用 setup()
​ beforeMount -> onBeforeMount
​ mounted -> onMounted
​ beforeUpdate -> onBeforeUpdate
​ updated -> onUpdated
​ beforeDestroy -> onBeforeUnmount
​ destroyed -> onUnmounted
​ errorCaptured -> onErrorCaptured

Life cycle between parent and child:

Load rendering stage: parent beforeCreate->parent Create->parent beforeMounte->child beforeCreate->child Create->child ceforeMounte

Mount: child Mounte->parent Mounte

renew:

​ 1. Parent updates and children do not update: parent beforeUpdata->parent updata

​ 2. child update father not update: child beforeupdata-> child update

3. Parent and child update together: parent beforeupdata->child beforeupdata->child updata->parent updata

destroy:

​Father beforeDestroy->Child beforeDestroy->Child Destroy->Father Destroy

4. How Vue components communicate

Parent to son prop, son to father this.$emit

brother to brotherevent.$no event.$off event.​$emit

vuex public repository

5. Describe the process of component rendering and updating

1. Parse the template into a render function

This part is related to vue compilation, that is to say, compile vue syntax into js syntax, and get render by executing the compiler function of vue-template-compiler

1. trigger responsive

Responsive key Object.defineProperty(), bind the variables used in the first rendering of the template to Object.defineProperty(), the first rendering will trigger the getter

1. Execute the render function

I got the render function before, now I need to execute the render function, convert the vue syntax into the result of the h function, that is, vNode, and then perform a series of operations

then update the view

6. The difference between history and hash modes in vue-router

​hash : The page will not be refreshed, nor will it initiate a new http request. It will only realize the location of the client page. The characters after # will not be sent to the server. # can modify the browser's access history. Hash is to update the page by changing the anchor point (#) without reloading the page

​The difference between history the history path does not have a # number, but the hash has it. Every time the history changes the path, it needs to re-request the file resource, that is, refresh the page and resend the http request. The history jumps through window.history

7. Can v-model be directly bound to the vuex state? How to deal with it?

​Official website original words: Since Vuex provides mapGetters and mapActions to acquire and operate attribute rows, it cannot directly adapt to the two-way binding form of v-model

Solution:

1. Rewrite the two-way binding of input

2. The other is to provide a separate calculated property, and specify the get / set method, and assign the mapGetters / mapActions of vuex respectively

   ​