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

  • vue3 组合式 api 单文件组件写法已关闭评论
  • 157 次浏览
  • A+
所属分类：Web前端
摘要

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

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 开发中取得更大的成功！

便宜好用的国外VPS推荐