Vue interview real questions walkthrough
I think it’s the interview
questions collected online,
popular techniques and knowledge points in the interview
The difference between v-show and v-if
v-show controls the display and hiding of
v-if components through CSS display to render and destroy, instead of displaying and hiding
. Use v-show to switch the display state frequently, otherwise use v-if
Why use key in v-for
The key must be used, not the index and random
diff algorithms. The tag and key are used to judge whether it is the sameNode to
reduce the number of rendering times and improve the rendering ability
Describe the life cycle of Vue components (parent-child components)
Single component life cycle diagram
Parent-child component life cycle relationship
Single component life cycle diagram
Parent-child component life cycle relationship
Like react, vue components also have a complete life cycle, with different divisions of labor at different stages. Generally speaking, the following life cycle hooks are often used:
- List item
- created
- mounted
- Destroy
usually handles some asynchronous requests in these hooks, the most common is to initiate network requests to call api to obtain data.
There is a problem here: in a single component, the execution order of hooks is created -> mounted -> destroyed, but when parent and child components are nested, the parent and child components each have their own independent hook functions, and the hooks of these parent and child components are How to blend execution, and what is the execution order?
A "strange" problem encountered in recent development is caused by a poor understanding of the execution order of the parent-child component life cycle hooks. The problem is this: a component is composed of a series of sub-components, and the sub-components are decomposed into components, thus forming a three-level component. The requirement is to initialize the data for echo after the component is displayed on the page. After the parent component obtains the data, it is passed to the child component, and the child component is required to filter and process the internal metadata based on this value. So when can the child component get the new value passed by the parent component? .
My approach is this: in the mounted of the highest-level parent component, a request is made to obtain data, and it is passed to the sub-component in the form of props through the response mechanism of Vue, and the corresponding props are obtained in the mounted of the sub-component for processing. This approach requires that the mounting timing of the parent component precedes the mounting of the child component, but is this the case? Obviously not.
The problem caused by this is that the data cannot be correctly echoed.
1 Inquiry
The method of exploration is: write a parent-child nested component, print logs in their hook functions, and observe the execution order. The result obtained is as shown in the figure, the parent component is created first, and then the child component is created; the child component is mounted first, and then the parent component is mounted.
After the child component is mounted, the parent component has not yet been mounted. Therefore, when the component data is echoed, the api data is obtained from the mounted parent component, and the mounted child component is not available.
Take a closer look at the execution order of the parent-child component life cycle hooks, you will find that the created hook is executed in the order from the outside to the inside, so the solution to the echo scenario is: initiate a request to obtain data in the created, and then in the created of the child component will be This data is received.
2 Conclusion
The execution order of Vue parent-child component life cycle hooks follows: from outside to inside, and then from inside to outside, no matter how deep the nesting is, this rule is also followed.
The design ideas of componentization are basically the same. The execution order of the parent-child component life cycle hooks in React is not explored specifically, but it is worth mentioning that the componentDidMount of the react parent component is also executed later than the child component componentDidMount.
How Vue components communicate (common)
Parent-child component props and this.$emit
Custom events, Event.$off and Event. $emit and Event.{This location is in ￥English}no
Vuex
Describe the process of component rendering and update
The realization principle of two-wire data binding v-model
The value = this.name of the input element
binds the input event this.name = $event.target.value
data update triggers re-render
Understanding of MVVM
Model represents the data model.
View represents the UI view.
ViewModel is responsible for monitoring data changes in the Model and controlling the update of the view (a bridge, which can be understood as a controller in mvc).
Simple understanding: the view requests data and sends the request to the VModel. The end has a monitoring mechanism, which directly calls the data of the model, and changes all changes at one end. It uses data hijacking and combines the subscriber and publisher modes to achieve two-way data binding.
What are the characteristics of computed
Cache, data is unchanged and not recalculated to
improve performance
Why component data must be a function
If it is not a function, the data of each component instance is the same reference data. When the component is shared as a common component, the data in one place changes, and all the data changes together. If data is a function, the data of each instance is in the closure, it will not affect each
ajax request should be placed in that life cycle
Putting in mounted(){} in
JS is single threaded, ajax obtains data asynchronously.
Putting it before mounted is useless, it will only mess up the logic
How to pass all the props of the component to the child components
- $props
- < User v-bind = “$props” />
- Detailed knowledge points, the priority is not high
How components implement v-model
Multiple components have the same logic, how to separate
Some disadvantages of mixin and mixin
Appropriate use of asynchronous components
Loading large components,
routing asynchronous loading
When to use keep-alive
Cache components, no need to repeat rendering,
such as switching between multiple static tab pages,
optimize performance
When to use beforeDestory
Unbind custom events event.$off
clear timers
Unbind self-defined DOM events, such as window scroll, etc.
What is scoped slot
What is the difference between action and mutation in Vuex
Asynchrony is handled in action, mutation cannot
do atomic operation,
action can integrate multiple mutations
Common routing modes of Vue-router
Hash default
H5 H+history (requires server support)
