Optimization Summary of Vue 3.0

  • 2021-08-28 19:28:09
  • OfStack

1. Source optimization:

a. Use monorepo to manage source code

The source code of Vue. js 2.x is hosted in src directory, and then compiler (template compilation related code), core (platform-independent general runtime code), platforms (platform-specific code), server (server-side rendering related code), sfc (. vue single file parsing related code), shared (shared tool code) and other directories are split according to functions. Vue. js 3.0. The whole source code is maintained by monorepo. According to the function, different modules are split into different subdirectories under packages directory. Each package has its own API, type definition and test.

b. Use Typescript to develop source code

Vue. js 2.x chooses Flow for type checking to avoid some errors caused by type problems, but Flow does not support the checking of some complex scene types well. Vue. js 3.0 discarded Flow and reconstructed the whole project with TypeScript. TypeScript provides better type checking and can support complex type derivation; Because the source code is written using TypeScript, it also saves the trouble of maintaining d. ts files separately.

2. Performance optimization:

a. Technology for Introducing tree-shaking

tree-shaking relies on the static structure of ES2015 module syntax (that is, import and export), and through static analysis during compilation stage, modules that are not introduced are found and marked. For example, if we didn't introduce infrequent components such as Transition and KeepAlive in the project, their corresponding code wouldn't be packaged.

b. Remove 1 unpopular feature

Vue. js 3.0 is compatible with most api of Vue. js 2. x, but one of the less popular feature is removed: for example, keyCode supports as a modifier of v-on, $on, $off and $once instance methods, filter filtering, inline templates, etc.

3. Responsive optimization:

a. Use proxy api for data hijacking

Vue. js 2. x is responsive through Object. defineProperty, getter and setter to hijack data. This API has a few flaws. It must know what key is to be intercepted in advance, so it cannot detect the addition and deletion of object attributes. Vue. js 3.0 uses Proxy API for data hijacking, which hijacks the whole object. Naturally, the addition and deletion of attributes of objects can be detected.

b. The response formula is inert

In Vue. js 2. x, for an object with nested deep attributes, to hijack its internal deep changes, it is necessary to recursively traverse this object, and execute Object. defineProperty to turn every layer of object data into responsive, which will undoubtedly consume a lot of performance. In Vue. js 3.0, Proxy API can't listen to the deep-seated attribute changes inside the object, so its processing mode is to recursively respond in getter, which has the advantage that the really accessed internal attributes will become responsive, which can be simply said to be responsive on demand, so there is no such large performance consumption.

4. Compile optimization:

a. Generate block tree

The granularity of Vue. js 2. x data updates and triggers re-rendering is component-level, and the entire vnode tree of that component needs to be traversed within a single component. Vue. js 3.0 compiles and generates Block tree by analyzing static templates in compilation stage. Block tree is a nested block that cuts templates based on dynamic node instructions, and the node structure within each block is fixed. Each block only needs to track the dynamic nodes it contains.

b. slot Compilation Optimization

In Vue. js 2. x, if one component is passed in slot, then every time the parent component is updated, the child component update will be forced, resulting in a waste of performance. Vue. js 3.0 optimizes the generation of slot so that updates of attributes in non-dynamic slot only trigger updates of subcomponents. Dynamic slot refers to the use of v-if, v-for, dynamic slot names on slot, which will cause slot to change dynamically at runtime but cannot be operated by subcomponent track.

c. diff algorithm optimization

Grammar api Optimization

a. Optimizing logical organization

Writing a component using Vue. js 2. x is essentially writing an "object that contains options to describe the component," which can be called Options API. We write the corresponding code according to different options such as data, props, methods and computed. In this way, the code may be clear for small components, but to modify a logical point for large components, it may be necessary to constantly switch up and down in a single file and find logical code. Vue. js 3.0 provides a new API: Composition API, which has a good mechanism to solve this problem, that is, put all the codes related to a certain logical concern in one function, so that when modifying one logic, only one block of code needs to be changed.

b. Optimized logic reuse

In Vue. js 2. x, we generally use mixins to demultiplex logic. When a large number of mixins are extracted and quoted, you will find two inevitable problems: naming conflicts and unclear data sources. Vue. Composition API designed by js 3.0 will have great advantages in logical reuse.

The above is the Vue3.0 optimization summary of the details, more about Vue3.0 optimization details of information please pay attention to other related articles on this site!


Related articles: