Vue.js 3 组合式API完全指南

Vue.js 3 组合式API（Composition API）

Vue 3 引入的组合式API为我们提供了更灵活的代码组织方式。

什么是组合式API？

组合式API是一组基于函数的API，可以更灵活地组织组件逻辑。

基本用法

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

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

响应式数据

• ref() - 创建响应式引用
• reactive() - 创建响应式对象
• computed() - 计算属性
• watch() - 侦听器

生命周期钩子

import { onMounted, onUpdated, onUnmounted } from 'vue'

onMounted(() => {
  console.log('组件已挂载')
})

onUpdated(() => {
  console.log('组件已更新')
})

onUnmounted(() => {
  console.log('组件即将卸载')
})

组合式API让代码更易维护和复用！