UniApp开发中Vue组合式与选项式API对比指南

1. 两种开发范式概述

在UniApp开发中，组合式(Composition API)和选项式(Options API)是Vue框架提供的两种不同编码范式。这两种方式并非UniApp特有，而是源自Vue 3.x的核心特性，但在UniApp多端开发中同样适用且各有优势。

组合式API是Vue 3引入的新特性，它通过setup()函数将相关逻辑组织在一起，而不是像选项式API那样按照功能类型分散到不同的选项块中。这种方式的代码组织更加灵活，特别适合复杂组件的开发。

选项式API则是Vue 2.x的传统写法，也是大多数Vue开发者熟悉的模式。它将代码按照功能类型划分为不同的选项，如data、methods、computed等，结构清晰但逻辑分散。

2. 选项式API深度解析

2.1 基本结构与特点

选项式API的基本结构如下：

javascript复制export default {
  data() {
    return {
      count: 0
    }
  },
  methods: {
    increment() {
      this.count++
    }
  },
  computed: {
    doubleCount() {
      return this.count * 2
    }
  },
  watch: {
    count(newVal, oldVal) {
      console.log(`count changed from ${oldVal} to ${newVal}`)
    }
  }
}

这种写法的最大特点是按功能类型组织代码：

• 响应式数据声明在data中
• 方法定义在methods中
• 计算属性放在computed中
• 侦听器配置在watch中

2.2 适用场景与优势

选项式API特别适合以下场景：

1. 中小型项目开发，逻辑相对简单
2. 团队中成员Vue经验参差不齐，需要统一编码风格
3. 需要快速原型开发，减少学习成本
4. 维护已有的Vue 2.x项目

它的主要优势包括：

• 结构清晰，各司其职
• 学习曲线平缓，新手友好
• 与Vue 2.x完全兼容
• 调试工具支持完善

提示：在UniApp中使用选项式API时，生命周期钩子需要使用Vue 2.x的写法（如created、mounted），而不是Vue 3.x的setup语法。

3. 组合式API全面剖析

3.1 核心概念与基本用法

组合式API的核心是setup()函数，它是组合式组件的入口点。基本结构如下：

javascript复制import { ref, computed, watch } from 'vue'

export default {
  setup() {
    const count = ref(0)
    
    const doubleCount = computed(() => count.value * 2)
    
    function increment() {
      count.value++
    }
    
    watch(count, (newVal, oldVal)