The development course
Vue.js1. x—–vue.js2.x introduces the virtual DOM
Vue. Js2. X
1) the maintenance of the source code itself
Performance problems of rendering and updating due to large amount of data
2) Compatibility
I want to get rid of the chicken ribs API but keep it for compatibility
The optimization of vue3.0
1) The first is the source optimization, the optimization of vue.js framework itself
The goal is to make the code easier to develop and maintain
Source optimization involves managing and developing source code using Monorepo and typescript to improve the maintainability of your own code
Compared with the source code organization of vue.js2. X, Monorepo split these modules into different packages, each package has its own API, type definition and test, which makes the module split more detailed, the division of responsibilities more clear, the dependency between modules more clear, and easier for developers to read. Understand and modify all module source code to improve code maintainability.
Package (such as the Reactivity response library) can be used independently of vue.js, so that users who only want to use vue.js’s reactive capabilities can rely on the reactive library alone instead of relying on the entire vue.js, reducing the size of the reference package, which vue.js2
Source code preparation language: vue.js1.x native development, vue.js2.x using flow, vue.js3.x using typescript
2) Performance optimization
Source volume optimization, remove some unpopular features, and introduce tree-shaking technology
Data hijacking optimization, when the data changes, in order to automatically update the DOM, then the data must be hijacked update, that is, when the data changes can automatically execute some code to update the DOM
Getters and setters of hijacked data via object.defineProperty must know what key to intercept, nested deep objects,
Vue3.0 uses the proxy API to hijack the entire object. Note that the ⚠️proxy API does not listen for changes to the underlying object. Therefore, vue3.0 handles recursive responses in the getter. There is no doubt that the performance has been greatly improved
3) Compilation optimization
By optimizing the compilation results in the compilation stage, the patch process at runtime can be optimized
Through the analysis of the static template in the compilation stage, the block tree is compiled and generated
Block Tree is a nested block that cuts the template based on dynamic node instructions. The node structure inside each block is fixed, and each block only needs an Array to track the dynamic nodes it contains
With block Tree,vue.js improves vNode update performance from being related to the overall size of the template to being related to the number of dynamic content
4) Optimize logical organization
Vue.js1. x Vue.js2. x Writing a component is essentially writing an object that contains options that describe the component, which we call the Options API
Options API according to the methods, the computed data, props the classification of different options, components, the be clear at a glance, but large component, a component may have multiple logical concerns, when using the options API, Each concern has its own options
Vue.js3.0 provides a new API: the Compsositon API, which puts all the code related to a logical concern into a function so that when a function needs to be modified, there is no need to jump through folders
5) Optimize logic reuse
vue.js 2.x mixin
First of all, each mixin can define its own props,data, and there is no feeling between them, so it is easy to define the same variable, leading to naming conflicts
For components, if the template uses variables that are not defined in the current component, then it is not easy to know where these variables are defined
The Compsositon API addresses both of these issues
In addition to logical reuse, there is also better type support, because they are all functions, and naturally all types are derived when calling functions. Unlike the Options API, which uses this for everything, the Compsositon API is tree shaker-friendly, and the code is easy to compress