Vue3新特性Composition?API實戰(zhàn)指南

更新時間：2025年07月03日 09:40:35 作者：天天進(jìn)步2015

Vue3的發(fā)布標(biāo)志著這個流行前端框架的重大升級,其中最引人注目的變化是引入了Composition?API,本文將深入探討Vue3的新特性,特別是Composition?API的實際應(yīng)用,幫助開發(fā)者掌握這一強(qiáng)大工具,需要的朋友可以參考下

前言

Vue3的發(fā)布標(biāo)志著這個流行前端框架的重大升級。其中最引人注目的變化是引入了Composition API，它為開發(fā)者提供了一種全新的組織組件邏輯的方式。本文將深入探討Vue3的新特性，特別是Composition API的實際應(yīng)用，幫助開發(fā)者掌握這一強(qiáng)大工具。

Vue3核心新特性概覽

Vue3相比Vue2有許多顯著的改進(jìn)：

性能提升：重寫虛擬DOM實現(xiàn)，渲染速度提升1.3~2倍，內(nèi)存占用減少一半
Tree-shaking支持：更好的打包優(yōu)化，減小應(yīng)用體積
Composition API：全新的邏輯組織和復(fù)用方式
Teleport組件：可以將內(nèi)容渲染到DOM樹的任何位置
Fragments：組件可以有多個根節(jié)點
Suspense：處理異步組件的新方式
TypeScript支持：更完善的類型推斷
自定義渲染器API：更容易創(chuàng)建自定義渲染器

Composition API基礎(chǔ)

Composition API是Vue3最重要的特性之一，它提供了一種新的組織組件邏輯的方式。

基本結(jié)構(gòu)

<script setup>
import { ref, computed, onMounted } from 'vue'

// 響應(yīng)式狀態(tài)
const count = ref(0)

// 計算屬性
const doubleCount = computed(() => count.value * 2)

// 方法
function increment() {
  count.value++
}

// 生命周期鉤子
onMounted(() => {
  console.log('組件已掛載')
})
</script>

<template>
  <div>
    <p>計數(shù): {{ count }}</p>
    <p>雙倍計數(shù): {{ doubleCount }}</p>
    <button @click="increment">增加</button>
  </div>
</template>

<script setup>語法

Vue3.2引入的<script setup>是使用Composition API的推薦方式，它具有以下優(yōu)勢：

更少的樣板代碼
變量和函數(shù)直接在模板中可用
更好的運行時性能
更好的IDE類型推斷

對比Options API與Composition API

Options API（Vue2的主要方式）

export default {
  data() {
    return {
      count: 0
    }
  },
  computed: {
    doubleCount() {
      return this.count * 2
    }
  },
  methods: {
    increment() {
      this.count++
    }
  },
  mounted() {
    console.log('組件已掛載')
  }
}

Composition API（Vue3推薦方式）

import { ref, computed, onMounted } from 'vue'

export default {
  setup() {
    const count = ref(0)
    
    const doubleCount = computed(() => count.value * 2)
    
    function increment() {
      count.value++
    }
    
    onMounted(() => {
      console.log('組件已掛載')
    })
    
    return {
      count,
      doubleCount,
      increment
    }
  }
}

主要區(qū)別與優(yōu)勢

邏輯組織：Composition API按照邏輯關(guān)注點組織代碼，而非選項類型
邏輯復(fù)用：更容易提取和復(fù)用邏輯，沒有this的困擾
類型推斷：對TypeScript更友好
打包優(yōu)化：更好的Tree-shaking支持，減小應(yīng)用體積

響應(yīng)式系統(tǒng)

Vue3的響應(yīng)式系統(tǒng)是完全重寫的，基于ES6的Proxy：

核心響應(yīng)式API

ref：處理基本類型的響應(yīng)式數(shù)據(jù)
reactive：處理對象類型的響應(yīng)式數(shù)據(jù)
computed：創(chuàng)建計算屬性
watch/watchEffect：監(jiān)聽數(shù)據(jù)變化

import { ref, reactive, computed, watch, watchEffect } from 'vue'

// 基本類型的響應(yīng)式
const count = ref(0)
console.log(count.value) // 訪問值需要.value

// 對象類型的響應(yīng)式
const state = reactive({
  name: '張三',
  age: 25
})
console.log(state.name) // 直接訪問屬性

// 計算屬性
const doubleCount = computed(() => count.value * 2)

// 監(jiān)聽特定數(shù)據(jù)
watch(count, (newValue, oldValue) => {
  console.log(`count從${oldValue}變?yōu)?{newValue}`)
})

// 自動追蹤依賴
watchEffect(() => {
  console.log(`count: ${count.value}, name: ${state.name}`)
})

ref vs reactive

	ref	reactive
適用類型	任何類型	僅對象類型
訪問方式	.value（模板中自動解包）	直接訪問屬性
解構(gòu)行為	保持響應(yīng)性	失去響應(yīng)性（需使用toRefs）
使用場景	簡單值或需要解構(gòu)時	復(fù)雜對象且不需解構(gòu)時

生命周期鉤子

Composition API提供了一套新的生命周期鉤子：

Options API	Composition API
beforeCreate	setup()
created	setup()
beforeMount	onBeforeMount
mounted	onMounted
beforeUpdate	onBeforeUpdate
updated	onUpdated
beforeUnmount	onBeforeUnmount
unmounted	onUnmounted
errorCaptured	onErrorCaptured

import { onMounted, onBeforeUnmount } from 'vue'

export default {
  setup() {
    onMounted(() => {
      console.log('組件已掛載')
    })
    
    onBeforeUnmount(() => {
      console.log('組件即將卸載')
    })
  }
}

組合式函數(shù)（Composables）

Composition API最強(qiáng)大的特性之一是能夠輕松創(chuàng)建和使用可復(fù)用的組合式函數(shù)（Composables）。

創(chuàng)建一個組合式函數(shù)

// useCounter.js
import { ref, computed } from 'vue'

export function useCounter(initialValue = 0) {
  const count = ref(initialValue)
  const doubleCount = computed(() => count.value * 2)
  
  function increment() {
    count.value++
  }
  
  function decrement() {
    count.value--
  }
  
  return {
    count,
    doubleCount,
    increment,
    decrement
  }
}

使用組合式函數(shù)

<script setup>
import { useCounter } from './composables/useCounter'

const { count, doubleCount, increment, decrement } = useCounter(10)
</script>

<template>
  <div>
    <p>計數(shù): {{ count }}</p>
    <p>雙倍計數(shù): {{ doubleCount }}</p>
    <button @click="increment">增加</button>
    <button @click="decrement">減少</button>
  </div>
</template>

常用組合式函數(shù)示例

1. 使用鼠標(biāo)位置

// useMouse.js
import { ref, onMounted, onUnmounted } from 'vue'

export function useMouse() {
  const x = ref(0)
  const y = ref(0)
  
  function update(event) {
    x.value = event.pageX
    y.value = event.pageY
  }
  
  onMounted(() => window.addEventListener('mousemove', update))
  onUnmounted(() => window.removeEventListener('mousemove', update))
  
  return { x, y }
}

2. 使用本地存儲

// useLocalStorage.js
import { ref, watch } from 'vue'

export function useLocalStorage(key, defaultValue) {
  const value = ref(JSON.parse(localStorage.getItem(key)) || defaultValue)
  
  watch(value, val => {
    localStorage.setItem(key, JSON.stringify(val))
  })
  
  return value
}

實戰(zhàn)案例：待辦事項應(yīng)用

下面是一個使用Composition API構(gòu)建的簡單待辦事項應(yīng)用：

<script setup>
import { ref, computed } from 'vue'
import { useLocalStorage } from './composables/useLocalStorage'

// 使用本地存儲保存待辦事項
const todos = useLocalStorage('todos', [])
const newTodo = ref('')

// 計算屬性：未完成的待辦事項數(shù)量
const remaining = computed(() => {
  return todos.value.filter(todo => !todo.completed).length
})

// 添加待辦事項
function addTodo() {
  if (newTodo.value.trim()) {
    todos.value.push({
      id: Date.now(),
      text: newTodo.value,
      completed: false
    })
    newTodo.value = ''
  }
}

// 刪除待辦事項
function removeTodo(id) {
  todos.value = todos.value.filter(todo => todo.id !== id)
}

// 切換待辦事項完成狀態(tài)
function toggleTodo(id) {
  const todo = todos.value.find(todo => todo.id === id)
  if (todo) {
    todo.completed = !todo.completed
  }
}
</script>

<template>
  <div class="todo-app">
    <h1>待辦事項列表</h1>
    
    <!-- 添加待辦事項 -->
    <div class="add-todo">
      <input 
        v-model="newTodo" 
        @keyup.enter="addTodo"
        placeholder="添加新的待辦事項" 
      />
      <button @click="addTodo">添加</button>
    </div>
    
    <!-- 待辦事項列表 -->
    <ul class="todo-list">
      <li v-for="todo in todos" :key="todo.id" :class="{ completed: todo.completed }">
        <input 
          type="checkbox" 
          :checked="todo.completed" 
          @change="toggleTodo(todo.id)" 
        />
        <span>{{ todo.text }}</span>
        <button @click="removeTodo(todo.id)">刪除</button>
      </li>
    </ul>
    
    <!-- 底部狀態(tài) -->
    <div class="todo-footer" v-if="todos.length">
      <span>{{ remaining }} 項待完成</span>
    </div>
  </div>
</template>

<style scoped>
.todo-app {
  max-width: 500px;
  margin: 0 auto;
  padding: 20px;
  font-family: Arial, sans-serif;
}

.add-todo {
  display: flex;
  margin-bottom: 20px;
}

.add-todo input {
  flex-grow: 1;
  padding: 8px;
  border: 1px solid #ddd;
  border-radius: 4px 0 0 4px;
}

.add-todo button {
  padding: 8px 16px;
  background-color: #4CAF50;
  color: white;
  border: none;
  border-radius: 0 4px 4px 0;
  cursor: pointer;
}

.todo-list {
  list-style: none;
  padding: 0;
}

.todo-list li {
  display: flex;
  align-items: center;
  padding: 10px;
  border-bottom: 1px solid #eee;
}

.todo-list li.completed span {
  text-decoration: line-through;
  color: #999;
}

.todo-list li span {
  flex-grow: 1;
  margin: 0 15px;
}

.todo-list li button {
  background-color: #f44336;
  color: white;
  border: none;
  padding: 5px 10px;
  border-radius: 4px;
  cursor: pointer;
}

.todo-footer {
  margin-top: 20px;
  color: #666;
}
</style>

性能優(yōu)化最佳實踐

使用Composition API時，需要注意一些性能優(yōu)化的最佳實踐：

1. 避免不必要的響應(yīng)式轉(zhuǎn)換

// 不好的做法：創(chuàng)建不需要響應(yīng)式的大型數(shù)據(jù)
const data = reactive(hugeData)

// 好的做法：僅對需要響應(yīng)式的數(shù)據(jù)使用reactive或ref
const data = hugeData  // 普通對象
const reactiveState = reactive({ count: 0 })  // 只對需要響應(yīng)式的狀態(tài)使用reactive

2. 使用shallowRef和shallowReactive

對于大型對象，如果只需要跟蹤頂層屬性的變化：

import { shallowRef, shallowReactive } from 'vue'

// 只有.value的變更是響應(yīng)式的，而不會深度追蹤
const state = shallowRef({ count: 0 })

// 只有頂層屬性的變更是響應(yīng)式的
const user = shallowReactive({
  name: '張三',
  address: { city: '北京' } // 修改city不會觸發(fā)更新
})

3. 使用v-once和v-memo

<!-- 只渲染一次 -->
<div v-once>{{ expensiveComputation() }}</div>

<!-- 依賴項變化時才重新渲染 -->
<div v-memo="[item.id]">{{ item.name }}</div>

4. 合理使用計算屬性緩存

// 不好的做法：在方法中計算
function getFilteredItems() {
  return items.value.filter(item => item.price > 100)
}

// 好的做法：使用計算屬性
const filteredItems = computed(() => {
  return items.value.filter(item => item.price > 100)
})