Web Front-end Engineer (Social)
Web Front-end Engineer (Senior)
Senior Web Front-end Development Engineer (VUE)
- What are the main aspects of Vue 3.0 performance improvement?
1. Reactive systems promote vue2 to become reactive objects by calling getters and setters using definePropery for each property in data during initialization. If the property value is an object, defineProperty is also recursively called to make it a reactive object.
Vue3 overrides the response using proxy objects. The performance of proxy is better than defineProperty. Proxy can intercept attribute access, assignment, deletion and other operations without traversing all attributes during initialization. In addition, if there are multiple levels of attribute nesting, only when accessing an attribute, the attribute of the next level will be recursively processed.
Advantages: can listen to dynamically added properties; Properties that can listen for deletion; You can listen on the index and length properties of arrays. Vue2 marks static root nodes, optimizes diff algorithm vue3 marks and promotes all static root nodes,diff only compares dynamic node content
Fragments. Instead of creating a unique root node in a template, they can place sibling tags and text content directly
Static patch flag is raised, static nodes are skipped, dynamic nodes are directly compared, and event processing functions are cached
- Optimization of source volume
Vue3 removes some of the less common apis, such as inline-template, filter, and tree-shaking
- How does the Composition Api differ from the Options Api used by Vue 2.x?
The Options Api contains an object, Options, that describes component Options (data, methods, props, and so on);
API development complex components, the same functional logic of the code split into different options;
Reusing common code with mixins also has problems: naming conflicts and unclear data sources;
Composition Api A new set of apis added to Vue3 that are function-based apis for organizing component logic more flexibly.
Options API is not easy to split and reuse in large projects.
- Proxy relative to Object.defineProperty
What are the advantages?
The performance of proxy is better than defineProperty. Proxy can intercept attribute access, assignment, deletion and other operations without traversing all attributes during initialization. In addition, if there are multiple levels of attribute nesting, only when accessing an attribute, the attribute of the next level will be recursively processed.
Can * listen for array changes can hijack the entire object operation, not the original object operation, is a new Proxy returned a new object can hijack 13 operations 4. Vue 3.0 in the compilation aspect optimization? In vue.js 3.x, all static nodes are marked and promoted, and only dynamic node content is compared when diff;
Fragments (upgrade the vetur plugin): Template does not require a single root node and can be used to place text or sibling tags
Static promotion (hoistStatic), when using hoistStatic, all static nodes are promoted outside of the Render method. It is created only once when the application is launched, and then uses static nodes that only need to be extracted by the application, which are reused repeatedly with each rendering.
Patch flag is added to the end of the dynamic label. Only nodes with patchFlag can be considered as dynamic elements. Attribute modification can be tracked, and dynamic nodes can be quickly found without layer by layer traversing, which improves the performance of virtual DOM diff.
The cacheHandler function is not needed to regenerate a new function every time it is triggered. Tree shaking optimizes the size of the core library and reduces unnecessary code
- Vue. Js 3.0 Responsive system implementation principle?
- reactive
Sets the object to be reactive. Receives a parameter and determines whether it is an object. If it is not an object, this parameter is returned without any response processing. Create an interceptor handerler and set get/set/ deleteProperty.
Get d. Track If the value of the current key is an object, create an interceptor handler for the current key and set get/set/deleteProperty; Returns the current key value if the current key value is not an object.
If the new value set by the set is not equal to the old value, it is updated to the new value and triggers the update.
DeleteProperty When the current object has the key, it deletes the key and triggers an update.
- effect
Take a function as an argument. Collects dependencies when accessing properties of reactive objects
- track
Two parameters are received: Target and key – If there is no activeEffect, no effect dependency is created
– If activeEffect exists, determine whether the Target attribute exists in the WeakMap set
Set (target, (depsMap = new Map())) -WeakMap set has no target attribute, then set(target, (depsMap = new Map()))
– If there is a target attribute in the WeakMap set, judge whether the depsMap of the map value of the target attribute has a key attribute
Set(key, (dep = new set())) -depsmap (dep = new set())) -depsmap (dep = new set())
4. Trigger judge whether there is a target attribute in WeakMap. If there is a target attribute in WeakMap, judge whether there is a key attribute in the map value of target attribute.