What are the main aspects of Vue 3.0 performance improvement?

1. Responsive system upgrade

  • When vue2 is initialized, it calls getters and setters for each property in data using definePropery to make it a reactive object. 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.

2. Compilation optimization

  • Optimize compilation and rewriting of the virtual DOM for greater performance improvements in first renders and updates to the DOM

Vue2 optimized diff algorithm vue3 by marking static root nodes and promoted all static root nodes. When diff, only dynamic node content was compared

  • Fragments. Instead of creating a unique root node in a template, they can place sibling tags and text content directly
  • Static ascension
  • Patch Flag, skip static nodes and directly compare dynamic nodes
  • Caching event handlers

3. Optimization of source volume

  • Vue3 removes some uncommon apis, such as inline-template and filter
  • Use the tree – shaking

What is the difference between the Composition Api used in Vue 3.0 and the Options Api used in Vue 2.x?

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;Copy the code

compositionApi

Vue3 has a new set of apis, which are function-based apis that can organize component logic more flexibly. Options API is not easy to split and reuse in large projects.Copy the code

What are the advantages of Proxy over Object.defineProperty?

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.

You can listen for array changes and you can hijack an entire object when you're not doing an operation on the original object, a new object that's returned by a new Proxy and there are 13 different kinds of operations that you can hijackCopy the code

What are the optimizations in Vue 3.0 compilation?

  • 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.
  • Caching the event handler function cacheHandler to avoid regenerating a new function each time it is fired to update the previous function
  • Tree Shaking optimizes core library size and reduces unnecessary code

V. The implementation principle of vue. js 3.0 responsive system?

1. 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  
  1. Collect dependencies (track);
  2. If the value of the current key is an object, create an interceptor handler for the object of the current key and set get/set/deleteProperty;
  3. Returns the current key value if the current key value is not an object.
  • set
  1. If the new value and the old value are not equal, the new value is updated and the update (trigger) is triggered.
  • deleteProperty
  1. When the current object has the key, delete the key and trigger an update.

2. effect

Take a function as an argument. Collects dependencies when accessing properties of reactive objects

3. track

  • Receives two parameters: target and key

  1. – If there is no activeEffect, no effect dependency is created

  2. – If activeEffect exists, determine whether the Target attribute exists in the WeakMap set

  3. Set (target, (depsMap = new Map())) -WeakMap set has no target attribute, then set(target, (depsMap = new Map()))

  4. – 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

  5. Set(key, (dep = new set()))

  6. -depsMap adds the activeEffect if the depsMap has the key attribute

4. The 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. If so, the collected effect() is triggered cycle.