1. What are the main aspects of Vue 3.0 performance improvement?

  • Responsive system upgrade

    • Override reactive systems using Proxy objects: DefineProperty is used in vue2. X to traverse the members in data during initialization to achieve responsivity. If there are nested members in the members, get and set are implemented recursively. In Vue3, however, reactive expressions are handled only when members are used
    • You can listen for dynamically added properties
    • You can listen for deleted properties
    • You can listen for the index and length properties of an array

  • Compiler optimization

    • In Vue2. X, the process of diff is optimized by marking static root nodes

    • In Vue3.0, all static root nodes are marked and promoted, and only dynamic node content is compared to diff

      • Fragments: Do not require a unique root node
      • Static promotion: All static node promotions are rendered only at initialization, optimizing diff
      • Patch Flag: mark all dynamic nodes, optimize diFF, and check the marked content
      • Cache event handler: Caches events to cache objects and directly retrieves them when needed to avoid unnecessary update operations

  • Optimization of source volume

    • Remove uncommon apis, such as inline-template and filter
    • Tree-shaking: Packaging on demand, bringing in nothing and not packaging

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 that describes the options (data, methods, props, and so on) of the component
    • The Options API develops complex components where the code of the same functional logic is split into different Options
  • Composition Api
  • A set of function-based apis
  • The logic of components can be organized more flexibly
  • Conclusion: Composition Api in Vue 3.0 allows us to write the code of the same function inside the same function to return the content used in the page. When we view the functional logic code, we only need to view the function function, and other components can also reuse the function function, which makes the code function neat and can be extracted and reused. You can also use the Option Api in the Composition Api. The code in the Option Api is only available in this component and is divided into different options that are difficult to extract.

3. What are the advantages of Proxy over Object.defineProperty?

  • defineProperty

    • New attributes cannot be listened on and will be added using $set
    • Unable to listen for deleted properties
    • The change of array subscripts cannot be monitored. As a result, the value of the array is directly set by the array subscripts and cannot respond in real time
    • Only properties of objects can be hijacked, so we need to traverse each property of each object. In Vue 2.x, the monitoring of data is achieved by recursion + traversal of the data object. If the attribute value is also an object, it needs deep traversal. Obviously, hijacking a complete object is a better choice

  • Proxy

    • You can listen for dynamically added attributes: Proxy listens for the entire object, so new attributes also trigger the set method to trigger updates
    • You can listen for deleted properties: Internally, you use deleteProperty to listen for property deletions and trigger updates
    • You can listen for the index and length properties of an array
    • You can listen to the whole object, you don’t do a deep walk through the object for responsiveness at initialization, you only do responsiveness when you use the object, you only do responsiveness when you access the properties of the object

4. What are the compilation optimizations of Vue 3.0?

  • Optimization for static nodes:
    • Virtual DOM mechanism adjustment
    • Memory optimization, less footprint
    • Load on demand, more flexible componentization
  • Fragments: Vue 3.x templates no longer need to create a unique root node for text content or many tags of the same class. Vue2.x requires a unique node
  • Static upgrade: static nodes will be promoted outside of render, only when initialized, will not be created again when called render, you can directly reuse these static nodes corresponding to the vnode, static Node, static binding class, ID no longer update processing
  • Patch Flag: mark all dynamic nodes, optimize diFF, and check the marked content
  • Cache event handler: Caches events to cache objects and directly retrieves them when needed to avoid unnecessary update operations. The editor dynamically creates an inline function for you that references the latest handler for the current component. The editor then caches the inline function. If the event handler does not change each time the render is rerendered, the event handler in the cache is used instead of being refetched. This node can be considered a static node. This optimization is even more useful because when it is applied to a component, each previous re-rendering will result in a re-rendering of the component, and will not result in a re-rendering of the component after passing through the handler cache.

5, vue. js 3.0 responsive system implementation principle?

Reactive: Create a responsive object, set a common object or Proxy object as a Proxy object, use Proxy to monitor the whole object, use track method in get method to collect dependencies when obtaining properties, use trigger method in set method to trigger update when setting properties. Properties are deleted using deleteProperty to trigger updates, and reactive methods return reactive objects

Computed: Creates a REF object, stores and returns responsive object attributes, uses the Effect function internally, receives a function as a parameter, calls the function in effect, collects dependencies, and stores the function

Ref: Reactive of a basic data type, processed by Reactive and stored in the value attribute

ToRefs: The internal attributes of the proxy object are also converted into responsive data, and the data types are referenced and traversed to the target object to achieve the deconstruction method. Since reactive cannot achieve the deconstruction, the object returned by Reactive can be solved by this method, and the deconstructed object is still responsive data