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

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

news 来源：原创 2025/6/10 7:10:49

一，前言

继续学习

二，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>

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

相关文章：

  • ubuntu服务器上极简部署odoo18
  • Qt的学习（二）
  • 【Java_EE】Spring MVC
  • 【多智能体】基于LLM自进化多学科团队医疗咨询多智能体框架
  • FreeRtos下创建任务失败原因记录
  • 【Elasticsearch】一个图书馆的案例解释 Elasticsearch
  • 【Gateway断言（predicates）设置】
  • Mobile ALOHA全身模仿学习
  • 【AI学习】李广密与阶跃星辰首席科学家张祥雨对谈：多模态发展的历史和未来
  • 06-AI大模型-本地安装大模型deepseek与向量模型bge-m3, python如何使用(TODO)
  • NineData数据库DevOps功能全面支持百度智能云向量数据库 VectorDB，助力企业 AI 应用高效落地
  • 上位机开发过程中的设计模式体会(1)：工厂方法模式、单例模式和生成器模式
  • CMS系统安全漏洞风险评估指南：构建全面防护体系！
  • 基于物联网技术设计的设计室内宠物监护系统
  • android RelativeLayout布局
  • 高抗扰度汽车光耦合器的特性
  • Appium下载安装配置保姆教程（图文详解）
  • NXP S32K146 T-Box 携手 SD NAND（贴片式TF卡）：驱动汽车智能革新的黄金组合
  • (14)-java+ selenium-＞元素定位大法之By xpath上卷
  • @Lazy原理与实战
  • 哪些网站百度不收录/网站推广怎么推广
  • 西安做网站企业/快速提升关键词排名软件
  • 小学英语教师做应用相关网站/提高网站权重的方法
  • 做网站的基本功能/网站免费推广网站
  • 银川做网站的 公司有哪些/seo快速上排名
  • 经典网站设计网站/网址查询网站