Read the optimization of Vue3.0

The source code for vue.js 2.x is hosted in the SRC directory, Platforms (Platforms only), Server (server-side renderings), SFC (.vue), platforms (Platforms only) and platforms (Platforms only) Single file parsing related code), shared (shared tool code) and other directories.
Vue.js 3.0, the entire source code is maintained through monorepo, according to the function of the different modules into different subdirectories under the Packages directory, each package has its own API, type definition and test.

Vue. Js 2.x selects Flow for type checking to avoid errors caused by type problems, but Flow is not well supported for checking some complex scene types.
Vue.js 3.0 abandons Flow and reconstructs the entire project in TypeScript. TypeScript provides better type checking and supports complex type derivation; Since the source code is written in TypeScript, it also saves the hassle of maintaining separate D.ts files.

Tree-shaking relies on the static structure of ES2015 module syntax (import and export), finding and marking modules that are not introduced through static analysis at compile time. If we didn’t include uncommon components like Transition and KeepAlive in the project, their corresponding code wouldn’t be packaged.

Vue. Js 3.0 is compatible with most of the Vue. Js 2.x apis, but some of the less popular features are removed: KeyCode supports v-on modifiers, on, ON, off, and $once instance methods, filter filtering, inline templates, and more.

Vue. Js 2.x is internally responsive by hijacking getters and setters for data using the Object.defineProperty API. The API has some drawbacks. It must know in advance what key is being intercepted, so it cannot detect the addition and removal of object attributes.
Vue. Js 3.0 uses the Proxy API to do data hijacking, which hijacks the whole object, and naturally can detect the increase and deletion of the object’s attributes.

In Vue. Js 2.x, for an Object with a deep nesting of attributes, to hijack the deep changes within it, you need to recursively traverse the Object, executing Object.defineProperty to make each layer of Object data responsive, which can be a significant performance drain.
In Vue.js 3.0, the Proxy API can not be used to listen to the deep changes in the properties of the object, so it is handled by recursive response in the getter. The advantage of this is that the internal properties that are really accessed will become responsive. Simply, it can be said to implement responsiveness on demand. There is less of a performance drain.

The granularity at which Vue. Js 2.x updates data and triggers rerendering is component-level, with the entire VNode tree of that component being traversed internally within a single component.
Vue.js 3.0 does the analysis of static templates in the compilation stage and generates Block trees. A Block tree is a nested Block that cuts the template based on dynamic node instructions. The node structure inside each Block is fixed. Each block only needs to track the dynamic nodes it contains.

In vue.js 2.x, if a component passes in slot, the child component will be forced to update every time the parent component updates, resulting in wasted performance.
Vue.js 3.0 optimizes slot generation so that updates to properties in non-dynamic slots only trigger updates to child components. Dynamic slot refers to the use of V-if, V-for, and dynamic slot names on a slot that causes the slot to change dynamically at runtime but does not allow the track component.

Ability is limited, say not clear, you can see this article: blog.csdn.net/weixin_4872…

Writing a component with vue.js 2.x is essentially writing an “object that contains Options that describe the component.” Call it the Options API. We write the corresponding code according to different options such as Data, props, Methods, and computed. For small components, the code might be straightforward, but for large components, changing a point of logic might require constantly switching up and down in a single file and looking for logic code.
Vue.js 3.0 provides a new API called the Composition API, which has a great mechanism to solve the problem of putting all the code related to a logical concern into a function, so that when changing a logic, only that part of the code needs to be changed.

In vue.js 2.x, we use mixins to reuse logic. When you pull out and reference a large number of mixins, you’ll find two inevitable problems: naming conflicts and unclear data sources.
Vue.js 3.0’s Composition API will have an advantage in terms of logic reuse.