如何使用Vue 3和Type Script进行组件化设计

简介: 【8月更文挑战第16天】如何使用Vue 3和Type Script进行组件化设计

在Vue 3中,Composition API 是一种全新的逻辑复用和代码组织方式,它允许你将组件的逻辑(如响应式状态、计算属性、方法、生命周期钩子等)封装到单独的函数中,从而提高了代码的可复用性和可维护性。以下是如何在Vue 3中使用Composition API的基本步骤:

1. 引入必要的函数

首先,你需要从 vue 包中引入 defineComponent 和 Composition API 的其他函数(如 ref, reactive, computed, watch, onMounted 等)。defineComponent 是可选的,但它提供了类型推断和一些额外的运行时检查。

import {
    defineComponent, ref, computed, onMounted } from 'vue';

2. 使用 setup 函数

setup 函数是 Composition API 的入口点。它是一个在组件创建之前被调用的同步函数,用于设置组件的响应式状态、计算属性、方法等。setup 函数会在 beforeCreatecreated 生命周期钩子之前被调用,并且它是 this 的上下文之外的(即 thissetup 中不是组件实例)。

<script setup lang="ts">
import { ref, computed, onMounted } from 'vue';

const count = ref(0);
const doubled = computed(() => count.value * 2);

onMounted(() => {
  console.log('Component is mounted!');
});

function increment() {
  count.value++;
}
</script>

注意:<script setup> 是 Vue 3 引入的语法糖,它提供了一种更简洁的方式来使用 Composition API。它会自动将 setup 函数的返回值暴露给模板,并且你不需要显式地调用 defineComponent

3. 在模板中使用

在模板中,你可以直接访问 setup 函数中返回的任何响应式状态、计算属性或方法。

<template>
  <div>
    <p>{
  { count }}</p>
    <p>{
  { doubled }}</p>
    <button @click="increment">Increment</button>
  </div>
</template>

4. 响应式状态

使用 refreactive 来创建响应式状态。ref 用于基本数据类型,而 reactive 用于对象或数组。

const count = ref(0); // 使用 ref 创建响应式的基本数据类型
const person = reactive({
    name: 'Alice', age: 30 }); // 使用 reactive 创建响应式的对象

5. 生命周期钩子

Composition API 提供了与组件生命周期钩子对应的函数,如 onMounted, onUpdated, onUnmounted 等。

onMounted(() => {
   
  // 组件挂载后执行的代码
});

onUpdated(() => {
   
  // 组件更新后执行的代码
});

onUnmounted(() => {
   
  // 组件卸载后执行的代码
});

6. 依赖注入和提供/注入

虽然 Composition API 本身不直接提供类似于 provideinject 的API,但你可以通过 setup 函数的第二个参数(context)来访问 provideinject。不过,更常见的做法是使用 Vue 3 提供的 provideinject 函数(这些函数不是 setup 特有的,但可以在 setup 中使用)。

// 父组件
setup() {
   
  const theme = ref('dark');
  provide('theme', theme);
  // ...
}

// 子组件
setup(props, {
    inject }) {
   
  const theme = inject('theme')!; // 注意:需要类型断言或使用可选链来处理可能的undefined
  // ...
}

// 或者使用独立的 provide 和 inject 函数
// setup() {
   
//   const theme = ref('dark');
//   provide('theme', theme);
//   // ...
// }

// setup(props, context) {
   
//   const theme = inject('theme', 'default-theme'); // 第二个参数是默认值
//   // ...
// }

请注意,上面的 inject 示例中使用了 ! 来进行非空断言,这是因为 TypeScript 无法自动推断 inject 返回值的非空性。如果你不确定注入的值是否存在,你应该使用可选链(?.)或默认值来处理它。

通过以上步骤,你可以在Vue 3中有效地使用Composition API来构建你的组件。

目录
相关文章
|
2月前
|
JavaScript 前端开发 IDE
[译] 用 Typescript + Composition API 重构 Vue 3 组件
[译] 用 Typescript + Composition API 重构 Vue 3 组件
[译] 用 Typescript + Composition API 重构 Vue 3 组件
|
2月前
|
JavaScript API
如何使用Vue 3和Type Script进行组件化设计
【8月更文挑战第16天】如何使用Vue 3和Type Script进行组件化设计
47 1
|
2月前
|
资源调度 JavaScript 前端开发
Vue3+TypeScript前端项目新纪元:揭秘高效事件总线Mitt,轻松驾驭组件间通信的艺术!
【8月更文挑战第3天】Vue3结合TypeScript强化了类型安全与组件化开发。面对大型应用中复杂的组件通信挑战,可通过引入轻量级事件发射器Mitt实现事件总线模式。Mitt易于集成,通过简单几步即可完成安装与配置:安装Mitt、创建事件总线实例、并在组件中使用`emit`与`on`方法发送及监听事件。此外,利用TypeScript的强大类型系统确保事件处理器正确无误。这种方式有助于保持代码整洁、解耦组件,同时提高应用的可维护性和扩展性。不过,在大规模项目中需谨慎使用,以防事件流过于复杂难以管理。
80 1
|
2月前
|
开发框架 前端开发 JavaScript
在基于vue-next-admin的Vue3+TypeScript前端项目中,为了使用方便全局挂载对象接口
在基于vue-next-admin的Vue3+TypeScript前端项目中,为了使用方便全局挂载对象接口
|
2月前
|
开发框架 前端开发 JavaScript
在Vue3+TypeScript 前端项目中使用事件总线Mitt
在Vue3+TypeScript 前端项目中使用事件总线Mitt
|
2月前
|
JavaScript 前端开发 安全
解锁Vue3与TypeScript的完美搭档:getCurrentInstance带你高效打造未来前端
【8月更文挑战第21天】Vue3的getCurrentInstance方法作为Composition API的一部分,让开发者能在组件内访问实例。结合TypeScript,可通过定义组件实例类型实现更好的代码提示与类型检查,提升开发效率与代码质量。例如,定义一个带有特定属性(如myData)的组件实例类型,可以在setup中获取并安全地修改这些属性。这种方式确保了一致性和减少了运行时错误,使开发更加高效和安全。
49 0
|
2月前
|
JavaScript 测试技术 API
Vue 3 与 TypeScript:最佳实践详解
Vue 3 与 TypeScript:最佳实践详解
|
2月前
|
JavaScript 前端开发 API
Vue 3+TypeScript项目实战:解锁vue-next-admin中的全局挂载对象接口,让跨组件共享变得高效而优雅!
【8月更文挑战第3天】在构建Vue 3与TypeScript及vue-next-admin框架的应用时,为提高多组件间共享数据或方法的效率和可维护性,全局挂载对象接口成为关键。本文通过问答形式介绍其必要性和实现方法:首先定义全局接口及其实现,如日期格式化工具;接着在`main.ts`中通过`app.config.globalProperties`将其挂载;最后在组件内通过Composition API的`getCurrentInstance`访问。这种方式简化了跨组件通信,增强了代码复用性和维护性。
33 0
|
15天前
|
JavaScript
typeScript进阶(9)_type类型别名
本文介绍了TypeScript中类型别名的概念和用法。类型别名使用`type`关键字定义,可以为现有类型起一个新的名字,使代码更加清晰易懂。文章通过具体示例展示了如何定义类型别名以及如何在函数中使用类型别名。
34 1
typeScript进阶(9)_type类型别名
|
15天前
|
JavaScript
typeScript基础(2)_any任意值类型和类型推论
本文介绍了TypeScript中的`any`任意值类型,它可以赋值为其他任何类型。同时,文章还解释了TypeScript中的类型推论机制,即在没有明确指定类型时,TypeScript如何根据变量的初始赋值来推断其类型。如果变量初始化时未指定类型,将被推断为`any`类型,从而允许赋予任何类型的值。
34 4