Vue 的组件可以按两种不同的风格书写:选项式 API 和组合式 API。
vue2只支持选项式 API
vue3支持两种
选项式 API (Options API)
在 Vue 2 中引入并继续在 Vue 3 中支持的选项式 API,是一种通过声明式选项(如 data
, methods
, computed
, watch
, props
, lifecycle hooks
等)来组织组件逻辑的方式。
- 数据和方法: 通过
data
返回一个对象来定义组件的状态,通过methods
定义组件的方法。 - 计算属性和侦听器: 通过
computed
定义计算属性,通过watch
监听响应式数据的变化。 - 生命周期钩子: 如
created
,mounted
,updated
,destroyed
等,用于在组件的不同生命周期阶段执行代码。 - 模板: 使用声明式的 HTML-like 语法定义 UI
<template> <button @click="increment">Count is: {{ count }}</button>
//元素绑定了一个点击事件处理器 (@click
),当按钮被点击时,会调用increment
方法 </template> <script> export default { // data() 函数返回一个对象,该对象的属性是组件的状态,对象中的属性都是响应式的。这意味着,当这些属性的值改变时,Vue 会自动更新 DOM 以反映这些变化。名为count
的状态属性,初始值为0
data() { return { count: 0 } }, // methods 定义了组件的方法,定义了一个increment
方法,用于增加count
的值 methods: { increment() { this.count++ } }, // 生命周期钩子会在组件生命周期的各个不同阶段被调用,在这个例子中,当组件挂载完成后,mounted
钩子会执行,并打印初始的count
值到控制台 mounted() { console.log(`The initial count is ${this.count}.`) } } </script>
组合式 API (Composition API)
Vue 3 引入的组合式 API 提供了一种更灵活的方式来组织和重用组件逻辑。它主要围绕 setup
函数展开,这个函数在组件创建之前执行,是定义组件逻辑的地方。
- 响应式引用: 使用
ref
和reactive
定义响应式状态。 - 计算属性和侦听器: 使用
computed
和watch
,与选项式 API 类似,但用法更灵活。 - 生命周期钩子: 使用
onMounted
,onUpdated
,onUnmounted
等函数,这些与选项式 API 中的生命周期钩子等效,但用法不同。 - 逻辑重用和抽象: 可以将相关的逻辑组合在一起,易于重用和测试。通过自定义的“组合函数”(composition functions),你可以跨组件重用逻辑
使用 <script setup>
所有顶层的变量和函数都直接暴露给模板。这样,不需要在 setup
函数中返回它们
提高了代码的可读性,并减少了样板代码的数量
<template> <div>{{ fullName }}</div> </template> <script setup> import { ref, computed } from 'vue'; const firstName = ref('John'); const lastName = ref('Doe'); const fullName = computed(() => firstName.value + ' ' + lastName.value); </script>
使用常规 <script>
和 setup()
定义一个 setup()
函数,并在这个函数中返回所有需要在模板中使用的响应式数据和方法
这种方式更适用于需要结合 Composition API 和 Options API(如 data
, methods
, computed
, watch
)的场景
或者对于更大、更复杂的组件,使用传统的 setup()
函数可能会使代码更容易管理和维护
<template> <div>{{ fullName }}</div> </template> <script> import { ref, computed } from 'vue'; export default { setup() { const firstName = ref('John'); const lastName = ref('Doe'); const fullName = computed(() => firstName.value + ' ' + lastName.value); return { fullName }; } } </script>