preface

It has been a while since Vue3.0 was released. Uvu also held a live broadcast in April this year to introduce the capabilities of Vue3.0. Recently, I have sunk down to learn about the new features, and I feel that Vue3.0 is still very powerful.

Performance

PatchFlag

In previous VDOM, if the MSG value changed, all elements in the entire template had to be re-rendered. But in Vue3.0, when the template is compiled, the compiler adds /* Text*/ PatchFlag at the end of the dynamic label. Only VNodes with patchFlag are considered dynamic elements and property changes are tracked.

Each node in a Block, no matter how deep, is bound directly to the Block layer, and can jump directly to the dynamic node without traversing layer by layer.

hoistStatic Static node upgrade

When using hoistStatic, all static nodes are promoted outside of the Render method. This means that they are created only once when the application is launched and reused with each rendering.

In large applications, memory optimization is obvious.

SSR server rendering

When SSR is turned on, if we have some static tags in the template, these static tags will be directly converted to text.

The dynamic binding is still embedded in a single string. This performance is certainly much faster than React converting to VDOM converting to HTML.

StaticNode StaticNode

I mentioned that static nodes in SSR are converted to pure strings. On the client side, when static nodes are nested enough, the VUE compiler also converts the VDOM to plain string HTML.

Through these operations, you can see a significant improvement in the browser’s core performance metrics compared to vue2.x.

The performance summary

The core of the excellent performance of Vue3.0 lies in “static and dynamic separation”. The greater the static and dynamic ratio, the more obvious the performance improvement; In projects, static to dynamic ratios are often larger than we think, and the performance gains from Vue3.0 are definitely “core” scale.

Composition API

The performance mentioned above is not easily perceived in actual development, and the composite Api is something we will definitely encounter later in the development process.

As Vue components grow larger, the code inside them becomes more difficult to understand and maintain. Some of the reusable code is hard to isolate. In Vue2, logical concepts (functions) are managed in components, but functions and components do not have a one-to-one relationship. A function can be used by multiple components and a component can have multiple functions at the same time. In Vue, a function may rely on multiple Options (components, props, Data, computed, Methods, and lifecycle methods).

Composite apis are very flexible when we extract and reuse logic between components. A composite function relies only on its arguments and the Vue global export Api, rather than its subtle this context, and you can export any piece of logic within the component as a function to reuse it.

Core Api

  • reactive
  • ref
  • computed
  • readonly
  • watchEffect
  • watch

summary

I wanted to give a brief introduction to the composite Api, but found that it is nothing more than a move from the official, interested in the link below.

Currently, Vue3.0 supports the Options Api for compatibility, and the combined Api provides better logical combination capability, which makes the upper limit higher

Expand the link

Vue3js. Cn/vue – composi…

www.bilibili.com/video/BV1Tg…