组合式 API 和选项式 API的区别

一、区别

设计思想：options API 偏向于填充式，规定了方法应该写在那里，比如 methods，computed，watch 等，而 compositionAPI 更灵活

使用方式：compositionAPI 全部写在 setup（）中更灵活强大，optionsAPI 更加简明，适用于构建简单的组件

二、选项式API

Vue 2 中广泛使用的选项式 API 

1、组成

• data：用于定义组件的数据。
• methods：定义组件的方法。
• computed：定义计算属性。
• watch：用于监听数据变化。
• mounted等生命周期钩子：在特定的组件生命周期阶段执行代码。

2、实例代码

   export default {
     data() {
       return {
         message: 'Hello World',
       };
     },
     methods: {
       updateMessage() {
         this.message = 'New Message';
       },
     },
     computed: {
       reversedMessage() {
         return this.message.split('').reverse().join('');
       },
     },
     mounted() {
       console.log('Component mounted.');
     },
   };

三、组合式API

Vue 3 引入的组合式 API 提供了一种更加灵活和可维护的方式来组织组件逻辑。

1、特点

• setup函数是入口点，在组件创建之前被调用。
• 使用ref和reactive创建响应式数据。
• 可以将相关的逻辑代码集中在一起，提高代码的可读性和可维护性。

2、实例代码

   import { ref, computed } from 'vue';

   export default {
     setup() {
       const message = ref('Hello World');
       const updateMessage = () => {
         message.value = 'New Message';
       };
       const reversedMessage = computed(() => message.value.split('').reverse().join(''));

       return {
         message,
         updateMessage,
         reversedMessage,
       };
     },
   };