vue3的选项式和组合式的区别

选项式和组合式是Vue.js 3中的两种创建组件的方式。

选项式是Vue.js 2中常用的方式，通过一个包含组件选项的对象来创建组件。例如：

Vue.component('my-component', {
  data() {
    return {
      message: 'Hello Vue!'
    }
  },
  template: '<div>{{ message }}</div>'
})

在Vue.js 3中，仍然支持选项式创建组件，但是建议使用组合式API。组合式API是一组新的函数，可以更灵活地组织组件代码。例如：

import { defineComponent, ref } from 'vue'

export default defineComponent({
  setup() {
    const message = ref('Hello Vue 3!')
    return {
      message
    }
  },
  template: '<div>{{ message }}</div>'
})

可以看出，组合式API使用了defineComponent函数来定义组件，使用setup函数来设置组件的状态和行为。

总的来说，选项式和组合式都可以用来创建组件，但是组合式API更加灵活和可维护。