First, the performance is 1.2 ~ 2 times faster than 2.x

Optimization of diff algorithm

  1. In VUe2, the virtual DOM is fully compared.
  2. In VUe3, static flag PatchFlag was added. When creating a VNode, static PatchFlag is added to the vNode based on whether the content of the vnode can be changed. In diff, only nodes with PatchFlag are compared. PatchFlag has types, such as a variable TEXT node, to which a static flag with the PatchFlag enumeration value of TEXT will be added. So when you diff, you only need to compare the text. There’s less to compare. PatchFlag also has dynamic class, dynamic style, dynamic properties, dynamic key properties and other enumerated values.

Static promotion in render phase (the render phase refers to the generation of the virtual DOM tree)

  1. In VUe2, as soon as a data change is detected, the re-render component is used and all vNodes are recreated to form a new VDOM tree.
  2. In VUe3, vnodes that do not participate in the update will be static promoted and will only be created once and reused in re-render.
  3. Static promotion can be understood as saving references to vNodes the first time render does not participate in the update. When re-render new VDOM trees, just take their references, no need to recreate them.

Event listening cache

  1. In VUe2, @click=”onClick” is also treated as a dynamic property, and diff is also compared. But we know it doesn’t change, like @click= “onClick2”, bound to something else.
  2. In VUe3, if the event does not change, onClick is cached (similar to the effect achieved by static promotion) and the node is not tagged with PatchFlag (i.e. the node that does not need to be updated). Thus, the event listener property saves unnecessary performance costs in both render and DIff phases.

Build on demand, smaller than Vue2. X

In Vue3, you can reference vue functions like this. If your project does not use Watch, tree shaking will be removed at compile time.

import { computed, watch, nextTick } from "vue";
Copy the code

ES6 module system import/export is used.

Compostion API: Compostion API/ injection API

When it comes to code organization, traditional web pages are HTML/CSS /javascript (structure/style/logic) separated. Vue/React integrates structure, style, and logic in a componentized manner to facilitate code maintenance.

The Compostion API goes a step further and focuses on the JavaScript (logic) section, putting together logic-related code for closer and more maintainable code.

  1. In vue2, we use Option API (Data /methods/ Mounted) to organize the code. This will make the logic separate. For example, we need to declare variables in data and define response functions in methods. Mounted Initializes variables in data/methods/ Mounted. If you want to maintain such a function in a component, you need to repeatedly switch data/methods/ Mounted to the corresponding position and then modify the code.

  2. In VUe3, the setup function is used. The logic related to count as shown below goes into counter. Js, and the logic related to todo goes into todos.js.

import useCounter from './counter'
import useTodo from './todos'

setup(){
  let { val, todos, addTodo } = useTodo()
  let {count,add} = useCounter() 
  return {
    val, todos, addTodo,
    count,add,
  }
}
Copy the code

This, in my opinion, is the biggest feature of the Compostion API, the way code is organized in terms of functionality. It also makes code more reusable.

Fourth, better TS support

  1. Vue2 is not suitable for TS because of the Option API style of VUe2. Options is a simple object, while TS is a type system, object-oriented syntax. There’s a bit of a mismatch.

  2. In the implementation of VUE2 with TS, vUE components should be enhanced with vuE-class-component, Script should support TypeScript decorators, and vue-property-decorator should be used to add more vUE decorators. In the end, the ts component writing is quite different from the JS component writing.

  3. In VUe3, the defineComponent function is tailored to make components better use of parameter type inference under TS. Among the Composition API code styles, the typical apis are ref and Reactive, which also support type declarations.

import { defineComponent, ref } from 'vue'
const Component = defineComponent({
    props: {
        success: { type: String },
        student: {
          type: Object as PropType<Student>,
          required: true}},setup() {
      const year = ref(2020)
      const month = ref<string | number>('9')
     
      month.value = 9 // OK
     const result = year.value.split(' ') // => Property 'split' does not exist on type 'number'
 }
Copy the code

5. Custom Renderer API

We can see the difference between vue2 and VUe3

// vue2
import Vue from 'vue'
import App from './App.vue'
new Vue({ => h(App)}).$mount('#app')

// vue3
const { createApp }  from 'vue'
import App from "./src/App"
createApp(App).mount(('#app')
Copy the code

Vue createApp will generate HTML code for our template map, but if you don’t want to render to HTML, you want to render to canvas or something other than HTML, Use the Custom Renderer API to define your own render generation functions.

// Create your own createApp, such as render to canvas.
import { createApp } from "./runtime-render";
import App from "./src/App"; / / the root component

createApp(App).mount('#app');
Copy the code

Six, more advanced components

Fragment components

// Vue2 is not allowed to write like this, components must have a trailing node, now can write like this, Vue will create a virtual Fragment node for us.<template>
  <div>Hello</div>
  <div>World</div>
</template>
Copy the code

What’s the advantage of writing this? First, if the root node is not necessary, no need to create, reducing the number of nodes. Fragment nodes are virtual and will not be displayed in the DOM tree.

Suspense components

<Suspense>
  <template >
    <Suspended-component />
  </template>
  <template #fallback>
    Loading...
  </template>
</Suspense>
Copy the code

Alternate content is displayed before the Suspended- Component is fully rendered. In the case of asynchronous components, Suspense can wait for components to be downloaded, or perform some asynchronous operations in setup functions.

7. Faster Development experience (Vite development Build Tool)

When using WebPack as a development build tool, NPM Run Dev takes a while, and the bigger the project, the longer the wait. There is a delay of a few seconds for hot reloading pages, but if you use Vite for vue3 development build tools, NPM Run Dev starts in seconds and hot reloading is also quick. It was a great development experience, refusing to wait.

The principle of Vite is to use the browser support import keyword, start the project without the Webpack build tool to build first, the browser directly request routing corresponding code file, proxy server for a single file to compile and return. If the requested file contains other files, the browser continues to send the request and the proxy server returns the request. In this way, NPM run dev does not need compilation, real-time request real-time compilation.

Conclusion:

In addition, the data listening mode has become a Proxy, eliminating existing limitations of Object.defineProperty (such as the inability to detect new attribute additions) and providing better performance.

Vue3 solves some of the problems of VUE2, such as performance problems of large applications and unfriendly TS support. Custom rendering API solves the problems of architecture. It would be much better to implement WEEX framework on the basis of VUe3. A number of optimizations have also been made, with the Compostion API allowing the code to be better organized. Vite development build tools make development experience better, Tree Shaking makes packages smaller and better.

Overall vuE3 is great and brings a lot of great new features.