组合式 API 和选项式 API 是 Vue.js 提供的两种不同的 API。组合式 API 更加灵活，在处理复杂场景时更有效，而选项式 API 则更易于入门和使用，适合处理简单的场景。下面是组合式 API 和选项式 API 的一个比较：
组合式 API
<template> <div> <p>{{ title }}</p> <button @click="increaseCount">点击按钮 +1</button> <p>当前计数: {{ count }}</p> </div> </template> <script> import { reactive, computed, watch } from 'vue'; export default { setup() { const data = reactive({ title: '使用组合式 API', count: 0, }); const increaseCount = () => { data.count++; }; const doubleCount = computed(() => { return data.count * 2; }); watch( () => data.count, (newCount, oldCount) => { console.log(`计数从 ${oldCount} 变为 ${newCount}`); } ); return { title: data.title, count: data.count, increaseCount, doubleCount, }; }, }; </script>
选项式 API
<template> <div> <p>{{ title }}</p> <button @click="increaseCount">点击按钮 +1</button> <p>当前计数: {{ count }}</p> </div> </template> <script> export default { data() { return { title: '使用选项式 API', count: 0, }; }, methods: { increaseCount() { this.count++; }, }, computed: { doubleCount() { return this.count * 2; }, }, watch: { count(newCount, oldCount) { console.log(`计数从 ${oldCount} 变为 ${newCount}`); }, }, }; </script>
