Vue面经27道API写法 1.选项式API和组合式API（重点讲选项式API） 1.1 选项式API（Options

API写法

1.选项式API和组合式API（重点讲选项式API）

1.1 选项式API（Options API）

1.1.1 选项式API的特性

选项式API示例：

1.1.2 选项式API的痛点：

如果一个组件中 有两个功能模块 需要实现，data和methods，computed 中都有这两个模块的功能代码， 则维护起来比较吃力

1.2 组合式API（Composition API）

1.2.1 组合式API的基本结构

export default {
  // 1. 基本信息
  name: 'ComponentName',
  components: { /* 子组件 */ },
  mixins: [ /* 混入 */ ],
  extends: BaseComponent,
  
  // 2. 数据相关
  data() { return {} },
  computed: { /* 计算属性 */ },
  watch: { /* 监听器 */ },
  
  // 3. 方法
  methods: { /* 方法 */ },
  
  // 4. 生命周期钩子
  beforeCreate() {},
  created() {},
  beforeMount() {},
  mounted() {},
  beforeUpdate() {},
  updated() {},
  beforeUnmount() {},  // Vue3
  unmounted() {},      // Vue3
  
  // 5. 其他选项
  props: { /* 属性 */ },
  emits: { /* 事件 */ },
  provide() { return {} },
  inject: [],
  directives: { /* 自定义指令 */ }
}