vue 2.x gives vue 3.x

Introduction to Vue 3:

Regarding the refactoring background of vue 3, see what You Da said; the new version concept of Vue was formed at the end of 2018. At that time, the code base of Vue 2 was already two and a half years old. Compared with the life cycle of general software, this seems to be no That long, but during that time, the front-end world has changed a lot. As we update (and rewrite) major versions of Vue, we consider two main factors: first: the level of support for new JavaScript language features in major browsers; Some design and structural problems exposed; the brief is: use new language features (es6) to solve architectural problems

So what are the changes in vue 3?

Make it faster
Make it smaller
Make it more maintainable
Make it easier to target native
Make your life easier
As can be seen from the above, we can overview the new features of vue3 as follows:
Faster speed; reduced size; easier to maintain; closer to native; easier to use

faster:

Rewritten virtual dom implementation
Compiler-informed fast paths
More efficient component initialization
1.3-2x better update performance
2-3x faster SSR
From the above, we can see the reasons for the faster speed: vue 3 rewrites the virtual DOM implementation; optimization of compiled templates; more efficient component initialization; update performance increased by 1.3-2.x; SSR speed increased by 2-3 times;

Smaller size:

Tree-shaking -Most optional features(e.g.v-model,<transition>) are now tree-shakable
Bare-bone HelloWorld size:13.5kb;11.75kb with onle Composition API support
All runtime features included:22.5kb;More features included:22.5kb
From the above, we can see the reason for the smaller volume: through the tree-shaking function of webpack, useless modules can be "clip", and only the required ones can be tree-shaked, which has two advantages: for developers, it can be implemented for vue. More other functions, without having to worry about the overall size being too large; for users, the size of the package becomes smaller; Vue can develop more other functions without worrying about the overall size of the package.

Easier to maintain:

Compostion API :Usable alongside existing Options API;
Flexible logic compositon and reuse；
Reactivity module can be used as a standalone library
From the above, the reasons for easier maintenance: can be used with the existing Options API; flexible logic combination and reuse; Vue 3 modules can be used in conjunction with other frameworks

Better Typescript support:

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 （vue-class-component@next is currently in alpha)
As can be seen from the above: Vue 3 is written based on typescrpt, and you can enjoy automatic type definition hints.

The compiler overrides:

Compiler Rewrite ：Pluggable architectrue;
Parser w/ location info (source maps!)
Serve as infrastructure for more robust IDE support

Closer to native:

Custom Renderer API ;import {createRenderer } from '@vue/runtime-core' ;const {render} =createRenderer({nodeOps,patchData});
As can be seen from the above: closer to native, you can customize the rendering API

Easier to use:

Exposed reactivity API;import{observavle,effect} from 'vue'；const state=observable({count:0}) ;efftct(()=>{console.log(`count is:${state.count}`});state.count++;
As can be seen from the above, it is easier to use and the reactive API is exposed.
Easily identify:why a compoent is re-rendering ;const Comp ={render(props){return h('div',props.count)},renderTriggered(event){debugger}}
As can be seen from the above, it is easier to use and easily identify the reason why the component re-renders

New features of Vue3:

Some new features to watch out for in vue 3 include: fragments; Teleport; createRenderer; composition Api;

framents:

</template>

It can be seen from this that in vue 3, components now support multiple root nodes, so that each component does not need to wrap a node, reducing the number of dom, and the browser renders faster

Teleport:

Teleport is a technology that can move our templates to other locations outside the Vue app in the DOM, a bit like Doraemon's "Any Door". In vue 2, elements like modals, toast, etc., if we are nested inside a certain component of Vue, it will become very difficult to deal with the positioning, z-index and style of the nested component. Through Teleport, we You can write template code in the logical position of the component, and then render it outside the scope of the vue application.

createRenderer：

Regarding createRenderer, we understand the basic usage:
improt {createRenderer} from "@vue/runtime-core"；
const {render,createApp}=createRenderer({ patchProp,insert,remove,createElement}) export {render,createApp};export *from '@vue/runtime-core'
Through createRender we can build a custom renderer, we can extend the development model of vue to other platforms, we can generate it on the canvas canvas, steps: template-->render() in the App object-call the render() function After -----------> Vnode virtual node -------- called canvas api -----> real canvas element -- called canvas api -----> canvas platform

Composition API

The compostion API is also a composition API. Through this form, we can maintain our code more easily, and conduct centralized management of variables with the same function.
Regarding the use of the composition API, here is the following diagram to expand

Simple to use:

export default{

const count=ref(0);

const double=computed(()=>{count.value*2});

function increment(){

count.value++

}

onMounted(()=>{console.log("component mounted")})

return { count,double,increment}

}

incompatible changes

Global API: the global Vue API has been changed to use the application instance, the global and internal APIs have been refactored to be tree-shakable;
Template directives: v-model usage on components changed; key usage on <template v-for> and non-v-for nodes changed; v-if and v-for precedence on the same element changed; v-bind= 'object' is now order sensitive; refs in v-for no longer register ref arrays
Components: Functional components can only be created using normal functions; functional attributes are in single-file components (SFC); asynchronous components now require the defineAsyncComponent method to create
Rendering function: Rendering function API changed; scopedSlotsproperty has been removed, all slots are exposed as functions through slots; custom directive API has been changed to be consistent with component life cycle; some conversion classes have been renamed: v-enter-->v -enter-from,v-leave->v-leave-from; component watch option and instance method $watch no longer support dot-separated string paths, please change the calculation function as a parameter; in Vue 2.x, apply the root container outerHTML will be replaced with the root component template (if the root component doesn't have a template/render option, it will eventually compile to a template). Vue3.x now uses the innerHTML of the application container.
Other small changes: destroyed lifecycle option was renamed to unmounted; beforeDestory lifecycle option was renamed to beforeUnmount; [porp default factory function no longer has access to this is context; custom directive API changed to be consistent with root component lifecycle ;data should always be declared as a function; data options from mixins can now be simply merged; attribute coercion strategy changed; some transition classes were renamed; component watch options and instance methods, $watch. String paths, use computed property functions as parameters instead; <template> tags without special directives (v-if/else-if/else, v-for or v-slot) are now treated as ordinary elements and will be natively <template> element instead of rendering its inner content; in Vue 2.x, the outerHTML of the application root container will be replaced with the root component template (if the root component does not have a template/render option, it will eventually be compiled into a template). Vue 3.x now uses the inner HTML of the application container, which means that the container itself is no longer considered part of the template.
Removed API: keyCode is supported as v-on modifier, on, off and filter fillter, inline template attribute, $destroy instance method. Users should no longer manually manage the lifecycle of individual Vue components.

vue 2.x gives vue 3.x

Guess you like