Vue.js 组件编程风格剖析：从选项式 API 到组合式 API

2023-11-04 16:09:58

Vue.js 组件：选项式 API 与组合式 API 的抉择

简介

在 Vue.js 中，组件是构建交互式用户界面 (UI) 的基本构建块。它们可以封装可重用的 UI 元素，例如表单、按钮和导航栏，以创建更复杂和动态的应用程序。为了创建组件，Vue.js 提供了两种不同的 API：选项式 API 和组合式 API。本文将深入探讨这两种 API，比较它们的优缺点，并指导您根据项目需求做出明智的决策。

选项式 API

选项式 API 是 Vue.js 中的传统方法，采用声明式的编程风格。它允许您通过预定义的选项配置组件，包括：

template：定义组件的 HTML 结构。
data：返回组件的初始数据状态。
methods：包含用于处理组件交互的函数。
computed：提供基于组件数据的派生属性。

示例代码：

export default {
  template: '<div>Hello, world!</div>',
  data() {
    return {
      count: 0
    }
  },
  methods: {
    increment() {
      this.count++
    }
  },
  computed: {
    doubleCount() {
      return this.count * 2
    }
  }
}

组合式 API

组合式 API 是 Vue.js 3 中引入的一种函数式编程风格。它使用一系列函数来组合和重用组件逻辑，包括：

ref：创建可变引用。
reactive：将普通对象转换为响应式对象。
computed：计算依赖于响应式数据的派生属性。

示例代码：

import { ref, reactive, computed } from 'vue'

export default {
  setup() {
    const count = ref(0)

    const doubleCount = computed(() => count.value * 2)

    const increment = () => {
      count.value++
    }

    return {
      count,
      doubleCount,
      increment
    }
  }
}