Vue3 选项式 API

Vue 3 选项式 API

Vue 3 引入了 组合式 API（Composition API），但是它仍然保留了经典的 选项式 API（Options API）。选项式 API 是 Vue 2 中的传统开发方式，适合于较小和中等规模的项目。它通过在 Vue 实例中定义不同的选项来组织代码。

在 Vue 3 中，你可以继续使用选项式 API，同时还可以结合使用组合式 API。下面是选项式 API 的核心概念和常用功能。

1. Vue 实例

在 Vue 3 中，创建 Vue 实例的方式仍然通过 createApp() 方法，但它遵循选项式 API 的结构。主要的选项包括 data、methods、computed、watch、components 等。

示例：

import { createApp } from 'vue'
import App from './App.vue'

createApp(App).mount('#app')

2. `data` 选项

data 选项用于定义组件的数据，它返回一个对象，组件的所有状态都应保存在这个对象中。

示例：

export default {
  data() {
    return {
      message: 'Hello, Vue 3!',
      count: 0
    }
  }
}

data() 必须返回一个对象，包含组件的响应式数据。

3. `methods` 选项

methods 选项用于定义组件的方法。这些方法可以在模板中直接绑定，也可以在 JavaScript 中调用。

示例：

export default {
  data() {
    return {
      count: 0
    }
  },
  methods: {
    increment() {
      this.count++
    },
    decrement() {
      this.count--
    }
  }
}

methods 中的方法可以直接在模板中调用，例如：@click="increment"。

4. `computed` 选项

computed 选项用于定义计算属性。计算属性会基于依赖的数据进行缓存，只有依赖的数据发生变化时，计算属性才会重新计算。

示例：

export default {
  data() {
    return {
      firstName: 'John',
      lastName: 'Doe'
    }
  },
  computed: {
    fullName() {
      return `${this.firstName} ${this.lastName}`
    }
  }
}

computed 中的属性会被缓存，只有相关的依赖发生变化时，它才会重新计算。

5. `watch` 选项

watch 选项用于观察数据的变化并执行相应的回调函数。它允许你在数据变化时进行副作用操作，例如发送 API 请求或更新外部状态。

示例：

export default {
  data() {
    return {
      count: 0
    }
  },
  watch: {
    count(newCount, oldCount) {
      console.log(`Count changed from ${oldCount} to ${newCount}`)
    }
  }
}

watch 允许你监听特定数据的变化，并在数据变化时触发自定义的回调函数。

6. 生命周期钩子

Vue 3 保留了 Vue 2 中的生命周期钩子，生命周期钩子允许你在特定的生命周期阶段执行特定操作。以下是 Vue 3 中常用的生命周期钩子：

created：组件实例创建后执行，但还未挂载 DOM。
mounted：组件挂载到 DOM 后执行。
updated：组件更新后执行。
destroyed：组件销毁时执行。

示例：

export default {
  data() {
    return {
      message: 'Hello!'
    }
  },
  created() {
    console.log('Component has been created')
  },
  mounted() {
    console.log('Component has been mounted')
  },
  updated() {
    console.log('Component has been updated')
  },
  destroyed() {
    console.log('Component has been destroyed')
  }
}

这些生命周期钩子在组件的不同生命周期阶段触发，用于执行各种初始化、清理或更新操作。

7. `components` 选项

components 选项用于注册子组件，使得父组件能够使用这些子组件。

示例：

import MyComponent from './MyComponent.vue'

export default {
  components: {
    MyComponent
  },
  template: `
    <div>
      <MyComponent />
    </div>
  `
}

components 选项用于在当前组件中注册子组件，子组件可以在模板中直接引用。

8. `props` 选项

props 选项用于接收来自父组件的属性。它允许父组件向子组件传递数据。

示例：

export default {
  props: {
    title: {
      type: String,
      required: true
    }
  },
  template: `
    <div>
      <h1>{{ title }}</h1>
    </div>
  `
}

props 是组件用于接收外部数据的一种方式，父组件通过属性传递数据给子组件。

9. `emits` 选项

emits 选项用于声明一个组件可能发出的事件。这是一种更明确的方式来定义组件的事件，使得代码更加清晰。

示例：

export default {
  emits: ['increment'],
  methods: {
    incrementCount() {
      this.$emit('increment')
    }
  }
}

emits 用来声明组件可以触发的事件，避免未声明事件时可能出现的警告。

10. `directives` 选项

directives 选项用于注册自定义指令。Vue 支持全局和局部注册自定义指令。

示例：

export default {
  directives: {
    focus: {
      mounted(el) {
        el.focus()
      }
    }
  }
}

在 directives 中注册指令，focus 是一个自定义指令，用来给元素添加 focus() 功能。

总结

选项式 API 是 Vue 3 的经典开发方式，适合于不需要使用复杂逻辑的应用。它通过一组选项来组织组件的各个部分：

data：组件的数据。
methods：组件的方法。
computed：计算属性。
watch：观察属性变化。
生命周期钩子：如 created、mounted 等。
components：子组件的注册。
props 和 emits：用于传递数据和事件。
directives：自定义指令。

这种结构清晰、直观，适合快速开发和简单的应用逻辑。通过选项式 API，你可以很容易地组织和管理 Vue 组件中的各个部分。