组合式 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,};},};