最近尝试上手 Vue3+TS+Vite，对比起 Vue2 有些不适应，但还是真香~
上手前先说下 Vue3 的一些变化吧~
Vue3 的变化
Vue3 带来的变化主要有以下几个方面：
-
使用层面
- 对比起 Vue2 启动速度快很多，新项目从 1s 升级到不到 500ms
-
vite.config.ts配置文件修改后无需重启服务就能更新
-
代码层面
- 函数式编程，方便组合逻辑，如mixin容易命名冲突，数据来源不清晰
- 新增
ref，reativeAPI定义变量 - 更好的
ts支持 - 组件文件中
template模板内无需用根节点标签包着组件元素
-
底层设计
- 双向数据绑定从
definePropertyfor in 循环变量改成proxy。defineProperty是改变原对象属性标签；而proxy未改变原对象，而是产生新的代理对象，js 引擎更喜欢稳定的对象 - 重新定义
vdom对比思路：- 区分动静态 dom，只对比动态数据 dom，用block 标记动态标签内部的静态标签
- 使用最长递增子序列算法，找到所有不需要移动的元素
- compile 编译优化，把大量计算放在 node 层，最后浏览器只需执行最少的代码
- 双向数据绑定从
底层设计层面的改变决定了 vue3 比 vue2 更快
下面介绍上手步骤~ (官网链接)
创建项目
使用 vite 命令创建初始项目
# npm 6.x
npm create vite@latest my-vue-app --template vue
# npm 7+, extra double-dash is needed:
npm create vite@latest my-vue-app -- --template vue
cd my-vue-app
npm install
npm run dev
Vite 配置
功能一致的配置大多跟 vue-cli 配置大同小异，不过多赘述
resolve
resolve.alias：当使用文件系统路径的别名时，请始终使用绝对路径。相对路径的别名值会原封不动地被使用，因此无法被正常解析。
/* vite.config.ts */
resolve: {
//文件系统路径的别名, 绝对路径
alias: {
"@": path.resolve(__dirname, "src"),
}
}
sass配置
安装sass依赖和配置 vite.config.ts 预定义全局变量
npm i sass -D
/* vite.config.ts */
css: {
preprocessorOptions: {
scss: {
additionalData: '@import "./src/assets/scss/var.scss";'
}
}
}
开启服务配置
开启 http 服务
/* vite.config.ts */
server:{
host: 'dev.moon.cn',
port: 3000
}
开启 https 服务
/* vite.config.ts */
let httpsConfig = {
key: fs.readFileSync("C:/Users/ca/wps.cn/_wildcard.wps.cn+3-key.pem"),
cert: fs.readFileSync("C:/Users/ca/wps.cn/_wildcard.wps.cn+3.pem")
};
server:{
https: httpsConfig,
host: 'dev.moon.cn',
port: 443,
open: true
}
预构建依赖优化
默认情况下，Vite 会抓取你的 index.html 来检测需要预构建的依赖项。如果指定了 build.rollupOptions.input，Vite 将转而去抓取这些入口点。
optimizeDeps.include
默认情况下，不在 node_modules 中的，链接的包不会被预构建。使用此选项可强制预构建链接的包。
/* vite.config.ts */
optimizeDeps: {
include: ['axios'],
},
optimizeDeps.exclude
在预构建中强制排除的依赖项。
eslint 配置
vue3 和 ts 的 eslint 配置需另外自行配置，除了需配置 eslint 规则外还需调整 vite 的相关配置，感兴趣的话可以看看我另一篇文章（内附配置解析），或者直接看完整源码，这里不做赘述。
TypeScript
TypeScript 是添加了类型系统的 JavaScript，适用于任何规模的项目，在编译阶段进行类型检查。
基础知识可直接看中文文档，英文比较好的小伙伴可以直接看官方文档，这里不做赘述，这里分享一些值得说的地方
类型/接口/泛型
类型：类型（type）不是定义一个新类型，而是一个类型别名，使类型更具体化
接口：接口（interface）则是描述一个对象的形状，对值所具有的结构进行类型检查。接口的作用类似于抽象类，不同点在于接口中的所有方法和属性都是没有实值的，换句话说接口中的所有方法都是抽象方法。接口主要负责定义一个类的结构，接口可以去限制一个对象的接口，对象只有包含接口中定义的所有属性和方法时才能匹配接口。同时，可以让一个类去实现接口，实现接口时类中要保护接口中的所有属性。
泛型：支持多种数据结构，有函数泛型，类泛型，接口泛型等。
你可能想问什么时候用类型，什么时候用接口？Typescript团队的建议是
可以使用接口就尽量使用接口，因为接口更灵活，更容易处理
很多时候 interface 和 type 是相同的，但有一个明显区别在于 interface 可以重复定义，类型注解会累加，而 type 重复定义会报错
类型声明
类型声明（Type Declaration） 或者类型定义（Type Definition） 文件是一个以.d.ts作为文件后缀名的TypeScript文件。文件中只包含与类型相关的代码，不包含逻辑代码，它们的作用旨在为开发者提供类型信息，所以它们只在开发阶段起作用。
typescript编译后会将类型信息移除，类型信息仅在开发阶段起作用。
全局类型/变量声明
先在项目 src 目录中新建 global.d.ts 文件
全局类型声明
项目的根目录有 tsconfig.json 可以配置 TypeScript，include 属性包含了需要校验 ts 的文件。ts 默认会将 xx.d.ts 类型文件中的类型注册成全局的，下面举个栗子：
// global.d.ts
type T1 = number
// 组件内
全局变量声明
有三种方式声明全局变量，挂载在浏览器的 window 对象中
- 使用 window
global.d.ts文件
// 若想不带window使用userId，但需重复声明
declare let userId: string
interface Window {
userId: string
}
注：不声明且不带window使用开发模式不会报错，但打包时会报错
组件文件
window.userId = '1'
console.log(userId)
- 使用
global配合window或var，需加export，否则会打包报错
// global.d.ts
export {}
declare global {
interface Window {
// 使用foo全局变量时得带window，否则打包会报错
foo: string
}
var age: number
}
// 组件内
globalThis.age = 18
window.foo = '1'
console.log(age, window.foo)
注：加上export后其他声明会失效，其他声明可另起 *.d.ts 文件定义
- 使用var
// global.d.ts
declare var age: number
// 组件内
globalThis.age = 18
console.log(age)
每种方式各有利弊，自行选择
第三方库声明
第三方库需有类型声明，可自动生成或者自己写，有兴趣可移步。
Vue3 + TS
vue3新增了composition api的写法，更接近react的写法，下面介绍ts下的vue3写法和生命周期
setup 语法糖
一个组件选项，在组件被创建之前，props 被解析之后执行。它是组合式 API 的入口。
里面的代码会被编译成组件 setup() 函数的内容。这意味着与普通的