Vue3 模版介绍

Vue3 - Vite - TypeScript

Vite ：下一代前端开发与构建工具

基于原生 ES-Module 的前端构建工具
ES-Module 代码模块化的语言规范

• 快速冷启动
• 即使的模块热更新
• 按需编译

TypeScript：JavaScript的一个超集

TS入门教程

面向对象设计和编程遵循的几个原则：

SOLID原则：

1. SRP(Single Responsibility Principle) 单一职责原则；
2. OCP(Open Closed Principle) 开/闭原则；
3. LSP(Liskov Substitution Principle) 里氏替换原则；
4. ISP(Interface Segregation Principle) 接口分离原则；
5. 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组件

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 一旦创建便会自动添加；