当前位置： 首页 > java >正文

Vue3学习（接口，泛型，自定义类型，v-for，props）

java 2025/6/23 9:15:50

一，前言

继续学习

二，TS接口泛型自定义类型

1.接口

TypeScript 接口（Interface）是一种定义对象形状的强大工具，它可以描述对象必须包含的属性、方法和它们的类型。接口不会被编译成 JavaScript 代码，仅在编译阶段用于类型检查。

基本语法与用法

接口使用 interface 关键字定义，下面是一些常见用法：

// 定义基本接口
interface User {name: string;age: number;//“?” 表明该属性是可选的，其数据类型为布尔型（即值只能是 true 或 false）。“readonly id: string;” 表示定义一个名为 “id” 的属性，“readonly” 关键字意味着这个属性一旦被赋值就不能再被修改isAdmin?: boolean; // 可选属性readonly id: string; // 只读属性greet: (message: string) => void; // 方法
}// 使用接口
const user: User = {name: "张三",age: 30,id: "user123",greet: (message) => console.log(`${message}, ${this.name}`)
};// 接口继承
interface AdminUser extends User {role: string;
}// 函数接口
interface Calculator {(a: number, b: number): number;
}const add: Calculator = (a, b) => a + b;// 可索引接口
interface StringArray {[index: number]: string;
}const names: StringArray = ["Alice", "Bob"];

高级特性

接口还支持更复杂的类型定义：

// 混合类型接口（对象 + 函数）
interface Counter {(): void; // 函数签名count: number; // 属性
}function createCounter(): Counter {const counter = () => counter.count++;counter.count = 0;return counter;
}// 接口合并（同名接口会自动合并）
interface Box {height: number;
}interface Box {width: number;
}const box: Box = { height: 10, width: 20 };

最佳实践

  1. 使用接口定义对象形状，特别是在大型项目中
  2. 使用类型别名处理联合类型、交叉类型等复杂类型
  3. 保持接口名称简洁明了，通常使用名词或形容词 + 名词
  4. 为可选属性添加 ? 标记，为只读属性添加 readonly 标记

接口是 TypeScript 类型系统的核心组成部分，合理使用可以显著提高代码的可读性和可维护性。

2.泛型

泛型是 TypeScript 中一个强大的特性，它允许我们创建可重用的组件，同时保持类型安全。泛型让我们可以在定义函数、接口或类时不预先指定具体类型，而是在使用时再确定类型。

基本泛型函数：

// 泛型函数示例
function identity<T>(arg: T): T {return arg;
}// 使用泛型函数
const output1 = identity<string>("myString"); // 显式指定类型
const output2 = identity(100); // 类型推断为 number

泛型接口：

// 泛型接口
interface GenericIdentityFn<T> {(arg: T): T;
}function identity<T>(arg: T): T {return arg;
}const myIdentity: GenericIdentityFn<number> = identity;

泛型类：

// 泛型类
class GenericNumber<T> {zeroValue: T;add: (x: T, y: T) => T;
}const myGenericNumber = new GenericNumber<number>();
myGenericNumber.zeroValue = 0;
myGenericNumber.add = (x, y) => x + y;

3，自定义类型

自定义类型允许我们创建复杂的、特定用途的类型定义，提高代码的可读性和类型安全性。

类型别名（Type Aliases）：

// 基本类型别名
type Name = string;
type NameResolver = () => string;
type NameOrResolver = Name | NameResolver;// 复杂类型别名
type UserInfo = {name: string;age: number;address?: string;
};// 泛型类型别名
type Container<T> = { value: T };

交叉类型（Intersection Types）：

// 交叉类型
interface Colorful {color: string;
}interface Circle {radius: number;
}type ColorfulCircle = Colorful & Circle;const cc: ColorfulCircle = {color: "red",radius: 10
};

联合类型

// 联合类型
type StringOrNumber = string | number;
type Text = string | { text: string };// 字面量类型
type Easing = "ease-in" | "ease-out" | "ease-in-out";

**条件类型

// 条件类型
type MessageOf<T> = T extends { message: unknown } ? T["message"] : never;interface Email {message: string;
}type EmailMessageContents = MessageOf<Email>; // string

映射类型

// 映射类型
interface User {name: string;age: number;email: string;
}// 创建只读版本
type ReadonlyUser = {readonly [P in keyof User]: User[P];
};// 创建可选版本
type PartialUser = {[P in keyof User]?: User[P];
};

三，v-for指令

v-for 是 Vue.js 中用于循环渲染列表的指令，它允许你基于数组或对象的数据来动态生成 DOM 元素。

基本用法

v-for 指令的基本语法是 item in items，其中 items 是源数据数组，而 item 是当前被迭代的数组元素的别名。

<!DOCTYPE html>
<html lang="zh-CN">
<head><meta charset="UTF-8"><title>Vue v-for 简单示例</title><script src="https://cdn.jsdelivr.net/npm/vue@2.7.14/dist/vue.js"></script><style>body { font-family: Arial, sans-serif; }.example { margin-bottom: 30px; padding: 15px; border: 1px solid #eee; }ul { list-style-type: none; padding: 0; }li { margin: 5px 0; }</style>
</head>
<body><div id="app"><!-- 示例1：循环数组 --><div class="example"><h3>1. 循环数组</h3><ul><li v-for="(item, index) in fruits" :key="index">{{ index + 1 }}. {{ item }}</li></ul></div><!-- 示例2：循环对象 --><div class="example"><h3>2. 循环对象</h3><ul><li v-for="(value, key) in user" :key="key">{{ key }}: {{ value }}</li></ul></div><!-- 示例3：循环数字 --><div class="example"><h3>3. 循环数字</h3><p>前 {{ count }} 个数字的平方：</p><ul><li v-for="n in count" :key="n">{{ n }} × {{ n }} = {{ n * n }}</li></ul></div></div><script>new Vue({el: '#app',data: {fruits: ['苹果', '香蕉', '橙子', '草莓'],user: {name: '张三',age: 28,email: 'zhangsan@example.com'},count: 5}})</script>
</body>
</html>
  1. key 的重要性：
    • 为每个 v-for 项提供唯一的 key 是最佳实践，它帮助 Vue 跟踪节点的身份，从而高效地更新 DOM。
    • 避免使用索引作为 key，特别是当列表可能会重新排序或过滤时，这可能导致性能问题或错误的更新。
  2. 响应式更新：
    • Vue 能够检测到数组的变更方法（如 push、pop、splice 等）并触发相应的 DOM 更新。
    • 直接修改数组索引或长度不会触发响应式更新，应使用 Vue 提供的方法。
  3. 过滤和排序：
    • 当需要显示过滤或排序后的结果时，应使用计算属性或方法，而不是在 v-for 中直接操作。

四，props

props 是 Vue 组件中用于从父组件向子组件传递数据的机制。它允许你创建可复用的组件，同时保持数据的单向流动。

index.ts

// 定义一个接口，用于限制person对象的具体属性
export interface PersonInter
{name: string;age: number;sex: string;
}// 一个自定义类型
export type Persons = PersonInter[]

App.vue

<template><person a="hh":list="personlist"/>
</template>
<script  lang="ts" setup name="App">
import person from './components/person.vue';
import { reactive } from 'vue';
import { type Persons} from './types';
let personlist = reactive<Persons>([{name:'张三',age:18,sex:'男',},{name:'李四',age:19,sex:'男',},{name:'王五',age:20,sex:'男'},])
</script>

person.vue

<template><div class="person"><h2>{{a}}</h2>
<ul><li v-for="p in list" :key="p.id">{{p.name}} {{p.age}}</li>
</ul></div>
</template>
<script lang="ts" setup name="Person">
import { defineProps }   from 'vue';
// // 接收a参数和list
defineProps(['a','list'])
// // 接收a参数,同时将props保存起来
// let x = defineProps(['a'])
// console.log(x.a)
</script>
<style></style>

大概就是这样，反正就是从父组件那里搞点数据，还有很多别的用法遇到了再说。

http://www.xdnf.cn/news/12980.html

相关文章：

  • 时间同步技术在电力系统中的应用
  • 水泥厂自动化升级利器：Devicenet转Modbus rtu协议转换网关
  • 达梦数据库CASE WHEN条件
  • Spring Boot 启动流程详解
  • 打手机检测算法AI智能分析网关V4守护公共/工业/医疗等多场景安全应用
  • Android Native 之 lmkd进程分析
  • 嵌入式学习之系统编程(九)OSI模型、TCP/IP模型、UDP协议网络相关编程（6.3）
  • NLP-数据集
  • wifi改ip地址有什么用？wifi改ip地址怎么改
  • LeetCode - 3. 无重复字符的最长子串
  • 无源一阶低通电路噪声如何计算
  • 音乐“穿梭机”AudioRelay，让你的音频“无缝对接”
  • push [特殊字符] present
  • 深入解析 Qwen3 基础模型：架构设计与技术创新
  • 第2课 SiC MOSFET与 Si IGBT 静态特性对比
  • 从0开始学习R语言--Day20--Wilcoxon秩和检验
  • 组件库实战-基建思路
  • Docker拉取MySQL后数据库连接失败的解决方案
  • P3 QT项目----记事本（3.8）
  • Qt的学习（二）
  • 用神经网络读懂你的“心情”：揭秘情绪识别系统背后的AI魔法
  • HDMI 显示器热插拔对应显示应用启停测试
  • 高分辨率图像合成归一化流扩展
  • 02.运算符
  • 使用Spring Cloud Stream 模拟生产者消费者group destination的介绍（整合rabbitMQ）
  • c++默认类模板参数
  • K8S中的PV、PVC和StorageClass
  • 【C++】std::bind和std::placeholders
  • c# 局部函数 定义、功能与示例
  • 「Java基本语法」变量的使用