Vue3 - Vite - TypeScript
Vite :下一代前端开发与构建工具
基于原生 ES-Module 的前端构建工具
ES-Module 代码模块化的语言规范
- 快速冷启动
- 即使的模块热更新
- 按需编译
TypeScript:JavaScript的一个超集
TS入门教程
面向对象设计和编程遵循的几个原则:
SOLID原则:
- SRP(Single Responsibility Principle) 单一职责原则;
- OCP(Open Closed Principle) 开/闭原则;
- LSP(Liskov Substitution Principle) 里氏替换原则;
- ISP(Interface Segregation Principle) 接口分离原则;
- DIP(Dependency Inversion Principle) 依赖反转原则。
接口(Interfaces)
面向对象语言中,接口是一个很重要的概念,它是对行为的抽象,而具体如何行动需要由类(classes)去实现(implement)。
TypeScript 中的接口是一个非常灵活的概念,除了可用于对类的一部分行为进行抽象以外,也常用于对「对象的形状(Shape)」进行描述。
接口定义的变量比接口少一些属性是不被允许的,当然, 多一些也是不允许的:
interface People {
name: string,
age: number
}
const tu: People = {
name: 'tu'
}
// error 属性缺失 age
const ding: People = {
name: 'ding',
age: 24,
sex: 'girl'
}
// error 属性溢出 sex
可选属性及只读属性
可选属性: 可存在 可不存在
只读属性: 只读
interface People {
name?: string,
readonly age: number
}
任意属性
interface People {
name?: string,
readonly age: number,
[key: string]: any
}
// 如果定义了确定属性,那么可选属性的类型都必须是子集
interface People {
name?: string,
readonly age: number, // error
[key: string]: string
}
// 数字签名
interface Num {
[index: number]: string // arr: Num = ['one', 'two']
}
联合类型
一个值可能会出选多个属性
interface TypeA {
name: any[] | string | object | (() => void)
}
类型断言
当不确定类型的时候
interface Cat {
name: string;
run(): void;
}
interface Fish {
name: string;
swim(): void;
}
function isFish(animal: Cat | Fish) {
if (typeof animal.swim === 'function') {
return true;
}
return false;
}
// index.ts:11:23 - error TS2339: Property 'swim' does not exist on type 'Cat | Fish'.
// Property 'swim' does not exist on type 'Cat'.
// 将 animal断言Fish
function isFish(animal: Cat | Fish) {
if (typeof (animal as Fish).swim === 'function') && return true
return false;
}
interface People {
name: string,
age?: number
}
const tu: People = {} as People
const tu: People = <People>{}
// 兼容型断言
type UserFun = (user: People) => string
const fn: UserFun = (user: People) => user.name
fn({name: 'tu', age: 18, sex: '男'}) // error
const obj = {name: 'tu', age: 18, sex: '男'}
fn(obj)
// 用变量接收参数 再传入
类与接口
接口对类的一部分行为进行抽象。
实现(implements)是面向对象中的一个重要概念。一个类只能继承自另一个类,不同类之间可以有一些共有的特性,就可以把特性提取成接口(interfaces),用 implements 关键字来实现。
接口继承
- 通过其他接口扩展自己
- 允许接口继承多个接口
- 关键字extends
Vue3 升级点
架构上相比于Vue2.x升级,性能上得到了很大的提升,Composition API的出现,让组件抽离、逻辑代码复用更加灵活。
Composition API
vue2 使用的是Option API风格(data/method/mounted)
vue3 setup函数 以功能为单位的代码组织方式,让代码更容易复用
Setup 语法糖
<script setup lang='ts'>
import ...
interface Fn {}
type Fun = (obj: Fn) => string
const fn: Fun = (obj: Fn) => obj.name
const list: Fn = {}
const state = reactive<Fn>{}
</script>
相比于setup(){} 要简洁的很多
更先进的组件
Fragment组件
<template>
<div></div>
<div></div>
</template>
Suspense组件
<Suspense>
<template #default>
<Suspended-component />
</template>
<template #fallback>
Loading...
</template>
</Suspense>
在Suspended-component完全渲染之前,备用内容会被显示出来。如果是异步组件,Suspense可以等待组件被下载,或者在设置函数中执行一些异步操作。
更好的TS支持
更快的开发体验(Vite)
按需编译 体积更小
性能更快 1.2-2倍
状态管理器 VueX (Pinia)
Pinia.js 是新一代的状态管理器,由 Vue.js团队中成员所开发的,因此也被认为是下一代的 Vuex,即 Vuex5.x,在 Vue3.0 的项目中使用也是备受推崇。
优点:
- 完整的 typescript 的支持;
- 轻量级,压缩后体积只有1.6kb;
- 去除 mutations,只有 state,getters,actions;
- actions支持同步 异步;
- 没有模块嵌套,只有 store 的概念,store 之间可以自由使用,更好的代码分割;
- 无需手动添加 store,store 一旦创建便会自动添加;
更多推荐
Vue3 模版介绍
发布评论