vue3（2）选项式API和组合式API的区别

2024-01-07 17:36:38

概念

选项式 API 是一种组织 Vue 组件代码的传统方式。在选项式 API 中，组件的代码被分为几个部分，包括 data、methods、computed、watch 等。每个部分都有自己的职责，例如 data 部分用于存储组件的数据，methods 部分用于定义组件的方法，computed 部分用于定义组件的计算属性，watch 部分用于监听组件数据的变化。

组合式 API 是 Vue3 中引入的新特性。组合式 API 允许开发者以更灵活的方式组织组件代码。在组合式 API 中，组件的代码被组织成一个个独立的函数，这些函数可以被组合起来创建组件。组合式 API 提供了更丰富的 API，允许开发者对组件进行更细粒度的控制。

语法

选项式 API 的语法相对简单。组件的代码被分为几个部分，每个部分都有自己的语法。例如，data 部分的语法是：

data() {
  return {
    message: 'Hello, world!'
  }
}

methods 部分的语法是：

methods: {
  greet() {
    console.log(this.message)
  }
}

computed 部分的语法是：

computed: {
  reversedMessage() {
    return this.message.split('').reverse().join('')
  }
}

watch 部分的语法是：

watch: {
  message(newValue, oldValue) {
    console.log(`Message changed from "${oldValue}" to "${newValue}"`)
  }
}

组合式 API 的语法相对复杂。组合式 API 的核心是 setup 函数。setup 函数接受两个参数：props 和 context。props 参数是组件的 props 对象，context 参数是一个包含了组件生命周期钩子、组件状态管理函数等信息的上下文对象。

setup 函数返回一个对象，该对象可以包含组件的 data、methods、computed 和 watch 属性。例如，以下代码演示了如何使用组合式 API 定义一个组件：

const MyComponent = {
  setup(props, context) {
    const message = ref('Hello, world!')

    const greet = () => {
      console.log(message.value)
    }

    const reversedMessage = computed(() => {
      return message.value.split('').reverse().join('')
    })

    watch(message, (newValue, oldValue) => {
      console.log(`Message changed from "${oldValue}" to "${newValue}"`)
    })

    return {
      message,
      greet,
      reversedMessage
    }
  }
}