What are the new features of vue3.0

New features of vue3.0: 1. Node tag; 2. Event caching; 3. Responsive Proxy; 4. Composition API; 5. Three new components: Fragment, Teleport (portal) and Suspense; 6. Tree Shaking and so on.

The operating environment of this tutorial: windows10 system, vue3.0 version, Dell G3 computer.

New features of Vue3.0

##1. Node tag

Static Node

<span>value</span>

Dynamic Node

<span>{{value}}</span>patchFlag

The bottom layer of vue3.0 will automatically identify whether a node is dynamic. If it is dynamic, it will automatically generate an identification (different dynamics will have Corresponding to different identifiers, such as the dynamics of the content text, or the dynamics of the id), each time the DOM is updated, the static nodes are directly skipped and the dynamic nodes are directly positioned, which greatly saves efficiency.

2. Event caching

Generally, the listening time is set for a node, and each page When updating, a new listening function will be regenerated. If cacheHandlers is enabled, it will automatically identify whether it can be cached when it is updated for the first time. If it can be cached, it will be cached so that page updates do not need to be regenerated, especially when On components, it greatly reduces unnecessary refresh and resource consumption of sub-components.

3. Responsive Proxy

Proxy(vue3.0) vs Object.defineProperty (vue2.0)

1. Vue2.0 responsive principle

• The responsive process needs to traverse data, props, etc., which consumes a lot of money

• Does not support Set/Map , class, array and other types

• Newly added or deleted attributes cannot be monitored

• Array responsiveness requires additional implementation

• The corresponding modification syntax is limited

2. Vue3.0 responsive principle: Use ES6 Proxy to solve these problems.

Use Proxy to intercept a series of operations on data.

4. Composition API

Don’t use Composition for the sake of Composition

Improves the quality of the code upper limit, but it also lowers the lower limit

is positioned as an advanced feature because the problems it is designed to solve mainly arise in large applications.

We are not planning to overhaul the documentation to use this as the default scheme.

Related recommendations: "

vue.js Tutorial"

5. Teleport

Modal, Dialog, Select, Dropdown...

##6. Fragments

The template does not need to be wrapped with a p, that is, there is no need to have only one root node. Multiple labels (nodes) can be paralleled

7. Custom Renderer API (createRenderer)

NativeScript Vue integration underway by @rigor789
Users already experimenting w/ WebGL custom renderer that can be used alongside a normal Vue application (Vugel)
WEEX, Vue Native, applet...

8. Tree ShakingLoading on demand

Except for retaining some necessary parts such as Virtual DOM update algorithm and responsive system, others are loaded on demand such as v-model, etc.

9. Suspense

Wait on nested async dependencies in a nested tree
Works with async setup()
Works with Aysnc Components
You can load components asynchronously, and the entire DOM will be in memory in advance Virtual rendering is performed in the UI. At this time, it will wait for asynchronous component rendering. After all components are rendered, it will be rendered to the interface DOM.

10. Better TypeScript Support

##Codebase written in TS w/ auto-generated type definitions

• API is the same in JS and TS

• In fact, code will also be largely the same

  TSX support

• Class component is still supported
##11. Stepping into pitfalls

Event

The root node is automatically mounted by default and xxx.native event is discarded

• inheritAttrs: false (class, style, events, css scope)

  The settings are not mounted to the root node by default, but this will result in classes etc. not being mounted to the root node

  1. props

  Set the event attribute declaration in the component.

  New emits configuration

• Slot

##[External link image transfer failed, the origin site may There is an anti-leeching mechanism, it is recommended to save the image and upload it directly (img-McvPeqpz-1606459132262) (C:\Users\20194\AppData\Roaming\Typora\typora-user-images\image-20201127104234202.png)]

• watch

  

##In vue3.0, you can configure flush: " sync" to make the functions in the watch and the monitored element value changes at the same time, and no longer execute after the component is updated.

v-model & .sync

• 
  

  ##JSX / TSX
• 1、@ant- design-vue / jsx
  It used to be that some properties needed to be passed through objects. Now that properties are newly defined, you can pass them directly

  
  # #For more programming-related knowledge, please visit:

  programming video
! !

The above is the detailed content of What are the new features of vue3.0. For more information, please follow other related articles on the PHP Chinese website!