【Vue】Vue（九）OptionsAPI与CompositionAPI的区别

OptionsAPI与CompositionAPI在代码使用和逻辑上的区别

一、代码使用方面的区别

（一）组件定义的结构

• OptionsAPI
  • 以对象字面量的形式定义组件，对象包含多个属性，每个属性对应不同的功能。例如：

  export default {data() {return {message: 'Hello, OptionsAPI'};},methods: {sayHello() {console.log(this.message);}},mounted() {this.sayHello();}
  };
  

  • 这里data、methods、mounted等属性分别定义了组件的数据、方法和生命周期钩子等内容，它们在一个大的对象结构下相互独立存在。
• CompositionAPI
  • 使用setup函数作为组件逻辑的入口点，在函数内部定义各种逻辑并返回供模板使用的值。例如：

  import { ref } from 'vue';export default {setup() {const message = ref('Hello, CompositionAPI');const sayHello = () => {console.log(message.value);};sayHello();return {message,sayHello};}
  };
  

  • 在setup函数中，将响应式数据（如ref创建的数据）、方法等逻辑紧凑地组合在一起，然后通过返回值将需要在模板中使用的数据和方法暴露出去。

（二）响应式数据的定义与使用

• OptionsAPI
  • 在data函数中定义响应式数据。例如：

  export default {data() {return {count: 0};},methods: {increment() {this.count++;}}
  };
  

  • 响应式数据通过this关键字在methods、watch等其他属性中访问和修改。这里的this指向组件实例，这种方式在多层嵌套函数或回调函数中使用时可能会出现this指向混淆的问题。
• CompositionAPI
  • 使用ref或reactive函数来定义响应式数据。
  • 例如使用ref：

  import { ref } from 'vue';
  export default {setup() {const count = ref(0);const increment = () => {count.value++;};return {count,increment};}
  };
  

  • 或者使用reactive（用于创建对象类型的响应式数据）：

  import { reactive } from 'vue';
  export default {setup() {const state = reactive({count: 0});const increment = () => {state.count++;};return {state,increment};};
  };
  

  • 响应式数据通过value属性（ref类型）或者直接操作对象属性（reactive类型）来进行访问和修改，避免了this指向问题。

（三）逻辑复用的实现方式

• OptionsAPI
  • 主要通过mixins来实现逻辑复用。例如，创建一个mixin对象：

  const myMixin = {data() {return {sharedData: 'This is shared data'};},methods: {sharedMethod() {console.log('This is a shared method');}}
  };export default {mixins: [myMixin],// 组件自身的其他逻辑data() {return {componentData: 'This is component - specific data'};},mounted() {this.sharedMethod();}
  };
  

  • 但是mixins存在一些问题，如可能导致命名冲突（如果多个mixins中有相同名称的属性或方法），并且在组件中使用时，难以追踪某个属性或方法的来源。
• CompositionAPI
  • 通过自定义组合函数来实现逻辑复用。例如：

  import { ref } from 'vue';const useCounter = () => {const count = ref(0);const increment = () => {count.value++;};return {count,increment};
  };export default {setup() {const { count, increment } = useCounter();return {count,increment};}
  };
  

  • 自定义组合函数可以在多个组件中复用，代码结构清晰，易于理解和维护。

二、逻辑方面的区别

（一）逻辑内聚性

• OptionsAPI
  • 相关逻辑分散在不同的选项属性中。例如，与一个数据相关的初始化逻辑可能在data中，对该数据的操作逻辑在methods中，数据变化的监听逻辑在watch中。这种分散的结构使得在处理复杂功能时，需要在多个属性之间切换来理解完整的逻辑流程。
• CompositionAPI
  • 在setup函数中可以将相关逻辑组合在一起。例如，对于一个计数器功能，可以在setup函数中同时定义响应式数据、操作数据的方法以及相关的生命周期钩子（如果需要），使得整个功能的逻辑更加内聚，便于理解和维护。

（二）对Type - Script的支持逻辑

• OptionsAPI
  • 在OptionsAPI中使用TypeScript时，需要为每个选项属性分别定义类型。例如，在data函数中定义的数据需要单独定义类型，methods中的方法也需要定义参数和返回值的类型等。这使得类型定义分散在整个组件定义中，代码结构相对复杂。
  • 如下是一个使用TypeScript的OptionsAPI示例：

  export default {data(): {message: string;} {return {message: 'Hello'};},methods: {sayHello(): void {console.log(this.message);}}
  };
  

• CompositionAPI
  • 由于以函数形式组织逻辑，在setup函数中可以更方便地进行整体的类型定义。可以对setup函数的输入参数和返回值进行类型定义，并且在自定义组合函数中也能很好地定义类型。这种方式与TypeScript的函数类型系统结合得更加紧密，代码的类型定义更加简洁清晰。
  • 例如：

  import { ref } from 'vue';const useCounter = (): {count: { value: number };increment: () => void;
  } => {const count = ref(0);const increment = () => {count.value++;};return {count,increment};
  };export default {setup(): {count: { value: number };increment: () => void;} {const { count, increment } = useCounter();return {count,increment};}
  };