why Vue3?

A lot of colleagues have mentioned that Vue3 is discouraged and scared when they hear the new language. In fact, the opportunity that the new technology brings to us is that we can leave work early by mastering it (no). However, I am overjoyed because it is very useful

  • setup.
  • CompositionAPI.
  • More intelligentRenderThe function,
  • TreeShakingdynamicbuildRely on
  • ViteAdaptation (especially recommended)
  • VolarthePugTemplate, separation,setup.langTips (especially recommended)
  • TypeScript

In my own use of VUe2, this any was always flying around. For example, I couldn’t use arrow functions in configuration, and I couldn’t use normal functions in setTimeout, which caused a lot of confusion, and I needed to keep an eye on this

Vite+ TypeScript

  • viteHow fast, as I said in my last article, why is he fast?
  • Please move # Vite why so fast? Why do I recommend Using Vite
  • aboutTypeScript, type annotations andInterFaceA lot of irregularities can be avoided when collaborating, and I’m learning

Composition API

Exposing users to more responsive logical composition capabilities. Fragment,Teleport Suspense, tree-shaking frame sizes, while some functionality is not in use, it won’t be packaged into the final code.

Because there is both template compilation and Runtime, such as responsive systems, which are completely separate packages, platform-independent rendering logic exposes a custom render API

About two-way data binding

This exposes a lot of performance to this, which is defined with Object.defineProperty, which can be quite time-consuming

Vue3 is based on a proxy that lets you throw away the process of defining properties and expose them directly to the Render function that dynamically decides what to return when taking something from the proxy. Has the data props defined before computed all of these things need to be exposed from this Now we’re saying get for a property, we’re proxying you, and we’re going to return it to you directly from the prop based on what we already know about the property

About Template Compilation

Vue2, on the other hand, compiles the Virtual DOM into rendering functions, and the biggest performance waste is that both your dynamic and static templates will diff down

Vue3 does a static analysis of the template, generates a clever render function, and elevates the hoist out of the render function

  • Instead of having to re-create the node every time you update it, you can use itvif vforCut the nodes into thicker chunks,
  • In this way, you can simply store the dynamic parts in a separate array.

Vue3’s template and static template sizes are completely decoupled

What else is compositionAPI?

reactive

Vue2 is a vuue. Observable and Reactive do the same thing

watchEffect

watch VS watchEffect

Vue2 can observe the change of data dependence, but only one field watch can be used.

There’s a new API called watchEffect exposed in 3 that can do things like console.log() and more

What about non-objects?

ref

If non-object data is passed, it has to be wrapped in a REF so that it can be traced reactive watchEffect ref. Everything else is combined

About the source

I’ve seen this one before. Probably through dependency collection, effects are only executed when count.num changes