Vue 3中的选项式API与组合式API对比详解

Vue 3不仅带来了性能的提升，还引入了一个新的组合式API，旨在解决选项式API在复杂组件中遇到的问题。下面，我们将通过具体示例，对比和分析两种API的使用差异，并探讨组合式API的设计理念。

数据声明

选项式API

在选项式API中，我们通过data来声明组件的响应式状态。

<script>
export default {
  data() {
    return {
      count: 0
    };
  }
};
</script>

选项式API通过一个集中的data函数返回所有状态，便于快速查找和管理。

组合式API

组合式API利用ref或reactive来声明响应式状态。

<script setup>
import { ref } from 'vue';

const count = ref(0);
</script>

在组合式API中，<script setup>提供了一种更简洁的方式来定义组件的逻辑。通过ref或reactive，我们可以将状态的声明更紧密地关联到它们被使用的地方，这使得逻辑更加模块化和可重用。

方法

选项式API

选项式API中，方法被定义在methods选项内。

<script>
export default {
  methods: {
    increment() {
      this.count++;
    }
  }
};
</script>

这种方式使得方法能够通过this访问组件的状态和其他方法，所有方法都被组织在一起。

组合式API

在组合式API中，方法被定义为局部函数。

<script setup>
const increment = () => {
  count.value++;
};
</script>

使用组合式API时，方法可以直接定义在<script setup>中，更接近原生JavaScript的函数定义，这样做提高了函数的可测试性和可重用性。通过减少对this的依赖，方法的独立性得到加强，也便于与其他逻辑片段共享。

计算属性

选项式API

选项式API中，计算属性被定义在computed选项里。

<script>
export default {
  data() {
    return {
      firstName: 'John',
      lastName: 'Doe'
    };
  },
  computed: {
    fullName() {
      return `${this.firstName} ${this.lastName}`;
    }
  }
};
</script>

通过定义在computed中，Vue为每个计算属性创建了一个响应式的getter，使得它们在依赖变更时自动更新。

组合式API

在组合式API中，计算属性通过computed函数创建。

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

const firstName = ref('John');
const lastName = ref('Doe');
const fullName = computed(() => `${firstName.value} ${lastName.value}`);
</script>

这里，computed函数使得定义计算属性更加直观，也更容易控制依赖。组合式API允许开发者在逻辑相关的代码附近声明计算属性，提高了代码的可读性。

侦听器

选项式API

选项式API中使用watch选项。

<script>
export default {
  watch: {
    count(newValue) {
      console.log(`count变化了，现在是${newValue}`);
    }
  }
};
</script>

watch选项允许我们定义一个侦听器，当指定的数据变化时执行回调。

组合式API

组合式API中使用watch函数。

<script setup>
import { watch } from 'vue';

watch(count, (newValue) => {
  console.log(`count变化了，现在是${newValue}`);
});
</script>

与选项式API不同，watch函数在组合式API中被定义为顶级的API，这使得它更易于从组件逻辑中分离和重用。watch函数的使用提供了更多控制，并且由于是基于函数的，它可以很容易地组合其他响应式状态和逻辑。

生命周期钩子

选项式API

选项式API直接将生命周期钩子作为组件选项。

<script>
export default {
  mounted() {
    console.log('组件挂载完成');
  }
};
</script>

生命周期钩子作为选项，易于识别，但是在处理多个钩子时，代码会分散到不同位置。

组合式API

组合式API中使用特定的钩子函数。

<script setup>
import { onMounted } from 'vue';

onMounted(() => {
  console.log('组件挂载完成');
});
</script>

在组合式API中，生命周期钩子被作为函数导入，这样不仅代码更加一致，也更容易将相关的生命周期钩子和逻辑组织在一起，有助于提升代码的清晰度和模块性。