vue3 组合式 api 单文件组件写法

1 Vue3 组合式 API 的基本原理和理念

1.1 Vue3 中的 Composition API

Vue3 中的 Composition API 是一种新的编写组件逻辑的方式，它提供了更好的代码组织、类型推导、测试支持和复用性。相比于 Vue2 的 Options API，Composition API 更加灵活和可扩展。

在 Composition API 中，我们使用 setup 函数来定义组件的逻辑部分。setup 函数是一个特殊的函数，在创建组件实例之前被调用，并且接收两个参数：props 和 context。props 是传入组件的属性集合，而 context 包含了一些与组件关联的方法和数据。

1.2 与 Vue2 Options API 的对比

与 Vue2 的 Options API 相比，Composition API 具有以下优势：

• 更好的代码组织：通过将相关逻辑放在同一个函数内部，可以更清晰地组织代码。
• 类型推导：由于 setup 函数是一个普通的 JavaScript 函数，因此可以更容易地获得类型推导的支持。
• 测试支持：由于逻辑被封装在独立的函数中，可以更方便地进行单元测试。
• 复用性：可以将逻辑抽象为自定义 Hook，并在多个组件中重用。

1.3 为什么选择使用组合式 API

使用组合式 API 可以带来以下好处：

• 更好的代码组织：将相关逻辑放在同一个函数内部，使代码更易于理解和维护。
• 更好的类型推导：由于 setup 函数是一个普通的 JavaScript 函数，可以获得更好的类型推导支持，减少错误。
• 更好的测试支持：逻辑被封装在独立的函数中，可以更方便地进行单元测试。
• 更高的复用性：可以将逻辑抽象为自定义 Hook，并在多个组件中重用。

使用组合式 API 可以提供更好的开发体验和代码质量，使得 Vue3 的开发更加灵活和可扩展。

2 安装和配置 Vue3

为了安装和配置 Vue3，您需要按照以下步骤进行操作：

2.1 引入 Vue3 的最新版本

首先，您需要在项目中引入 Vue3 的最新版本。可以通过使用 npm 或 yarn 来安装 Vue3。

如果使用 npm，请运行以下命令：

npm install vue@next

如果使用 yarn，请运行以下命令：

yarn add vue@next

这将会安装 Vue3 及其相关依赖项。

2.2 创建 Vue 应用程序的基本配置

一旦您安装了 Vue3，您可以开始创建 Vue 应用程序的基本配置。

在你的项目中创建一个新文件，例如main.js，并添加以下代码：

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

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

上述代码导入了createApp函数和根组件App，然后调用createApp函数创建一个 Vue 应用程序实例，并将根组件传递给它。最后，使用mount方法将 Vue 应用程序挂载到 HTML 页面上的元素上（此处假设有一个 id 为app的元素）。

接下来，在您的项目中创建一个名为App.vue的文件，并添加以下代码作为根组件的模板：

<template>
  <div id="app">
    <!-- Your application content here -->
  </div>
</template>

<script>
export default {
  // Your component options here
}
</script>

<style>
/* Your component styles here */
</style>

在上述代码中，您可以将应用程序的内容放置在<div id="app">元素内部。

3 创建一个简单的单文件组件

3.1 创建一个.vue 文件

首先，在您的项目中创建一个新的.vue文件，例如MyComponent.vue。

3.2 编写组件模板

在MyComponent.vue文件中，编写组件的模板。模板部分定义了组件的结构和布局。以下是一个示例：

<template>
  <div>
    <h1>{{ message }}</h1>
    <button @click="increment">Increment</button>
  </div>
</template>

上述代码展示了一个包含标题和按钮的简单组件。标题使用双花括号插值绑定到message变量，按钮使用@click指令绑定到increment方法。

3.3 实现组件的组合式 API 逻辑

3.3.1 重构原有代码

接下来，您需要将原有的逻辑重构为组合式 API 形式。在MyComponent.vue文件中，添加如下代码：

<script>
import { ref } from 'vue';

export default {
  setup() {
    const message = ref('Hello, Vue!');

    function increment() {
      message.value += '!';
    }

    return {
      message,
      increment
    };
  }
}
</script>

上述代码使用setup函数来实现组合式 API 的逻辑。在setup函数内部，我们使用ref函数创建了一个响应式数据message，并定义了一个名为increment的方法。

最后，通过return语句将需要在模板中使用的数据和方法导出。

3.3.2 创建和导出可复用的逻辑函数

如果您希望将某些逻辑代码抽离成可复用的函数，可以创建并导出它们。例如，在同一个文件中添加以下代码：

<script>
import { ref } from 'vue';

function useCounter() {
  const count = ref(0);

  function increment() {
    count.value++;
  }

  return {
    count,
    increment
  };
}

export default {
  setup() {
    const { count, increment } = useCounter();

    return {
      count,
      increment
    };
  }
}
</script>

上述代码创建了一个名为useCounter的可复用逻辑函数，该函数返回一个包含计数器值和增加计数器的方法的对象。

然后，在setup函数内部，我们调用useCounter函数，并将其返回值解构为count和increment变量。

最后，通过return语句将这些变量导出供模板使用。

3.4 在应用程序中使用组件

要在 Vue3 应用程序中使用组件，您需要按照以下步骤进行操作：

1. 创建一个组件：首先，创建一个.vue 文件来定义您的组件。该文件包含模板、样式和逻辑代码。例如，创建一个名为"HelloWorld.vue"的文件。

<template>
  <div>
    <h1>{{ greeting }}</h1>
  </div>
</template>

<script>
export default {
  data() {
    return {
      greeting: 'Hello, World!'
    }
  }
}
</script>

<style scoped>
h1 {
  color: blue;
}
</style>

1. 导入并注册组件：在您的主应用程序文件（通常是 main.js）中，导入并全局注册您的组件。

import { createApp } from 'vue'
import HelloWorld from './components/HelloWorld.vue'

const app = createApp()
app.component('hello-world', HelloWorld)
app.mount('#app')

1. 在应用程序中使用组件：现在，您可以在应用程序的模板中使用您的组件了。只需将组件名称作为自定义元素添加到模板中即可。

<div id="app">
  <hello-world></hello-world>
</div>

这样，您的组件就会在应用程序中显示出来，并且它的数据和逻辑也会生效。

请注意，在上述示例中，我们使用了单文件组件的形式编写组件。这是 Vue 推荐的方式，它将组件的模板、样式和逻辑封装在一个文件中，使代码更加模块化和可维护。

4 使用 Vue3 组合式 API 的常见模式和技巧

当使用 Vue3 的组合式 API 时，有一些常见的模式和技巧可以帮助您更好地组织和管理代码。

4.1 响应式状态管理

在 Vue3 中，可以使用ref和reactive函数来创建响应式状态。ref用于创建单个值的响应式引用，而reactive用于创建包含多个属性的响应式对象。

import { ref, reactive } from 'vue'

// 创建一个响应式引用
const count = ref(0)

// 创建一个响应式对象
const state = reactive({
  message: 'Hello',
  name: 'World'
})

然后，你可以在组件中使用这些响应式状态：

export default {
  setup() {
    // 使用响应式引用
    const counter = ref(0)

    // 使用响应式对象
    const data = reactive({
      message: 'Hello',
      name: 'World'
    })

    return {
      counter,
      data
    }
  }
}

注意，在使用响应式状态时，需要使用.value来访问ref类型的数据：

<template>
  <div>
    <p>Counter: {{ counter }}</p>
    <p>Message: {{ data.message }}</p>
    <p>Name: {{ data.name }}</p>
  </div>
</template>

<script>
export default {
  setup() {
    const counter = ref(0)
    const data = reactive({
      message: 'Hello',
      name: 'World'
    })

    return {
      counter,
      data
    }
  }
}
</script>

4.2 生命周期钩子函数的替代方法

在 Vue3 中，生命周期钩子函数被替换为了setup函数。你可以在setup函数中执行组件初始化的逻辑，并返回要暴露给模板的数据和方法。

export default {
  setup() {
    // 组件初始化逻辑

    return {
      // 要暴露给模板的数据和方法
    }
  }
}

如果需要在组件挂载后或卸载前执行一些操作，可以使用onMounted和onUnmounted钩子函数：

import { onMounted, onUnmounted } from 'vue'

export default {
  setup() {
    onMounted(() => {
      // 组件挂载后执行的操作
    })

    onUnmounted(() => {
      // 组件卸载前执行的操作
    })

    return {}
  }
}

4.3 针对特定功能的自定义组合式 API

除了使用 Vue 提供的内置组合式 API 之外，你还可以创建自己的自定义组合式 API 来封装特定功能的逻辑。

例如，假设你想要创建一个可复用的计时器逻辑，你可以编写一个名为"useTimer"的自定义组合式 API：

import { ref, watch, onUnmounted } from 'vue'

export function useTimer(initialValue = 0) {
  const timer = ref(initialValue)

  const startTimer = () => {
    timer.value = 0
    const interval = setInterval(() => {
      timer.value++
    }, 1000)
    onUnmounted(() => {
      clearInterval(interval)
    })
  }

  watch(timer, (newValue) => {
    console.log('Timer:', newValue)
  })

  return {
    timer,
    startTimer
  }
}

然后，在你的组件中使用自定义组合式 API：

import { useTimer } from './useTimer'

export default {
  setup() {
    const { timer, startTimer } = useTimer()

    return {
      timer,
      startTimer
    }
  }
}

这样，你就可以在多个组件中重复使用计时器逻辑。

4.4 使用 ref 和 reactive 进行数据响应式处理

在 Vue3 中，我们可以使用ref和reactive函数来创建响应式的引用和对象。

• 使用ref函数创建响应式引用：

import { ref } from 'vue'

const count = ref(0)
console.log(count.value) // 输出：0

count.value++ // 修改值
console.log(count.value) // 输出：1

• 使用reactive函数创建响应式对象：

import { reactive } from 'vue'

const state = reactive({
  count: 0,
  name: 'John'
})

console.log(state.count) // 输出：0
console.log(state.name) // 输出：'John'

state.count++ // 修改值
console.log(state.count) // 输出：1

4.5 使用 watchEffect 和 watch 进行数据侦听

Vue3 提供了watchEffect和watch函数来进行数据侦听。

• 使用watchEffect监听响应式状态的变化，并执行回调函数：

import { watchEffect, reactive } from 'vue'

const state = reactive({
  count: 0
})

watchEffect(() => {
  console.log('Count changed:', state.count)
})

• 使用watch函数监听特定的响应式状态，并执行回调函数：

import { watch, reactive } from 'vue'

const state = reactive({
  count: 0
})

watch(
  () => state.count,
  (newVal, oldVal) => {
    console.log('Count changed:', newVal, oldVal)
  }
)

4.6 使用 offer 和 inject 实现组件之间的通信

Vue3 中，我们可以使用provide和inject来实现组件之间的通信。

• 在父组件中使用provide提供数据：

import { provide, reactive } from 'vue'

const state = reactive({
  count: 0
})

provide('state', state)

• 在子组件中使用inject获取提供的数据：

import { inject } from 'vue'

export default {
  setup() {
    const state = inject('state')
    console.log(state.count) // 输出：0

    return {}
  }
}

通过这些技巧，你可以更好地利用 Vue3 的组合式 API 来处理数据响应性、数据侦听以及组件之间的通信。

5 总结

Vue3 的组合式 API 和单文件组件为我们带来了更加灵活、可维护的开发方式。通过组合式 API，我们能够更好地组织组件的逻辑，并且可以轻松地复用和共享代码逻辑。而单文件组件则将模板、样式和逻辑集成在一个文件中，简化了开发流程，提高了代码的可读性和可维护性。

在本文中，我们从头到尾介绍了如何使用 Vue3 的组合式 API 和单文件组件来构建应用程序。我们学习了如何安装和配置 Vue3，并且详细讲解了创建单文件组件的步骤。此外，我们还探讨了一些常见的组合式 API 模式和技巧，如响应式状态管理、替代生命周期钩子函数的方法以及组件之间的通信。

通过深入学习和实践这些概念和技术，你可以提升自己在 Vue 开发中的技能水平。无论你是新手还是有经验的开发者，Vue3 的组合式 API 和单文件组件都将为你带来更好的开发体验和更高的效率。

在未来，Vue3 的发展还将带来更多新的特性和功能。我们鼓励你保持对 Vue 生态系统的关注，并继续深入学习和探索。谢谢你阅读本文，希望本文对你学习和实践 Vue3 组合式 API 和单文件组件有所帮助。祝你在 Vue 开发中取得更大的成功！