Vue 3 引入了 Composition API,它提供了一种更灵活的方式来组织和重用逻辑。与 Vue 2 的 Options API 相比,Composition API 允许你将组件的逻辑按功能组织到函数中,而不是将它们分散到组件选项对象中。以下是如何在 Vue 3 中使用 Composition API 的基本步骤:
1. 引入必要的函数
首先,你需要从 vue 包中引入 ref、reactive、computed、watch、watchEffect 等 Composition API 提供的函数。这些函数允许你创建响应式状态、计算属性和侦听器。
javascript复制代码
|---|----------------------------------------------------------------------|
|   | import { ref, reactive, computed, watch, watchEffect } from 'vue'; |
2. 使用 setup 函数
setup 函数是 Composition API 的入口点。它是组件中所有 Composition API 调用的地方。setup 函数在组件创建之前被调用,并且它会在 beforeCreate 和 created 生命周期钩子之前执行。
javascript复制代码
|---|----------------------------------|
|   | export default {               |
|   | setup() {                      |
|   | // 你的 Composition API 代码将放在这里  |
|   | }                              |
|   | };                             |
3. 创建响应式状态
使用 ref 或 reactive 来创建响应式状态。ref 用于基本数据类型,而 reactive 用于对象或数组。
javascript复制代码
|---|------------------------------|
|   | const count = ref(0);      |
|   | const person = reactive({  |
|   | name: 'Alice',             |
|   | age: 30                    |
|   | });                        |
4. 使用计算属性和侦听器
你可以使用 computed 来创建计算属性,使用 watch 或 watchEffect 来侦听响应式状态的变化。
javascript复制代码
|---|--------------------------------------------------------------------|
|   | const doubleCount = computed(() => count.value * 2);             |
|   |                                                                    |
|   | watchEffect(() => {                                              |
|   | console.log(`Count is: ${count.value}`);                       |
|   | });                                                              |
|   |                                                                    |
|   | watch(count, (newValue, oldValue) => {                           |
|   | console.log(`Count changed from ${oldValue} to ${newValue}`);  |
|   | });                                                              |
5. 暴露给模板
setup 函数需要返回所有需要在模板中使用的响应式状态、计算属性、方法等。
javascript复制代码
|---|------------------------------|
|   | export default {           |
|   | setup() {                  |
|   | const count = ref(0);      |
|   | const increment = () => {  |
|   | count.value++;             |
|   | };                         |
|   |                              |
|   | return {                   |
|   | count,                     |
|   | increment                  |
|   | };                         |
|   | }                          |
|   | };                         |
6. 在模板中使用
现在,你可以在模板中像使用其他组件选项一样使用 count 和 increment。
html复制代码
|---|--------------------------------------------------|
|   | <template>                                     |
|   | <div>                                          |
|   | <p>{``{ count }}</p>                           |
|   | <button @click="increment">Increment</button>  |
|   | </div>                                         |
|   | </template>                                    |
7. 使用生命周期钩子
Composition API 提供了与 Options API 相同的生命周期钩子,但你需要从 vue 中显式导入它们,并在 setup 函数中使用。
javascript复制代码
|---|--------------------------------------------------|
|   | import { onMounted, onUnmounted } from 'vue';  |
|   |                                                  |
|   | export default {                               |
|   | setup() {                                      |
|   | onMounted(() => {                              |
|   | console.log('Component is mounted!');          |
|   | });                                            |
|   |                                                  |
|   | onUnmounted(() => {                            |
|   | console.log('Component is unmounted!');        |
|   | });                                            |
|   |                                                  |
|   | // ... 其他 Composition API 代码                   |
|   | }                                              |
|   | };                                             |
8. 组件间的通信
Composition API 并没有改变 Vue 的组件间通信方式(如 props、emit、provide/inject、Vuex、Vue Router 等)。但是,你可以将逻辑封装在自定义的 Composition API 函数中,并在多个组件之间重用这些函数,从而实现更高效的代码复用。
通过遵循这些步骤,你可以开始在你的 Vue 3 项目中使用 Composition API 来构建更灵活、更可维护的组件。