Table of contents
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