【Vue】Vue（九）OptionsAPI与CompositionAPI的区别
编程语言
2024-11-02 20:58:35
阅读次数: 0
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
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
};
}
};
转载自blog.csdn.net/qq_39666711/article/details/142925184