Vue 3.x中的Composition API

2023-05-19 09:16:26

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函数返回。

  • 作者:
  • 原文链接:
    更新时间:2023-05-19 09:16:26