一、选项式API（Option API）
选项式API是Vue 2版本引入的一种API，使得组件可以接收一组选项（属性或配置），并进行相应的响应式处理和运行时校验。它是Vue 2版本最常用的API之一。
选项式API可以帮助我们在组件中定义数据、计算属性、方法、生命周期钩子等，并进行校验和默认值的设置。在模板中使用这些选项的值可以帮助我们实现动态的数据展示。
在下面的示例中，我们可以看到如何使用选项式API在Vue组件中定义数据和计算属性，并在模板中使用它们：
<template>
<div>
<p>Counter: {{ counter }}</p>
<p>Double Counter: {{ doubleCounter }}</p>
<button @click="increment">Increment</button>
</div>
</template>
<script>
export default {
data() {
return {
counter: 0
}
},
computed: {
doubleCounter() {
return this.counter * 2
}
},
methods: {
increment() {
this.counter++
}
}
}
</script>
在上面的示例中，我们使用了选项式API定义了一个名为“counter”的数据属性、一个名为“doubleCounter”的计算属性和一个名为“increment”的方法。在模板中，我们使用了这些选项的值展示了一个计数器和该计数器的两倍。
二、组合式API（Composition API）
组合式API是Vue 3版本引入的一种API，它是选项式API的补充，使得组件的逻辑代码可以更加清晰、模块化和可重用。它提供了一组功能类似于React Hooks的API，可以让我们把相关的逻辑状态和行为组织在一起，并分割成更小的、可重用的部分。
下面是一个简单的使用组合式API编写的Vue组件示例：
<template>
<div>
<p>Counter: {{ counter }}</p>
<button @click="increment">Increment</button>
</div>
</template>
<script>
import { reactive, computed } from 'vue'
function useCounter() {
const state = reactive({
count: 0
})
const increment = () => {
state.count++
}
const doubleCount = computed(() => {
return state.count * 2
})
return { state, increment, doubleCount }
}
export default {
setup() {
const { state, increment, doubleCount } = useCounter()
return { counter: state.count, increment, doubleCounter: doubleCount }
}
}
</script>
在上面的示例中，我们使用了组合式API编写了一个名为“useCounter”的自定义钩子，并在Vue组件中使用它。
在“useCounter”钩子中，我们使用了“reactive”函数创建了一个响应式数据对象，定义了一个名为“increment”的方法，并使用了“computed”函数创建了一个计算属性。
在Vue组件中，我们使用了“setup”函数引用了“useCounter”钩子，并返回了一个对象，包含了“counter”、“increment”和“doubleCounter”这三个属性，它们分别对应着“state.count”、“increment”和“doubleCount”。
三、选项式API和组合式API的异同
选项式API和组合式API都是Vue提供的API，但它们以不同的方式处理和组织组件的数据属性、计算属性、方法、生命周期钩子等。
选项式API是Vue 2版本中使用的API，它是一种接收一组选项的方式，使得组件可以进行响应式处理和运行时校验。它适用于小型组件或单文件组件，通过设置不同的选项可以定义组件的数据、计算属性、方法、生命周期钩子等。选项式API的使用比较简单，可以很容易地在Vue组件中使用。
组合式API是Vue 3版本中引入的API，其设计灵感来自于React Hooks，它提供了一组功能类似的API，使得组件可以更加清晰、模块化和可重用。它适用于中大型组件和复杂的业务场景，可以通过自定义钩子将相关的逻辑状态和行为组织在一起，并分割成更小的、可重用的部分。组合式API需要使用“setup”函数来引用自定义钩子，并返回一个对象，包含了需要在组件中使用的属性和方法。
选项式API和组合式API都是Vue的重要API，它们各有优点和适用场景，可以根据业务场景和项目需求选择使用其中之一或两者相结合。
四、总结
选项式API和组合式API都是Vue提供的API，用于组件的数据属性、计算属性、方法、生命周期钩子等的定义和分配。它们各有特点和适用场景，可以根据项目需求和业务场景选择使用。选项式API适用于小型组件或单文件组件，使用简单；组合式API适用于中大型组件或复杂的业务场景，可以更好地组织和管理组件的相关逻辑状态和行为。
原创文章，作者：YFYE，如若转载，请注明出处：https://www.506064.com/n/150138.html
微信扫一扫 
支付宝扫一扫 