“vue3” 共(1)篇
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中，生命周期钩子被作为函数导入，这样不仅代码更加一致，也更容易将相关的生命周期钩子和逻辑组织在一起，有助于提升代码的清晰度和模块性。
