This article is a summary of Vue related interview questions and their answers during the job hunting process. Today first code so much, the follow-up interview questions will continue to fill.
Talk about your understanding of the Vue responsive principle
Using the method of data hijacking combined with the publication-subscriber model, Object. DefineProperty is used to listen on the setter and getter of the attribute. When the data changes, subscribers will be notified and corresponding listener callback will be triggered. Each component instance corresponds to a Watcher instance, which records “touched” data properties as dependencies during component rendering. Watcher is then notified when the setter for the dependency fires, causing its associated component to be re-rendered.
So we can expand it out here and ask. Vue3 reactive principle uses Proxy instead of Object. DefineProperty of Vue2. What are the benefits of using Proxy? You can refer to 2 for answers.
DefineProperty and Proxy differences
Object.defineproperty is hijacked for attributes of an Object, so every attribute of every Object needs to be traversed. If the property value is an object, recursive traversal is also required. A Proxy is a Proxy for the whole object.
Object.defineproperty can’t listen for array subscripts and can’t respond in real time when manipulating data using array subscripts. A Proxy can Proxy not only objects, but also arrays.
The implementation principle of V-Model
The V-Model is essentially a syntax sugar. It uses V-bind :value to bind a responsive data and an input event. When the input box enters data, it assigns the input data to the responsive data of the V-bind :value binding.
Parent component lifecycle execution order
1. Rendering process
Parent beforeCreate -> Parent created -> parent beforeMount -> child beforeCreate -> child created -> child beforeMount -> Child Mounted -> parent Mounted
2. Update process
Parent beforeUpdate -> Child beforeUpdate -> Child updated -> Parent updated
3. Destruction process
Parent beforeDestroy -> Child beforeDestroy -> Child destroyed -> Parent destroyed
### Difference between computed and Watch
Computed supports caching and recalculates only when the dependent data changes; Watch does not support caching. When data changes, corresponding operations will be directly triggered
For computed data, it does not support asynchron. If there are asynchronous operations in computed data, data changes cannot be monitored. Watch supports asynchrony.
Difference between V-if and V-show
V-show shows or hides elements by controlling the CSS properties of display. V-if shows or hides elements by destroying or rebuilding the DOM
In what situations are v-if and V-show used respectively? Using V-show is best for frequent dom element hiding or display operations. Using V-IF to hide or display DOM elements for a single operation is optimal
subsequent
Why v-if and V-for don’t work on the same element.
V-for why key is used.
Why not use index as the key for v-for?
What are the main event modifiers?
Scope implementation principle.
Talk about your understanding of nextTick.
Talk about your understanding of the Diff algorithm.
Implementation principle of keep-alive.
Optimized first screen loading.
What are the optimizations for Vue3 compilation
.
Thank you
Thank you for your attention, want to know more content can pay attention to the new operation of the public number, after the release of the article will also be synchronized to the public number.
