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

2023-08-17 08:25 由尘缘如梦！发表于 #前端开发

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 应用程序中使用组件，您需要按照以下步骤进行操作：

创建一个组件：首先，创建一个.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>

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

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

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

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

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