New features of uni-app 3.0

uni-app 3.0 introduces multiple major updates, including a brand-new compiler architecture, performance optimizations, Composition API support, Vite build tool integration, and more. These improvements significantly enhance development efficiency and runtime performance while maintaining uni-app's core advantage of cross-platform development.

Brand-New Compiler Architecture

uni-app 3.0 has restructured the compiler core, adopting a Vite-based build process. The new architecture brings the following improvements:

1. Faster Compilation: Hot reloading is 3-5 times faster than version 2.x
2. Tree-shaking Support: Automatically removes unused code
3. On-Demand Compilation: Only compiles modified files

// Example: New compilation configuration in manifest.json  
{  
  "compilerOptions": {  
    "minify": {  
      "js": true,  
      "css": true  
    },  
    "sourceMap": true  
  }  
}  

Full Support for Composition API

uni-app 3.0 deeply integrates Vue 3's Composition API, allowing developers to organize code logic more flexibly:

<script setup>  
import { ref, onMounted } from 'vue'  
import { onLoad } from '@dcloudio/uni-app'  

const count = ref(0)  

onLoad(() => {  
  console.log('Page loaded')  
})  

onMounted(() => {  
  console.log('Component mounted')  
})  

function increment() {  
  count.value++  
}  
</script>  

<template>  
  <view @click="increment">Click count: {{ count }}</view>  
</template>  

Enhanced Performance Optimizations

Runtime performance has been improved in several ways:

1. Rendering Layer Optimization: Reduces setData calls by 30% in mini-program platforms
2. Lower Memory Usage: 20% reduction in memory consumption on Android
3. Faster Startup: 15% shorter cold start time on iOS

New performance configuration options allow granular control over performance strategies:

// pages.json  
{  
  "pages": [...],  
  "performance": {  
    "navigationBarLoading": "auto",  
    "componentPlaceholder": {  
      "view": "default",  
      "image": "default"  
    }  
  }  
}  

Vite Build Tool Integration

Vite is now the default build tool, supporting the following features:

• Lightning-fast cold start
• Instant hot module replacement (HMR)
• True on-demand compilation

Example of custom Vite configuration:

// vite.config.js  
import { defineConfig } from 'vite'  
import uni from '@dcloudio/vite-plugin-uni'  

export default defineConfig({  
  plugins: [uni()],  
  server: {  
    port: 8080,  
    proxy: {  
      '/api': {  
        target: 'http://localhost:3000',  
        changeOrigin: true  
      }  
    }  
  }  
})  

New UI Component Library

The built-in component library has been fully upgraded, with several new practical components:

1. uv-ui: A newly designed component library with theme customization support
2. Gesture Recognition Components: Support for pinch-to-zoom and swipe recognition
3. Enhanced scroll-view: Optimized scrolling performance

<template>  
  <uv-button type="primary" @click="handleClick">  
    New Button Component  
  </uv-button>  

  <gesture-view   
    @pinch="handlePinch"  
    @rotate="handleRotate">  
    <image src="/static/logo.png" />  
  </gesture-view>  
</template>  

Deep TypeScript Support

Improved type system with more comprehensive type hints:

1. Component props type inference
2. API interface type definitions
3. Type-safe page routing

// Type-safe page navigation  
uni.navigateTo({  
  url: '/pages/detail/detail?id=123' as '/pages/detail/detail'  
})  

// Component props type definition  
defineProps<{  
  title: string  
  size?: 'small' | 'medium' | 'large'  
}>()  

Enhanced Cross-Platform Capabilities

Improved support for platform-specific features:

1. Mini Programs: Support for the latest Skyline rendering engine
2. App: New native safe area adaptation solution
3. H5: Support for SSR (Server-Side Rendering)

Safe area adaptation example:

/* Adapt to full-screen devices */  
.safe-area {  
  padding-bottom: constant(safe-area-inset-bottom);  
  padding-bottom: env(safe-area-inset-bottom);  
}  

Upgraded Development Tools

The accompanying HBuilderX offers new features:

1. Visual Compilation Configuration: Adjust compilation parameters via GUI
2. Performance Analysis Tools: Real-time runtime performance monitoring
3. Enhanced Code Intelligence: Improved API auto-completion

Improved Plugin System

More flexible plugin mechanism:

1. Support for Vite plugin ecosystem
2. Plugin hot reloading
3. Better type support

Example of creating a plugin:

// my-plugin.js  
export default {  
  install(app, options) {  
    app.provide('myService', {  
      doSomething: () => {...}  
    })  
  }  
}  

Upgraded Internationalization Solution

Improved built-in i18n support:

1. On-demand language pack loading
2. Dynamic language switching
3. Better pluralization handling rules

// Usage example  
const { t } = useI18n()  
console.log(t('message.hello'))  

Optimized State Management

New lightweight state management solution:

// stores/counter.js  
import { defineStore } from 'uni-app'  

export const useCounterStore = defineStore('counter', {  
  state: () => ({ count: 0 }),  
  actions: {  
    increment() {  
      this.count++  
    }  
  }  
})  

Enhanced Debugging Capabilities

Unified cross-platform debugging experience:

1. Same debugging protocol across all platforms
2. Source map debugging support
3. Network request monitoring

// Enable debug mode  
uni.setEnableDebug({  
  enableDebug: true  
})  

Expanded Build Targets

Support for additional build targets:

1. WeChat Mini Games
2. Quick Apps
3. HarmonyOS Apps

Example build configuration:

// package.json  
{  
  "uni-app": {  
    "scripts": {  
      "wx-game": {  
        "title": "WeChat Mini Game",  
        "env": {  
          "UNI_PLATFORM": "wx-game"  
        }  
      }  
    }  
  }  
}  

Enhanced CSS Preprocessing

Support for modern CSS features:

1. Cross-platform compatibility for CSS variables
2. Unified deep selector syntax
3. New @supports rule support

/* Using CSS variables */  
:root {  
  --theme-color: #007aff;  
}  

.button {  
  color: var(--theme-color);  
}  

/* Deep selector */  
::v-deep(.custom-class) {  
  color: red;  
}  

Expanded Native Capabilities

Numerous new native APIs:

1. Bluetooth 5.0 support
2. NFC read/write capabilities
3. Enhanced camera controls

// Using NFC API  
uni.startNFCDiscovery({  
  success: (res) => {  
    console.log('NFC tag detected')  
  }  
})  

Cloud Development Integration

Deep integration with uniCloud:

1. Direct database access from frontend
2. Local debugging for cloud functions
3. Automatic API client generation

// Directly operate cloud database  
const db = uniCloud.database()  
db.collection('articles').get()  
  .then(res => console.log(res))