Vue3.0 is fully compatible with vue2. X

Six highlights of VUE3.0

New compositing API (like React Hooks) 4 better TypeScript support 5 Expose custom rendering API 6 More advanced components

1. New creation method

Vite: NPM init Vite -app < project name > This approach is faster and lighter than vue-CLI scaffolding. Vite is a feature that uses ES6’s import to send requests to load files

2. Four points of performance optimization

① Optimization of diff algorithm

When the diff algorithm of 2.0 is updated, the virtual DOM will be re-rendered, while 3.0 will add static flags when creating the virtual DOM according to whether the content in the DOM will change. Only static flags will be re-rendered, which will improve performance.

②hoistStatic static promotion

2. In X, elements are created regardless of whether they are updated. In 3.0, only variable elements are created, and invariant elements are used.

③ Event listening cache

For events such as click, changes are tracked every time they are executed in 2.x. In 3.0, event listening caches were added to make the same events cached and run faster.

Vue-cache Template-explorer.net lify.app // Vue3.0 source code check address

(4) SSR rendering

3. Combine API-Setup

The setup function, which is an entry point to the Composition API, was added in 3.0 along with Data. The function life cycle is executed before the beforeCreate life cycle. So you can’t use this, data, methods, etc.

You can include the variable function method lifecycle in setup. In this way, all the code of the same function can be in a function body, and the project structure is clearer and easier to maintain.

Variables and methods defined in the setup function must eventually be returned or not used in the template. But the essence is to inject data exposed by return into data and methods into methods.

The content in setup must be synchronous, and to use asynchro you must customize the customRef function.

4, the difference between the principle of response

The responsivity of VUe2 is realized by defineProperty. In defineProperty, data is set through SET, get listens to data, and then feedback to Watch causes page response rendering.

Vue3 responsive data is realized through ES6 Proxy, which wraps data into Proxy objects. In the object, SET sets data and GET listens to data.