What Vue3 brings

performance optimization

First, some performance improvements over Vue2:

By tree shaking (up to 41% resource size reduction)
Initial rendering (up to 55% faster)
Update Speed: (133% faster)
Memory footprint: (up to 54% reduction)

Secondly, it also brings some new optimizations, a brief summary

Routing lazy loading
keep-alive cached pages
Reuse DOM with v-show
v-for traversal avoids using v-if at the same time
Long list performance optimization
event destruction
Image lazy loading
Import third-party plug-ins on demand
Stateless components are marked as functional components
subcomponent split
variable localization
SSR

Better TypeScript integration

Improved TypeScript support, the editor provides strong type checking and errors and warnings
better debugging support

New APIs for handling large-scale use cases

reactive
ref
computed
readonly
watchEffect
watch
unref
toRef
toRefs
isRefis
Proxy
isReactive
isReadonly
customRef
markRaw
shallowReactive
shallowReadonly
shallowRef
toRaw

Hierarchical Internal Modules

The Vue 3.0 core is still available via a simple script tag, but its internals have been completely rewritten as a set of decoupled modules. The new architecture provides better maintainability and allows end users to reduce the runtime size by half by tree-shaking.

Function points provided by the module:

Compiler supports custom AST transformations for build-time customization (e.g. build-time i18n)
The core runtime provides APIs for creating custom renderers for different rendering targets such as native mobile, WebGL or terminal. The default DOM renderer is built using the same API.
The functionality exported by the @vue/reactivity module provides direct access to Vue's reactivity system and can be used as a standalone package. It can be paired with other templating solutions such as lit-html, and can even be used for non-UI scenarios.

CompositionAPI

composition-api, designed to solve the difficulties of using Vue in large applications. It is the most important RFC (official document) of Vue3.0, which was originally called vue-function-api.

The Composition API is built on top of the Reactive API, which enables logical composition and reuse similar to React hooks, a more flexible code organization mode, and more reliable type inference compared to the 2.x object-based API.

<template>
  <button @click="increment">
    Count is: {
    
    {
    
     state.count }}, double is: {
    
    {
    
     state.double }}
  </button>
</template>

<script>
import {
    
     reactive, computed } from 'vue'

export default {
    
    
  setup() {
    
    
    const state = reactive({
    
    
      count: 0,
      double: computed(() => state.count * 2)
    })

    function increment() {
    
    
      state.count++
    }

    return {
    
    
      state,
      increment
    }
  }
}
</script>

Main changes

New setup function: equivalent to created and beforeCreated, called after props are initialized
Data uses reactive to achieve two-way binding, you can decide whether to bind a data
Watch supports suspension, saving performance overhead
Lifecycle hooks are pretty much the same as before
Scattered export of global methods to reduce package size
Functional api: friendly to ts, combined function reuse instead of mixin
Expose more APIs and become more flexible

More RFCs

There are other RFCs with relatively minor changes, such as:

render method override
remove filters
slot syntax rewriting
transition syntax changes

Two new features provided

//<script setup>：用于在SFC中使用Composition API的语法糖
//<style vars> ：SFC中状态驱动的CSS变量

proxy alternative defineProperty

two-way binding

Vue2.0 two-way binding

The observer traverses the object and intercepts the read and write operations on the object properties in the getter/setter method
Object interception: Object attribute changes can be intercepted, but object attribute additions and deletions cannot be intercepted
Array interception: By rewriting the prototype, 7 array methods can be intercepted, and the direct assignment and length change of the array cannot be intercepted.

Vue3.0 two-way binding
Proxy supports the addition and deletion of attributes of hijacked objects and the indexing operations of arrays
Compared with Vue2.0's recursive hijacking of data, Vue3 provides reactive and other methods to customize responsive data and save memory overhead
IE11 compatibility issues, vue will provide a compatible version

Table of contents