Vue 3.x引入了一种新的API叫做Composition API,它允许我们更好地组织Vue代码。在Composition API中,组件的逻辑可以按照功能划分到不同的函数内部,而不是像以前那样,将所有代码都写在生命周期钩子中。
使用Composition API的好处包括:
- 逻辑更加清晰易懂。
- 减少代码重复和冗余。
- 便于代码测试和维护。
// 使用Composition API编写组件代码示例
import { reactive, computed } from "vue";
export default {
setup() {
const state = reactive({
count: 0,
doubled: computed(() => state.count * 2)
})
const increment = () => {
state.count++
}
return {
state,
increment
}
}
}
在上面的代码中,我们使用了reactive函数来创建一个响应式对象state,其中包含了一个计数器变量count和一个计算属性doubled,该属性用来计算count的2倍值。我们还编写了一个increment函数用于增加count的值。最后,在setup函数中,我们将state和increment函数返回。