能否分别用选项式API和组合式API来实现同一功能,给出两段代码,让我更好理解二者的区别
时间: 2024-02-28 09:54:13 浏览: 21
当然可以,下面是用选项式API和组合式API实现同一个计数器功能的代码示例:
选项式API实现计数器功能:
```html
<template>
<div>
<p>{{ count }}</p>
<button @click="increment">+</button>
</div>
</template>
<script>
export default {
data() {
return {
count: 0
}
},
methods: {
increment() {
this.count++
}
}
}
</script>
```
组合式API实现计数器功能:
```html
<template>
<div>
<<p>{{ count }}</p>
<button @click="increment">+</button>
</div>
</template>
<script>
import { reactive } from 'vue'
export default {
setup() {
const state = reactive({
count: 0
})
const increment = () => {
state.count++
}
return {
count: state.count,
increment
}
}
}
</script>
```
可以看到,选项式API中使用了data属性来定义组件的状态,使用methods属性来定义组件的方法。而组合式API中使用了reactive函数来定义响应式的状态,使用setup函数来定义组件的方法。组合式API将组件逻辑拆分成逻辑组合的小函数,使得组件逻辑更加清晰、易于维护。
需要注意的是,在组合式API中,我们需要通过返回一个对象来暴露组件的状态和方法,而在选项式API中,这些属性和方法则是作为组件实例的属性和方法来暴露的。