主要是2025年没什么好回忆的好事情...不知道如何写是好。

从辞职开始

2025年开始的第一件事就是辞职了。因为项目和难绷的事情最后还是选择了辞职，经过这四年的折腾对做开发这件事已经没什么心情了。真是干一行恨一行啊。

痛苦搬家

递交辞职一个月后终于完成了交接，然后就是搬家了。好在我家就在隔壁市好搬...? 不得不说每次搬家都会对接线陷入怀疑人生，好多线啊，至今我都没吧搬家过来的东西装完，主要还是太懒了而且到现在也没写什么代码，本来想着要用的时候再装然后结果是电脑也懒得装起来。

分手？

我还是太内向了，和上一个对象其实没什么聊天，其实我到现在也不知道和对象要聊什么。然后对方觉得我不喜欢她...嘛过去了说也没什么了。

旅行

最近五年终于出了一次省啊...辞职了在自由职业到处摸鱼有了一些游玩时间。于是就在年底和Hikari和王小美去香港，诶正好赶上了会封汇丰的收取管理费末班车。值得说的就是我的出入境记录一直没出，只好跟着他们到处晃悠，晚上终于出入境记录有了我哭死，提交了两家银行的网申，可算没白来，现在卡都到了？不存在了我的BOCHK卡死活被退回但是账单又能寄到，我绷住了。 香港结束后去了广州，非常感谢千畔和葵野几位推油带着我和葵花在广州游玩广州菜真好吃啊！结束那么久我脑子里还充满了“激情全运会，活力大湾区，魅力新广州”

结语

2025年是浑浑噩噩的一年吧？其实没做什么事情，现在也不知道干什么？辞职后去干其他事情还没找到干什么是好。

回忆应该上个月就要开始回忆这一年了，但是工作充满了整个生活所以没有空回想。 于是在这好不容易得到的休息日赶快翻起了相册开始一边回忆一边起草吧！

年初的第一场雪

这破地方居然下雪了！在记忆里上次这里大范围的下雪还是小学三年级还是四年级时候，下班后赶快驱车回家去到处闲逛，虽然2023年在杭州也下雪了，但是确实很喜欢白皑皑的雪天啊！不过今年2025年一月还没下，但愿今年还有。

丽水

去丽水还了一顿欠亲友的饭（大雾），然后带着他去吃了徐府牛，被吐槽太清淡了。笑死，有时间再补一顿。

杭州

时隔一年，好像是一年了...哦不对差几天我2023年3月12日跑的。网上认识了好久终于和葵花与Ho线下会面了！一路狂奔猛赶在了中午到了杭州，第二天去了城市阳台、宜家餐厅和葵花到处晃悠。 总体还是匆忙的，这就不得不夸奖一下南站的神经设计了我在这头这站台隔了一墙，但是得穿过整个车站才能安检入站。啊啊啊神经设计，承包我一周的运动量。不过又如工作狂的这一年里久违的休息了一下。

为 “女儿” 买 “买衣服”

去年一年我的邮箱内充满了 Skeb 的邮件，过去一年居然不知道哪根筋抽了约了 50 张图两个账号总共花费 10 万日元，Skeb 不给我总结我都没注意到慢慢花掉了那么多。当然还有 bilibili 工坊和闲鱼约的图没算在里面...金币消失术啊这。OC 的网站倒是到现在还就只搭了个大概，UI 都还没画完，太咕咕咕了。

贴贴！

一年新面了 7 位网友。居然还能挤出来一点时间去面，可惜 podf 没抽到时间去面，希望还能有机会 XD

相亲

等等，我才几岁？我爸妈知道你很急但是你们先别急！不过确实相亲对象人挺好的，争取吧...虽然现在还不知道什么共同爱好，不过我确实也不是那种会主动去找女朋友的状态，不过这样也好，不会周末无聊了嘛。

迁移

因为鸡总失联多日加上微基主机变得不稳定，于是给家里的老机器做了下扩容将博客等站点都搬回了家里的机器上，所以现在速度可能会慢一些毕竟 H81 平台的电脑还被我关了超线程和锐频功能省电，并且还不止跑了博客和 API 服务，实在不行买台新电脑吧也确实该换新了已经是 10 年的老家伙了。

新购入

简单总结一下吧，就不去想那些零零散散的小物件了。啊 2023 年买的那些东西的博文还躺在草稿箱里呢，2024 年新买的这堆连草稿箱都没写进去。完了彻底鸽子了。

iPhone 13 mini

主力机从 Moto edge s 换成了 iPhone 13 mini，到手半小时内就被我手滑边框摔了一个坑。心痛，太痛了！

Macbook Air

本来一开始想买 15 寸的 Macbook Air 但是考虑到我笔记本都是外接一个屏幕用，带出门只是为了跑客户用于是就买了标准版。以及 M2 和 M3 的提升确实对我来说没什么于是选了 M2，然后非常幽默我赌 M4 得 2025 年春季才出我刚买了Macbook Air才两周不到，嚯开发布会了接着官网就砍掉了8G配置加量不加价，多花了1500买16G的小丑，诶背刺体制这不就是嘛。

台式机

从狐店长那买了台新的台式机，然后现在连着加班两个月了，就开机了一次剩下时间全在吃灰不过电子ED了确实那个点也没什么想玩的。

自行车

自行车感觉是今年买的比台式机还失败的一个物件，本想着骑车减肥但是看它现在吃灰的样子，减肥？减不了一点。

结尾

感谢你能把我这无趣的流水账看到这里。过去一年确实博客几乎荒废了，我现在确实不知道有什么可以分享的内容。 过去那 2024 年确实更加无趣了，更多时候都在两点一线。以及精神状态更加美丽，我现在不知道我为什么而存在。工作上，只能说我是真的干一行恨一行啊！已经开始想下一份工作做什么了，但是没什么头绪。 希望新的一年能在工作上找到新的抓手，诶没什么大要求能快乐就行对吧～

停止容器运行

有些情况下会导致 Linux 容器无响应，可以通过在 Chrome 的窗口内使用键盘快捷键 ctrl + alt + t 掉出 crosh 在然后输入 vmc stop termina 即可停止 Termina VM 运行，然后就可以在终端中点击 Linux 容器来再次启动。

设置时区

启动 Linux 容器后默认时区为 America/New_York 按照我的习惯喜欢先设置时区，输入以下命令即可进入 GUI 界面进行设置我一般设置为 Asia/Shanghai。

sudo dpkg-reconfigure tzdata

设置 Linux 容器环境为中文

如果有需要的话首先得输入以下指令安装中文字体，不然可以看到一堆 "口"。

sudo apt install fonts-wqy-microhei fonts-wqy-zenhei

然后输入 sudo dpkg-reconfigure locales 更改语言环境，按住下键一直下拉选框，找到 zh_CN.UTF-8 UTF-8 将光标移至前方 [ ] 按下空格键勾选， [ ] 变为 [*] 即为勾选状态，然后回车后光标移至于 zh_CN.UTF-8 继续回车即可完成设置，需要重启 Linux 容器生效。

修改软件源

我国内一般使用的是 TUNA 的软件源，具体可以查看 TUNA 的《Debian 软件源》文档，我就按照他们所说的 deb.debian.org 替换为 mirrors.tuna.tsinghua.edu.cn没有做更多的操作。 使用 sudo vi /etc/apt/sources.list 然后点击键盘 i 进入编辑可以直接替换掉现有的或者使用 # 注释现有的填入新的然后点击键盘的 ESC 输入 :wq 退出 vi 然后使用 sudo apt update 更新软件源。 你还可以更新完软件源后继续执行 sudo apt upgrade 更新已安装的应用程序和 sudo apt dist-upgrade 更新 Debain 本体。

安装中文输入法

首先需要更新软件源与软件包 sudo apt update && sudo apt upgrade 然后安装 Fcitx。

sudo apt install fcitx fcitx-lib*

完成安装后需要设置默认输入法，在终端输入 im-config 确定 / YES 大概两次到一个单选界面时选择 fcitx 然后继续大概两次确定 / YES 即可。 完成 Fcitx 的安装后接下来安装 Google 输入法。

sudo apt install fcitx-googlepinyin

完成 Google 输入法的安装后需要在终端输入 fcitx && fcitx-configtool 点击右下角 "-" 减号删除全部输入法，然后点击右下角 "+" 加号加入 "键盘 - 英语 (美国)" 与 "Google 拼音"。 接下来需要配置配置语言输入环境变量，在终端输入:

mkdir -p ~/.config/environment.d/
vi ~/.config/environment.d/fcitx.conf

进入 vi 编辑器后按下键盘上的 i 加入以下内容

GTK_IM_MODULE=fcitx
QT_IM_MODULE=fcitx
XMODIFIERS=@im=fcitx

然后单击键盘的 ESC 输入 :wq 保存并退出，即完成了环境的配置。然后我们需要设置开机自启动。使用 sudo vi ~/.sommelierrc 进入 vi 编辑器点击键盘上的 i 进入编辑模式，添加一行 /usr/bin/fcitx-autostart 然后点击键盘的 ESC 输入 :wq 即可完成配置。 输入法配置结束后可以使用 ctrl + 空格 切换出 Google 输入法，如果无效可以重启 Linux 容器试试看。

钉钉

如果您工作中离不开阿里的答辩，但是你会发现在钉钉官网下载的安装包（写本文时版本为 7.1.0.31120）安装后它读不到图标是默认的企鹅图标而且点击企鹅图标后是无反应的。让我们使用命令行 bash /opt/apps/com.alibabainc.dingtalk/files/Elevator.sh 启动它会看到日志

debian
debian branch
preload_libs= ./libcef.so
Run Main is_gpu=0 is_zygote=0 is_render=0 is_crashpad_handler=0 cmd : ./com.alibabainc.dingtalk 
Load /opt/apps/com.alibabainc.dingtalk/files/7.1.0-Release.31120//dingtalk_dll.so failed! Err=libpulse-mainloop-glib.so.0: cannot open shared object file: No such file or directory

可以看到报出了没有 libpulse-mainloop-glib.so 所以可以通过安装 libpulse 库的方式解决，在终端输入：

sudo apt install libpulse-dev

完成安装后即可成功启动钉钉，但是你会发现它窗口无法拖动，诶答辩终究是答辩，目前我是专门开了个桌面凑合着用。

字体管理器

因为我懒狗所以还是喜欢用 GUI 操作，所以还是会装个字体管理器来管理 ttf 和 otf 字体

sudo apt install font-manager

安装 Flatpak

安装 Flatpak ：

sudo apt-get install flatpak

配置源：

flatpak --user remote-add --if-not-exists flathub https://dl.flathub.org/repo/flathub.flatpakrepo

配置镜像：

flatpak --user remote-modify flathub --url=https://mirror.sjtu.edu.cn/flathub

2023 跨年夜，后

跨年夜与砍老师和 Yuzu 一起吃了一顿萨，之后就回到了老家过年，年后又回到了杭州，看起了八股文准备找一份新工作，虽然中间还是有面就面 ～ 毕竟我不清楚以后还有没有机会见到，能见就见见。

在杭找工作的三月

今年年初试图在杭州找一份工作留在杭州，但是我太菜了，海投了 2000 家 BOSS 直聘变成了 BOSS 直拒，只有一家把底薪谈在 4000 工资的公司要了我。学历卷不过工作经验也卷不过于是就先问了问家里人准备回去，在哥的帮助的情况下在家那边找到了一家和杭州面试上的这家开的差不多，于是就干脆回去了。

回家后

回家后继续陆陆续续的面试了几家公司，可能是我心太躁了，于是就和亲友一拍即合去了瑞安玩了几天。以及和许久未见的亲友们去聚了聚，一起吃了顿后看了《铃芽之旅》，感谢朋友的陪伴度过了不焦虑的几天。在家躺着摆了几天，终于收到了一家公司的 offer。也是属于运气好，他们公司正好有位要离职，我来顶上。

试用期 & 贴贴

新的公司是外企作息，早九晚五有了大量的贴贴时间 ～ 借机抽空贴贴了不少之前没来得及贴贴的 ～ 可惜一直没能抽出找 DVD 大 I 人也不太敢打扰他（缩）

公司被收购啦！

不知道是不是我有特殊的 buff 加成干一家倒一家/合并一家，一天的晨会，突然老板表示公司给收购了。然后就搬到了新的办公区，双休没了变成了单双休，早九晚五也没了变成了早八战士，上班需要打卡了。不过好在其他都没什么大变，适应过来也不算困难，就是啊新的办公场所边上全是美食荒漠啊，麦当劳都没有，可恶啊！

非常难要的押金

以为公司太远了，所以干脆退房搬家。然后我可爱的房东阿姨，退个押金拖了我一个多月，最后在给他便宜了 300 的情况下，收到了余款...诶，就算我退房拍好了照片，录了视频，以为要没钱吃饭了，也经不起她拖知道我急了东扣点西扣点。这就是《人性的弱点》吧（乐）

圣诞快乐

圣诞节被迫请假，因为要收到新房了，没有逾期没有烂尾这可能也是一份很好的圣诞礼物吧！悬着的心落下了一块？不还有验房一堆整改项和装修这个大坑！ 今年的圣诞节，收到了三样礼物，还是有朋友惦记着好诶～

跨年饭

12 月半个月都在吃汉堡王、麦当劳、肯德基，是时候吃点健康的食品了吧？

尾巴

今年一共面基了 6 次，感谢大家的抽空。收到了 3 份圣诞礼物，收到礼物很开心，谢谢几位小伙伴 ～ 及共收到了三张明信片，Fika 与 Steven Lynn 的明信片，以及一张意外的来自史莱姆寄出近一年突然中国邮政丢到我的信箱的明信片。

新的开始？

2023 年结束了，新年就是新的开始吧！让海风吹走去年的不幸与遗憾开始新的一年吧！新年快乐！新的一年也请多多指教！ 虽然最后还是咕咕咕到了 1 月 2 日，那也算新年吧！（傲娇）

TypeScript 拥有 JavaScript 的数据类型并且新增了更多类型 JavaScript 类型：number、string、boolean、null、undefined TypeScript 类型：any、type、interface 等

any 类型

any 是逃避 TypeScript 的类型检查，可以赋任何值，但是因此可能会导致 BUG 应该尽量避免使用 在已声明未赋值时就会自动推断为 any

类型注解

如 let age:number = 18 它的 :number 就是类型注解，它约定了这是什么类型的变量只能给它赋值这个类型，给它提供了约束让代码更清晰

数组类型

TypeScript 中数组类型有两种写法 类型[] 与 Array<类型> 一般使用 类型[]

// 使用 类型[]
let listA: number[] = [1,1,4,5]
// 使用 Array<类型>
let listB: Array<string> = ['您','您','您']

联合类型

定义一个可以接收多个类型的类型注释

// 对于数组
let nyaList: (number | string | boolean)[] = [114514, '您您您', true]
let neko: Array<number | boolean> = [191919, false]

// 对于简单数据类型
let timer: number | null = null

// 对于字面量
let gender: '男' | '女' | '非二元' = '非二元'

类型别名和接口

在同一类型多次使用并且写法复杂时使用

类型别名 type 支持所有的类型，而接口 interface 只支持对象类型 类型别名 type 不允许重复命名，而接口 interface 重复命名会合并 类型别名 type 不能重新打开（向内定义新的对象注解）接口 interface 可以通过两个相同命名合并实现

类型别名

类型别名，使用大驼峰命名，类似于变量，使用它和类型注释的写法一样 type 别名 = 类型

// 数组类型别名
type CusArr = (number | string) []
let list: CusArr = [19, '您']

// 对象类型别名
type AddFnType = (num1: number, num2: number) => number
const addFn2 : AddFnType = (num1, num2) => {
  return num1 + num2
}

类型别名交叉

当你一个新的类型别名 B 与一个类型别名 A 拥有相同的属性，可以使用类型别名交叉获取上个类型别名 A 的属性注解，实现的效果类似于 interface 的extends

type Point2D = {
  x: number,
  y: number
}
// 从 Point2D 交叉
type Point3D = Point2D & {
  z: number
}
const p: Point3D = {
  x: 100,
  y: 100,
  z: 100
}

接口

接口和类型别名类似，也使用大驼峰命名，接口只能用于定义对象的类型注解，使用方法与类型别名相同，语法 interface 名称 {}

interface Person {
  name: string,
  age: number,
  say: () => void
}
let p: Person = {
  name: 'PinocoP',
  age: 28,
  say() {
    console.log('nai');
  }
}

接口继承

当你一个新的类型别名 B 与一个类型别名 A 拥有相同的属性，就可以使用 extends 进行接口继承，语法 interface 名称extends需要继承的接口名称 {}

interface Person {
  name: string,
  age: number,
  say(): void
}
interface Stu extends Person {
  score: number
}
const nin: Stu = {
  name: 'JuziYou',
  age: 18,
  score: 69,
  say() {
    console.log('您');
  }
}

函数类型

函数声明

function 函数名(形参: 类型):返回值类型{
  ...
}

函数表达式

const 函数名 = (形参:类型):返回值类型 => {}

函数返回值

如果函数没有返回值就是空 void ，void 类名注解可以省略 在 JavaScript 中如果没有 return 返回值是 undefined 而在 TypeScript 中 void 和 undefined 并不相同，如果在返回值类型定义了 undefined 那么就必须 return undefined

可选参数

一个形参在可以传也可以不传的时候那就可以设置可选参数，在类型注释 ':' 前添加一个 '?' 即可，不传的情况下它的值是 undefined，可选参数不可以设置初始值，必传参数不能写在可选参数之后

// 函数声明
function 函数名(形参?: 类型, 形参:类型):返回值类型{
  ...
}

// 函数表达式
const 函数名 = (形参?:类型, 形参:类型):返回值类型 => {}

对象类型

对象类型有空对象和有属性的对象以及有属性和方法的对象（废话） 定义属性注解和可选属性和之前的那些方法差不多 对象类型在多个属性注解之间可以使用 , 也可以使用 ; 甚至可以直接换行

// 空对象
let person1 = {} = {}

// 有 属性 的对象
let person2: { name: string} = {
  name: 'juziyou'
}

// 有属性有方法的对象
let person3: { name: string, say(): void} = {
  name: 'JuziYou',
  say(){}
}
// 在多个对象属性间可以用 `,` 也可以用 `;` 甚至可以直接换行
let person4: {
  name: string;
  age: number
} = {
  name: 'JuziYou',
  age: 18
}
let person5: {
  name: string
  age: number
} = {
  name: 'JuziYou',
  age: 18
}

// 给箭头函数定义
let person6: {
  name: string,
  say: () => void
} = {
  name: 'JuziYou',
  say: () => console.log('喵')

}

// 接收一个多属性可选
// 列如 axios 的 config 中接收 url 和 method 其 method 可选
const axios = (config: {url: string, method?:string}) => {}

// 使用类型别名
type Config = (config: {url: string, method?:string}) => {}
const axios2 = (config: Config) => {}

类型推断

在 TypeScript 中存在类型推断机制，在没有指定类型的情况下会自动推断类型

// let num: number
let num = 114514

// fn(num1: number, num2:number): number
function fn(num1: number, num2:number) {
  return num1 + num2
}

字面量

在 TypeScript 中 let 了一个字面量相当于 const了一个常量如 let nya: 'JuziYou' = 'JuziYou' 那么它就只能赋值为 'JuziYou'，let 的自动推断是赋予值的数据类型、const 的自动推断是赋予的值

// let neko: string
let neko = 'JuziYou'

// const nya: 'JuziYou'
const nya = 'JuziYou'

断言

当明确的知道数据类型就可以使用断言，as 断言它跟的类型是一个更加具体的类型

// 假设此时 #nya 是一个 <a> 标签
const link = document.getElementById('nya') as HTMLAnchorElement

非空断言

在 . 前面加 ! 来添加非空断言，告诉他一定有某个属性，比如 nya!.neko 就是告诉 TypeScript 在 nya 下一定有 neko

泛型

泛型是定义不确定是什么类型，使用的时候才知道，提高服用性和灵活性，一般使用大驼峰命名

泛型别名

在定义的别名后加上 <泛型参数>就是接收泛型，然后在下面的类型注解使用 泛型参数，然后在使用时在类型注解的类型别名后加上 <类型参数> 即可使用

type User = {
  name: string,
  age: number
}

type Goods = {
  id: number,
  name: string
}

type Data<Type> = {
  message: string,
  code: number,
  data: Type
}

// 假设是请求到用户信息
let user: Data<User> = {
  message: 'Okay',
  code: 200,
  data: {
    name: 'Mikan',
    age: 18
  }
}

// 假设是请求到商品信息
let goods: Data<Goods> = {
  message: 'Okay',
  code: 200,
  data: {
    name: '大猫猫抓板',
    id: 0
  }
}

泛型接口

在定义的接口名后加上 <泛型参数>就是接收泛型，然后在下面的类型注解使用 泛型参数，然后在使用时在类型注解的接口名后加上 <类型参数> 即可使用

interface IDs<Type> {
  id: ()=> Type,
  ids: ()=> Type[]
}

// 假设获取一个 ID 列表
const idList: IDs<number> = {
  id(){
    return 114514
  },
  ids(){
    return [19,1919,191919]
  }
}

泛型函数

在定义的函数名后加上<泛型参数>就是接收泛型，然后可以使用 泛型参数 在形参和返回值的类型注释中

function newToken<Type>(token: Type): Type{
  return token
}
let token: number = 191919
token = newToken<number>(114514)

泛型约束

利用了接口 interface 的 extends 接口的继承原理，来约束传入的类型

例如必须有 length

function getId<T extends {length: number}> (id:T):T {}

自定义类型声明

如果多个 .ts 文件都要用到同个类型，这时就可以创建 .d.ts 来共享该类型

全局

直接在 .d.ts 中不使用 export 按需暴露的将会生成全局自定义类型 如：在 index.d.ts 中

interface Goods {
  name: string,
  price: number,
  brand: string
}

局部引入

TypeScript 类型也可以使用 import 和 export 来实现按需导入和导出功能，只需要再使用该 .d.ts 的 .ts 文件中 import 导入即可使用

export interface Goods {
  name: string,
  price: number,
  brand: string
}

import {Goods} from './ts/index'
}
const goods:Goods = {
  name: '猫猫猫抓板',
  price: 114514,
  brand: '猫猫'
}

给 JS 提供类型

在导入 .js 文件时，TypeScript 会自动加载与 .js 同名的 .d.ts 文件，提供类型声明 declare 用于类型声明，为其他地方(比如，.js 文件)已存在的变量声明类型，而不是创建一个新的变量，在 interface 和 type 时不用加 declare

/util/index.d.ts

export declare const sum : (numA: number, numB:number) => number

interface Student {
  name: string,
  score: number
}

export declare const say: (stu: Student) => void

/util/index.js

export const sum = (numA, numB) => numA + numB
export const say = (stu) => console.log(stu.name, stu.score);

index:

import { sum, say } from './util'
sum(1,2)
say({name: 'Nya', score: 66})

在 Vue 组合式 API 中使用

Vue官方文档

Props

基本使用

使用 defineProps<泛型>() 来来定义接收的数据类型

示例:

const props = defineProps<{money: number}>()

定义默认值

如果定义默认值需要使用 withDefaults 它第一个值接收一个函数写defineProps，第二个值写一个对象里面写接收的默认值

示例：

// const props = withDefaults(defineProps< 泛型 >(), {
//   接收值: 默认值
// })

const props = withDefaults(defineProps<{age: number, uname?: string}>(), {
uname: 'JuziYou'
})

语法糖 ⚗️

withDefaults 看起来比较复杂，所以可以使用响应式语法糖，目前还是实验性功能所以需要显式启用它，然后通过 const {接收值} = defineProps<泛型>() 使用

示例：

const {age, uname = 'JuziYou'} = defineProps<{
  age: number,
  uname?: string
}>()

Emit

不知道怎么解释就直接写上算了（摆)

子组件： event 和 payload 是自己定义的参数名 event 是触发事件的自定义事件名 payload 是传参

const emit = defineEmits<{
  (event: 'changeNya', payload:number):void
}>()

父组件：

const changeNyaFn = (nya: number) => {
  console.log('Nya', nya);
}

ref

通过 ref<泛型>(需要响应式的数据) 定义 ref

简单数据类型

定义简单数据类型 ref<泛型>(需要响应式的数据) 定义 ref

示例：

const uname = ref<string>('JuziYou')

自动推导

一般情况下 TypeScript 会自动推导它的数据类型所以可以 ref(需要响应式的数据) 这样写

示例：

// const uname: Ref<string>
const uname = ref('JuziYou')

复杂数据类型

如一个泛型为 Person 类型的数组

type Person = {
  id: number,
  uname: string,
  address: string
}
const personList = ref<Person[]>([])
personList.value.push({
  id: 1,
  uname: 'JuziYou',
  address: 'Nya'
})

reactive

使用 reactive 时推荐直接给变量指定类型

type Car = {
  brand: string,
  price: number,
  color?: string
}

const car:Car = reactive({
  brand: '橘子',
  price: 114514
})
car.color = "橘色"

computed

computed 一般会自动推导数据类型，也可以使用泛型指定 自动推导：

const nyaNum = ref(18)
// computed<number>
const nyaCount = computed(()=> nyaNum.value ** 2)

泛型指定：

const nyaNum = ref(18)
const nyaCount = computed<number>(()=> nyaNum.value ** 2)

事件

事件对象使用 Event 类型注释，通过类型断言来解决可能是个 null 的问题 如：获取 <input type="text" @change="changFn"> 的 value

const changFn = (event: Event) => {
  // 使用类型断言，断言 even.target 是一个 input
  console.log((event.target as HTMLInputElement).value)

}

ref 获取 DOM

const ref的值 = ref<类型 | null>(null) 来获取对应的 DOM 如：获取 ipt 再载入后默认聚焦

<script setup lang="ts">
const ipt = ref<HTMLInputElement | null>(null)
onMounted(()=>{
  ipt.value?.focus()
})
</script>

<template>
  <input type="text" ref="ipt" value="Nya">
</template>

通过 data()提供数据

vue 中可以在 export default{}里通过 data()提供数据，data必须是一个函数，return一个对象

export default {
  data () {
    return {
      uname: 'JuziYou',
      age: 18
    }
  }  
}

使用插值表达式显示数据

插值表达式使用两对大括号包裹，使用的数据需要在 data()、methods、computed等地方存在，可以使用表达式，但是不能使用在标签属性

{{ uname }}
{{ obj.uname }}
{{ obj.age > 18 ? '成年' : '未成年' }}

v-bind

插值表达式不能使用在标签属性，需要使用 v-bind需要设置动态 html 属性上，简写为 :

举例：

[tabs] [tab name="简写"]

<a :href="url">戳戳</a>

[/tab] [tab name="完整"]

<a v-bind:href="url">戳戳</a>

[/tab]

[/tabs]

v-on

v-on语法为 v-on:事件名='需要执行的代码/函数名/函数名(实参)'需要在 methods中提供事件处理函数，简写 @

举例：

[tabs] [tab name="简写"]

<button @click='num = bum + 1'>Click</button>
<button @click='functionA'>Click</button>
<button @click='functionB('JuziYou')'>Click</button>

[/tab] [tab name="完整"]

<button v-on:click='num = bum + 1'>Click</button>
<button v-on:click='functionA'>Click</button>
<button v-on:click='functionB('JuziYou')'>Click</button>

[/tab]

[/tabs]

事件修饰符

.prevent阻止默认行为 .stop阻止冒泡 .once程序运行期间只触发一次事件处理函数 .native在组件上调用事件

v-model

v-model是一个语法糖 @input和 :value组合到了一起，它吧属性和数据双向绑定到一起。双向绑定即数据变化视图同步变化，视图变化数据同步变化。 Vue3 中 v-model 是 :modelValue 和 @update:modelValue 的组合，Vue3官方文档

语法：v-model="数据变量"

<button v-model="数据变量"> 戳戳 </button>

在父子组件通信时，如果 :value传参给子组件 $emit('input', 值)可以使用 v-model代替

v-model 修饰符

.number和 .parseFloat转换为数字类型 .trim去除首尾空白（空格） .lazy使用 change事件改变数据（默认为 imput事件改变数据）

v-text和 v-html

v-text和 v-html会更新 DOM 对象的 innerText 或者 innerHTML，并且会覆盖差值表达式 v-text不会识别 HTML 标签，v-html会识别 HTML 标签

语法：

<p v-text="数据变量"></p>
<p v-html="数据变量"></p>

v-show和 v-if及 v-else

v-show和 v-if控制标签的显示或隐藏，true或 false v-show使用 CSS 的 display:none来隐藏 v-if将会直接从 DOM 树上移除 频繁切换显示的情况下使用 v-show因为使用 display:none来切换显示隐藏不会频繁创建元素节省性能，v-if是惰性的在 false时不会创建元素节省初期渲染开销

语法：

<p v-show="true"></p>
<p v-if="false"></p>

v-if与 v-else和 v-else-if同时使用，方便通过变量控制一套标签出现或者隐藏

<template>
  <div>
    <h1 v-if="yukari>= 60">紫老ffhfhewufuiefefrwgfuktyr</h1>
    <h1 v-else-if="yukari>= 30">紫妈</h1>
    <h1 v-else>紫</h1>
  </div>
</template>

<script>
export default {
  data(){
    return {
      yukari: 16
    }
  }
}
</script>

v-for

v-for 常用于列表渲染，按照数据循环生成，可以遍历数组、对象、数字、可遍历解构的字符串 每一项唯一标识符作为 :key="索引"，可以最大限度的复用你的 DOM，:key="索引"的索引只能是数字或者字符串

语法： v-for="(值, 索引) in 目标" :key="索引" v-for="值 in 目标" :key="值下的可用于索引的值"

[tabs] [tab name="数组"]

<template>
  <div>
    <ul>
      <li v-for="(item,index) in list" :key="index">
        {{ item }} > {{ index }}
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  data(){
    return {
      list:['JuziYou','MikanpaperYuzu','橘纸柚']
    }
  }
}
</script>

[/tab]

[tab name="对象"]

<template>
  <div>
    <ul>
      <li v-for="(value, key) in preson" :key="key">
        {{ value }} · {{ key }}
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  data(){
    return {
      preson:{
        uname: '八云紫',
        skill: '操纵界线的能力',
        age: 18
      }
    }
  }
}
</script>

[/tab] [tab name="数组里的对象"]

<template>

<div>
    <ul>
      <li v-for="(item,index) in personList" :key="index">
        >>>{{item.uname}}
        <p>{{item.skill}}</p>
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  data(){
    return {
      personList:[
        {uname:'博丽灵梦',home:'博丽神社'},
        {uname:'琪露诺',home:'雾之胡'},
        {uname:'蕾米莉亚',home:'红魔馆'},
        {uname:'帕秋莉',home:'红魔馆'}
      ]
    }
  }
}
</script>

[/tab] [tab name="数字（了解）"]

<template>
  <div>
    <ul>
      <li v-for="(item,i) in 5" :key="i">
        {{item}} · {{i}}
      </li>
    </ul>
  </div>
</template>

[/tab] [/tabs]

数组的数据更新监测

数组方法中能引起页面更新的方法有： push、pop、shift、unshift、splice、sort、reverse 其他无法引起页面更新的方法可以通过赋值来完成更新 通过下标来更新值不会触发页面更新需要使用 $set来更新数组 语法：this.$ste(要改变的对象, 要改变的位置, 要改变的值)

<template>
  <div>
    <ul>
      <li v-for="(item,index) in list" :key="index">{{item}}</li>
    </ul>
    <button @click="changeFn">changeFn</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      list: ['博丽灵梦', '琪露诺', '八云紫']
    }
  },
  methods: 
    changeFn(){
      this.$set(this.list, 1, "魔理沙")
    }
  }
}
</script>

动态绑定 class

使用 v-bind:class设置动态属性一般使用简写 :class允许使用对象或者数组 :class不会影响到原有的 class 属性 使用对象动态绑定 :class="{类名:布尔值}"如果布尔值为 true就有这个类名,false则没有 使用数组动态绑定 :class="数组"标签会有数组里面的所有类名

[tabs] [tab name="直接绑定"]

<template>
  <div>
    <div :class="str">Nya</div>
  </div>
</template>

<script>
export default {
  data(){
    return {
      str: 'green'
    }
  }
}
</script>

[/tab] [tab name="三元表达式"]

<template>
  <div>
    <div :class="isRed ? 'red' : ''"></div>
  </div>
</template>

<script>
export default {
  data(){
    return {
      isRed: true
    }
  }
}
</script>

[/tab] [tab name="对象"]

<template>
  <div>
    <div :class="{yukari: isRed, suka: !isRed}"></div>
  </div>
</template>

<script>
export default {
  data(){
    return {
      isRed: true
    }
  }
}
</script>

[/tab] [tab name="数组"]

<template>
  <div>
    <div :class="arr"></div>
  </div>
</template>

<script>
export default {
  data(){
    return {
      arr: ['show', 'mask', 'red', 'paper']
    }
  }
}
</script>

[/tab]

[/tabs]

动态绑定 style

使用 v-bind:style设置动态属性一般使用简写 :style 语法 :style="{样式名:样式值}"样式名为 CSS 属性的驼峰命名法

<template>
  <div>
    <h1 :style="{ fontSize: '50px', color: fontColor}">黄色的</h1>
  </div>
</template>

<script>
export default {
  data(){
    return{
      fontColor: 'yellow'
    }
  }
}
</script>

computed计算属性

计算属性必须在 computed节点中，多用于多个数据影响一个数据的场景，根据现有的数据区计算出新的数据并且有缓存，在数据不发生变化的情况下只会执行一次，数据有变化时会重新计算并缓存，写法是一个函数，一定需要返回值是最终值

示例翻转字符串：

<template>
  <div>
    <h1>{{reverseStr}}</h1>
  </div>
</template>

<script>
export default {
  data(){
    return{
      uname: 'MikanpaperYuzu'
    }
  },
  computed: {
    reverseStr(){
      return this.uname.split('').reverse().join('')
    }
  }
}
</script>

计算属性默认情况下只能获取不能修改，如果需要修改需要用到完整写法

完整写法示例：

<template>
  <div>
    <h1>计算属性的完整写法</h1>
    <h1>{{fullName}}</h1>
    <button @click="clickFn">点我</button>
  </div>
</template>

<script>
export default {
  data(){
    return{
      firstName:'Juzi',
      lastName:'You'
    }
  },
  computed: {
    fullName: {
      get(){
        return this.firstName + '-' + this.lastName
      },
      set(val){
        this.firstName = val.split('-')[0]
        this.lastName = val.split('-')[1]
      }
    }
  },
  methods: {
    clickFn(){
      this.fullName = 'MikanPaper-Yuzu'
    }
  }
}
</script>

watch属性监听

属性监听必须写在 watch节点中，只要监听的属性值发生了变化就会执行，多用于一个属性影响多个属性的场景，没有缓存但是可以异步，简单写法无法监听复杂类型的写法，需要使用完整写法监听复杂数据类型

[tabs] [tab name="简单写法"]

watch: {
  监听的属性 (变化后的值, 变化前的值) {
  }
}

示例：

<template>
  <div>
    <h2>{{ uname }}</h2>
    <button @click="uname = 'MikanpaperYuzu'">给我变</button>
  </div>
</template>

<script>
export default {
  data(){
    return{
      uname: 'JuziYou'
    }
  },
  watch:{
    uname(newVal, oldVal){
      console.log('魔法少女 ' + oldVal + ' 变 ' + newVal);
    }
  }
}
</script>

[/tab] [tab name="完整写法"] 动态属性是一个对象的形式 immediate: true代表一进入页面立即执行 deep: true代表升读监听可以监听到复杂数据类型内部的变化 handler(){}每次变化时触发的函数

watch: {
  接听的属性:{
    immediate: true, //代表一进入页面立即执行
    deep: true,      // 代表升读监听可以监听到复杂数据类型内部的变化
    handler(){       // handler 是每次变化时触发的函数
    }
  }
}

示例：

<template>
  <div>
    <h2>{{ obj.uname }}</h2>
    <button @click="mya">给我变</button>
  </div>
</template>

<script>
export default {
  data(){
    return{
      obj: {
        uname : 'JuziYou'
      }
    }
  },
  watch: {
    obj:{
      immediate: true,
      deep: true,
      handler(){
        console.log("变了喵");
      }
    }
  },
  methods: {
    mya(){
      this.obj.uname = "MikanpaperYuzu"
    }
  }
}
</script>

[/tab] [/tabs]

组件基础

引入组件

组件分为全局引入和局部引入，一般使用大驼峰命名法，除了驼峰, 如果使用小写还可以使用 -转换链接不同的单词，如一个注册组件名为 <JuziYou />可以直接使用转换连接 <juzi-you />也能解析到父组件。如果标签没有内容可以直接使用自结束标签

局部引入

局部引入将组件注册在当前 Vue 文件，只可以用在这个 Vue 文件中。 使用 import 组件对象 from 'Vue文件路径'引入组件 然后 components: { 组件名: 组件对象 }注册组件 示例： [tabs] [tab name="App.vue"]

<template>
  <div id="app">
    <Pannel />
  </div>
</template>

<script>
import PannelLoc from './components/Pannel.vue'
export default {
  components: { Pannel: PannelLoc }
}
</script>

[/tab] [tab name="components/Pannel.vue"]

<template>
  <div>
    <h1>Nya</h1>
  </div>
</template>

[/tab] [/tabs]

全局引入

全局引入在 main.js引入组件并使用，注册在全局整个项目中都可以使用 使用 import 组件对象 from 'Vue文件路径'引入组件 然后 Vue.component("组件名", 组件对象)注册组件

示例： [tabs] [tab name="main.js"]

import Vue from 'vue'
import App from './App.vue'

// 引入组件
import Pannel from "./components/Pannel";
// 全局注册
Vue.component('PannelGol', Pannel)

Vue.config.productionTip = false

new Vue({
  render: h => h(App),
}).$mount('#app')

[/tab] [tab name="components/Pannel.vue"]

<template>
  <div>
    <h1>Nya</h1>
  </div>
</template>

[/tab] [tab name="App.vue"]

<template>
  <div>
    <PannelGol></PannelGol>
  </div>
</template>

[/tab] [/tabs]

组件样式 scoped

吧样式只应用于当前组件，给组件的 <style>加上 scoped会给这个组件的所有元素添加自定义属性，以及当前组件的 CSS 添加交集选择器，只有这个自定义属性的标签才能被样式选中

示例： [tabs] [tab name="App.vue"]

<template>
  <div>
    <h1>MikanpaperYuzu</h1>
    <ChildOne />
  </div>
</template>

<script>
import ChildOne from './components/ChildOne.vue'
export default {
  components: {
    ChildOne
  }
}
</script>

<style>

</style>

[/tab] [tab name="components/ChildOne.vue"]

<template>
  <div>
    <h1>JuziYou</h1>
  </div>
</template>

<script>
export default {

}
</script>
<style scoped>
h1{
  color: orange
}
</style>

[/tab] [/tabs]

组件 name属性

一般使用一些框架会用到，以保证框架的命名风格所以懒得写太清楚（（（ 示例：

[tabs] [tab name="App.vue"]

<template>
  <div>
    <JuziYou />
  </div>
</template>

<script>
import ChildCom from './components/ChildCom.vue'
export default {
  components:{
    [ChildCom.name]: ChildCom
  }
}
</script>

[/tab] [tab name="components/ChildCom.vue"]

<template>
  <div>
    <p>JuziYou</p>
  </div>
</template>

<script>
export default {
  name:'JuziYou'
}
</script>

[/tab] [/tabs]

父向子通讯

在父组件的子组件标签上添加自定义属性，然后在子组件使用 props接收 注: 子组件不能修改父组件传来的 props

示例：

[tabs] [tab name="App.vue"]

<template>
  <div>
    <MyProduct title="勾勾果" price="200" intro="蒙德产勾勾果" />
    <MyProduct title="甜甜花" price="100" intro="蒙德产甜甜花" />
  </div>
</template>

<script>
// 定义局部变量
import MyProduct from './components/MyProduct.vue'
export default {
  components: {
    MyProduct,
  }
}
</script>

[/tab] [tab name="components/MyProduct.vue"]

<template>
  <div>
    <h3>标题: {{ title }}</h3>
    <p>价格: {{ price }}元</p>
    <p>{{ intro }}</p>
  </div>
</template>

<script>
export default
  props: ['title','price','intro']
}
</script>

[/tab] [/tabs]

子向父通讯

在父组件的标签上设置自定义事件组件 @事件名="方法名"，然后在子组件中使用 this.$emit(事件名, 传给父元素的值)触发自定义事件，$emit第二个值之后为返回给父元素的值，在父亲元素接收的方法中对应形参

示例： [tabs] [tab name="App.vue"]

<template>
  <div>
    <MyProduct
        :title="list.title"
        :price="list.price"
        :intro="list.intro"
        @upMora="upFn"
    />
  </div>
</template>

<script>
// 定义局部变量
import MyProduct from './components/MyProduct.vue'
export default {
  components: {
    MyProduct,
  }
  data() {
    return {
      list:{
        title: '勾勾果'
        price: '200'
        intro: '蒙德产勾勾果'
      }
    }
  },
  methods: {
    upFn(num){
      this.list.price = num
    }
  }
}
</script>

[/tab] [tab name="components/MyProduct.vue"]

<template>
  <div>
    <h3>标题: {{ title }}</h3>
    <p>价格: {{ price }}元</p>
    <p>{{ intro }}</p>
    <button @click="$emit('upMora', 1000)">价格改为1000元</button>
  </div>
</template>

<script>
export default
  props: ['title','price','intro']
}
</script>

[/tab] [/tabs]

props校验

校验父模块向子模块传来的数据是否符合需求

[tabs] [tab name="Key:Value"] key是接收值名称，value是接收的类型

export default {
    props:{
        user:String
    }
}

[/tab] [tab name="Key:数组"] 如果需要多个类型，key 是接收者名称，value设置为接收的类型数组

export default {
    props:{
        age: [String, Number]
    }
}

[/tab] [tab name="必传参数"] 如果设置为必传参数将使用完整写法写为对象的形式，type表示接收的类型，required: true来打开必传

export default {
    props:{
        gender:{
          type: String,
          required: true
        }
    }
}

[/tab] [tab name="默认值"] 如果设置默认值将使用完整写法写为对象的形式，type表示接收的类型，default: 值来设置默认值

export default {
    props:{
        salary:{
          type: String,
          default: 'JuziYou'
        }
    }
}

[/tab] [tab name="自定义校验规则"] 如果设置自定义校验规则将使用完整写法写为对象的形式，type表示接收的类型，使用 validator(传过来的值){}它 return出来的值 true和 false来校验通过或不通过，如果 return了 false将会在控制台打印错误

export default {
    props:{
        // 检测传入 list 是否 length 大于 3
        list: {
          type: Array,
          validator(val){
            if(val.length >= 3){
              return true
            }
            return false
          }
        }
    }
}

[/tab] [/tabs]

.sync修饰符

可以让繁琐的父子通讯变得简单在使用.sync修饰符后在子组价使用 update:自定义变量 来更改父组件变量绑定的值就可以完成父子组件的通讯，相当于在父组件的标签上添加了@update:属性名=" 变量名 = $event"，$event 是默认参数

[tabs] [tab name="App.vue"]

<template>
  <div>
    <SyncUpdate :text.sync="name"/>
  </div>
</template>

<script>
import SyncUpdate from '@/components/sync-update.vue'
export default {
  components:{
    SyncUpdate
  },
  data () {
    return {
      name: 'Mikanpapre'
    }
  }
}
</script>

[/tab] [tab name="components/ChildB.vue"]

<template>
  <div>
    <div>{{ text }}</div>
    <!-- 使用 update:自定义变量 来更改父组件变量绑定的值 -->
    <button @click="$emit('update:text', 'Nya')">戳戳</button>
  </div>
</template>

<script>
export default {
  props: ['text']
}
</script>

[/tab] [/tabs]

$parent

$parent可以在子组件获取到父组件的实例

事件总线 EventBus

如果两个子组件通过父组件进行通讯会非常复杂，通过一个空的 Vue 对象当作事件总线常用于跨组件通讯的通用方案，在组件 A 使用 EventBus.$emit('事件名', 值)触发事件，在组件 B 使用 EventBus.$on('事件名', 函数体)监听事件

[tabs] [tab name="EventBus/index.js"]

使用 import Vue from 'vue'引入 Vue 使用 export default new Vue()对外暴露一个 Vue 实例

import Vue from 'vue'
export default new Vue()

[/tab] [tab name="components/ChildA.vue"] 组件 A 触发事件

<template>
  <div>我是A
  <button @click='clickfn'>戳</button>
  </div>
</template>

<script>
import EventBus from '../EventBus'
export default {
  methods:{
    clickfn(){
      EventBus.$emit('mikan')
    }
  } 
}
</script>

[/tab] [tab name="components/ChildB.vue"] 组件 B 监听事件，created()在事件创建时就执行

<template>
  <div>我是B</div>
</template>

<script>
import EventBus from '../EventBus'
export default {
    created(){
      EventBus.$on('mikan', ()=>{
        console.log('喵');
      })
    }

}
</script>

[/tab] [tab name="App.vue"] 在 APP.vue导入两个组件并使用

<template>
  <div>
    <h1>EventBus</h1>
    <ChildA/>
    <ChildB/>
  </div>
</template>

<script>
import ChildA from './components/ChildA.vue'
import ChildB from './components/ChildB.vue'
export default {
  components: {
    ChildA,
    ChildB
  }
}
</script>

[/tab] [/tabs]

ref和 $refs

ref和 $refs通常用于获取元素 DOM 或组件示例，将会挂载到 $refs的组件对象内

获取 DOM

在需要获取的 DOM 元素上 ref="值"然后在 $refs.值使用

<template>
  <div>
    <div ref="juziyou">JuziYou</div>
    <button @click="clickFn">Click</button>
  </div>
</template>

<script>
export default {
  methods:{
    clickFn(){
      console.log(this.$refs.juziyou)
    }
  }
}
</script>

获取组件实例

在需要获取的组件自定义标签上 ref="值"然后在 $refs.值使用

[tabs] [tab name="App.vue"]

<template>
  <div>
    <ChildB ref="childRef"/>
    <button @click="childRefFn">Click</button>
  </div>
</template>

<script>
import ChildB from './components/ChildB.vue'
export default {
  components:{
    ChildB
  },
  methods:{
    childRefFn(){
      console.log(this.$refs.childRef.uname)
      this.$refs.childRef.logName()
    }
  }
}
</script>

[/tab] [tab name="components/ChildB.vue"]

<template>
  <div>
    ChildB
  </div>
</template>

<script>
export default {
  data(){
      return{
          uname: 'JuziYou',
      }
  },
  methods:{
      logName(){
          console.log(this.uname)
      }
  }
}
</script>

[/tab] [/tabs]

$nextTick

由于 Vue 更新 DOM 是异步的，会导致需要在 DOM 更新之后的代码会被先执行，所以需要使用 $nextTick $nextTick接收一个函数作为参数，接收的函数将会在 DOM 更新后执行

如在点击按钮后显示输入框然后获取输入框的 DOM：

<template>
  <div>
    <input type="text" ref="ipt" v-if="isShowInput">
    <button @click="fn" v-else>Click</button>
  </div>
 </template>

<script>
export default {
  data () {
    return {
      isShowInput: false
    }
  },
  methods: {
    fn () {
      this.isShowInput = true
      this.$nextTick(()=>{
        console.log(this.$refs.ipt);
      })
    }
  }
}
</script>

component动态渲染组件

component是 Vue 内置的一个组件用于动态的渲染组件，:is="值"的值是什么就会渲染哪个子组件 [tabs] [tab name="App.vue"]

<template>
  <div>
    <button @click="comName = 'ChildA'">ChildA</button>
    <button @click="comName = 'ChildB'">ChildB</button>
    <component :is="comName"></component>
  </div>
</template>

<script>
import ChildA from './components/ChildA.vue'
import ChildB from './components/ChildB.vue'
export default {
  components:{
    ChildA,
    ChildB
  },
  data(){
    return{
      comName: 'ChildA'
    }
  }
}
</script>

[/tab] [tab name="components/ChildA.vue"]

<template>
  <div>
    <h1>ChildA</h1>
  </div>
</template>

[/tab] [tab name="components/ChildB.vue"]

<template>
  <div>
    <h1>ChildB</h1>
  </div>
</template>

[/tab] [/tabs]

自定义指令

自定义指令分为全局和局部注册，在标签上 v-自定义指令名进行使用

常用的： inserted方法绑定此指令的元素插入到 DOM 时执行 语法为 inserted(形参){} inserted(形参){}第一个形参是绑定此指令的元素，第二个形参为当前自定义指令传入的值

update方法绑定此指令的元素值发生变化时执行 语法为 update(形参){} update(形参){}第一个形参是绑定此指令的元素，第二个形参为当前自定义指令传入的值

[tabs] [tab name="全局注册"] 在 main.js内添加 Vue.directive进行全局注册 语法为 Vue.directive('指令名',{方法})

示例：在 input 标签创建时自动落焦

Vue.directive('focusglo', {
  inserted(el){
    el.focus()
  }
})

[/tab] [tab name="局部注册"] 在组件的 export default内使用 directives{对象}进行局部注册，注册的自定义指令只能在当前组件使用

示例：如 color的值发生变化时重新设置使用了此自定义指令的元素的颜色

export default {
  data () {
    return {
      color: 'orange'
    }
  }
  directives: {
    zy:{
      inserted(el,binding){
        el.style.color = binding.value
      },
      update(el,binding){
        el.style.color = binding.value
      }
    }
  }
}

[/tab] [/tabs]

插槽

插槽插在父组件的两个起始标签和结束标签之间，默认会放到默认 <slot>插槽内 <template>中使用指令 v-slot:插槽名来使用指定的插槽，也可以用 #插槽名来简写，在子组件内的 <slot>通过 name="插槽名"变量的方式来设置插槽名 默认插槽可以使用 <template v-slot="变量名"></template >"来接收传过来的参数，具名插槽可以之间加上等号变量名来接收传过来的的参数 <template v-slot:插槽名="变量名"></template >"，在子组件内的 <slot>通过添加自定义变量名的方式来传参

[tabs] [tab name="App.vue"]

<template>
  <div>
    <!-- 使用組件時在父組件的兩個標簽之間插入 -->
    <MyDialog>
      <img src="https://lovemen.cc/usr/hotlink-ok/avatar.jpg" alt="">
    </MyDialog>
    <MyDialog>
      <!-- <template v-slot:footer> 指定插入footer插槽 v-slot:插槽name -->
      <!-- 在具名插槽下直接加上等號就可以接收，可以在等號内直接解構賦值 -->
      <template v-slot:footer="{yes:okay,no}">
        <button>{{ okay }}</button>
        <button>{{ no }}</button>
      </template>
        <!-- 可以使用#簡寫 -->
      <template #header>
        <h3>溫馨提示</h3>
      </template>
      <!-- 默認插槽透過v-slot="變量名"接收傳過來的，將以對象形式呈現，只能在template内使用 -->
      <template v-slot="obj">
        {{obj}}
        <p>你好，買？</p>
      </template>
    </MyDialog>
  </div>
</template>

<script>
import MyDialog from './components/MyDialog.vue'
export default {
  components:{
    MyDialog
  }
}
</script>

[/tab] [tab name="components/MyDialog.vue"]

<template>
  <div class="my-dialog">
    <div class="header">
      <slot name="header"></slot>
    </div>
    <div class="content">
      <!-- slot表示此處有一個插槽 -->
      <!-- 作用域插槽：通過插槽設置自定義參數傳數據 -->
      <slot uname="MikanpapreYuzu" age="18"></slot>
    </div>
    <div class="footer">
      <!-- name給插槽起名 -->
      <slot name="footer" yes="好捏" no="打咩"></slot>
    </div>
  </div>
</template>

<script>
export default {

}
</script>

<style lang="less" scoped>
.my-dialog {
  width: 400px;
  padding: 10px 20px;
  border: 3px solid #000;
  border-radius: 5px;
  margin: 10px;
}
</style>

[/tab] [/tabs]

路由

npm 默认获取的 vue-router版本为 4，在 Vue2 中需要 vue-router版本为 3 时才可以使用，所以在 Vue2 中需要 @3指定 vue-router安装版本

npm i vue-router@3

路由就是路径和组件间的关系，创建路由的方式有在 main.js创建路由和创建 router文件夹在 index.js中创建路由

在 main.js创建路由

先在 main.js内使用 import VueRouter from 'vue-router'引入 vue-router，然后使用 Vue.use(VueRouter)让 Vue 使用 vue-router插件 const router = new VueRouter(对象)创建一个路由实例，在对象内添加一个 routes数组，这个数组内每个对象都是一个匹配规则，import RouterPage from '@/views/RouterPage'引入组件，router 内的对象 path为设置路由的路径 component为设置路由指向的组件，最后在 new Vue内添加 const 出来的变量名关联到 Vue 实例，匹配到的组件会在 <router-view></router-view>渲染

[tabs] [tab name="main.js"]

import Vue from 'vue'
import App from './App.vue'
import My from '@/views/My'
import Part from '@/views/Part'

// 5 引入组件
import RouterPage from '@/views/RouterPage'
// 1引入vue-router
import VueRouter from 'vue-router'
// 2让Vue使用vue-router插件
Vue.use(VueRouter)
// 3创建路由实例
const router = new VueRouter({
  // 6 routes 是一个数组，此数组里面的每一个对象都是一个匹配规则
  routes:[
    {
      // 7设置路由路径
      path:'/RouterPage',
      // 8 给路径指向组件
      component: RouterPage
    }
  ]
})

Vue.config.productionTip = false

//4 吧路由实例关联router到vue实例
new Vue({
  router,
  render: h => h(App),
}).$mount('#app')

[/tab] [tab name="views/RouterPage.vue"]

<template>
  <div>
    <h1>RouterPage</h1>
  </div>
</template>

[/tab] [tab name="App.vue"]

<template>
  <div>
    <a href="#/RouterPage"></a>
    <div>
      <router-view></router-view>
    </div>
  </div>
</template>

[/tab]

[/tabs]

在 router文件夹中的 index.js创建路由

在 main.js中创建路由不太好，应该每个模块干每个模块的事情 在 src中创建 router文件夹然后在文件夹中创建 index.js，首先在 index.js中使用 import Vue from 'vue'引入 Vue，然后使用 import VueRouter from 'vue-router'引入 vue-router，接着使用 Vue.use(VueRouter)让 Vue 使用 vue-router插件，使用 const router = new VueRouter(对象)创建一个路由实例，在对象内添加一个 routes数组，这个数组内每个对象都是一个匹配规则，import RouterPage from '@/views/RouterPage'引入组件，router 内的对象 path为设置路由的路径 component为设置路由指向的组件，export default router让 index.js对外暴露 router实例，最后在 main.js中使用 import router from '@/router/index.js'引入路由实例再在 new Vue中关联引入的实例 router到 Vue 实例，匹配到的组件会在 <router-view></router-view>渲染

[tabs] [tab name="router/index.js"]

// 1 引入Vue
import Vue from 'vue'
// 5 引入组件
import RouterPage from '@/views/RouterPage'
// 2 引入vue-router
import VueRouter from 'vue-router'
// 3 让Vue使用vue-router插件
Vue.use(VueRouter)
// 4 创建路由实例
const router = new VueRouter({
  // 6 routes 是一个数组，此数组里面的每一个对象都是一个匹配规则
  routes:[
    {
      // 7设置路由路径
      path:'/RouterPage',
      // 8 给路径指向组件
      component: RouterPage,
    }
  ]
})

// 对外暴露路由实例对象
export default router

[/tab] [tab name="main.js"]

import Vue from 'vue'
import App from './App.vue'

// 引入路由实例
import router from '@/router/index.js'

Vue.config.productionTip = false

//4 吧路由实例关联router到vue实例
new Vue({
  router,
  render: h => h(App),
}).$mount('#app')

[/tab] [tab name="views/RouterPage.vue"]

<template>
  <div>
    <h1>RouterPage</h1>
  </div>
</template>

[/tab] [tab name="App.vue"]

<template>
  <div>
    <a href="#/RouterPage"></a>
    <div>
      <router-view></router-view>
    </div>
  </div>
</template>

[/tab] [/tabs]

查询字符串传参

在 to="path"的 path 后面加 ?查询字符串的方式传参，然后在组件内使用 $route.query接收参数会以一个对象的形式接收

比如 <router-link to="/part?uname=JuziYou&ocname=MikanpaperYuzi">橘纸柚</router-link>，在组件内 $route.query将会收到一个对象 {uname:'JuziYou', ocname'MikanpaperYuzi'}

动态路由传参

首先在对应的路径复制一份然后在 path 中的路由加上 /:参数名，然后在组件内使用 $route.params接收参数会以一个对象的形式接收

比如： 一个路由为 /user需要接收一个参数名为 uname（.....省略后面或者前面代码)

..... = new VueRouter({
  routes:[
  .....
  .....
    {
      path:'/user',
      redirect: 'User' 
    },
    {
      path:'/user/:uname',
      redirect: 'User' 
    },
  .....

然后访问比如 localhost:8080/#/user/juziyou，在组件内使用 $route.params将会获取到一个对象 {uname:'juziyou'}

路由重定向以及默认页（404）

在路由实例的 routes中起始位子添加一个匹配规则，匹配规则中 redirect为重定向的路径

如从 /重定向到 /juziyou（.....省略后面或者前面代码)

..... = new VueRouter({
  routes:[
    {
      path:'/',
      redirect: '/juziyou' 
    },
  .....

默认页则在路由实例的 routes中的末尾添加一个 path为通配符 *的一个规则

如前面一个规则也没匹配上返回一个 NotFund页面（.....省略后面或者前面代码)

..... = new VueRouter({
  routes:[
  .....
  .....
    {
      path:'*',
      redirect: 'NotFund' 
    },
  .....

mode 与 base

mode写在路由的实例中有个常用的参数 hash和 history，hash会在 URL 中添加#号，history则不会但是需要后端配合因为会向服务器发送真实路径。 以及可以通过 base 设置基础地址，比如要访问 /user 页面在 hash 模式下是 /#/user 如果在 history 模式下设置了 base 为 /juzi/ 地址就是 /juzi/user

如修改 mode到 history（.....省略后面或者前面代码)

..... = new VueRouter({
  mode: 'history',
  base: '/juzi/'
  .....

router-link声明式导航

声明式导航 router-link是 vue-router提供的一个全局组件，使用 to="path"来跳转路由路径 会给选中的路由自动的加上 class 类名，其分为模糊匹配类名和精确匹配类名，可以在路由实例内通过 linkActiveClas修改模糊匹配类名以及通过 linkExactActiveClass修改精确匹配类名

如通过 router-link转到 path /routerpage

<router-link to="/routerpage"></router-link>

如需要修改精确匹配类名为:juzi，模糊匹配类名为:you 在路由实例内设置的方式（.....省略后面或者前面代码)

...... = new VueRouter({
  linkActiveClass:'you',
  linkExactActiveClass:'juzi',
  ......

编程式传参

通过调用函数的方式使用方法 $router.push，使用 path无法使用 params传参所以推荐使用 name来进行跳转

name

在路由配置中添加 name属性，在编程式导航中如果需要使用 params就得用 name来跳转

路由守卫

路由守卫分为全局路由守卫、路由内独享守卫、组件内守卫

全局路由守卫：对所有路由守卫生效

• beforeEach 路由前置守卫：token 判断
• arterEach 路由后置守卫：进度条关闭

路由独享守卫：对某一条路由进行单向控制

• beforeEnter 路由独享守卫：写在路由配置项内，也有 to from next 只对某条路由规则生效

组件内守卫：针对组件内

• beforeRouterEnter 只要通过路由就会触发
• beforeRouteUpdate: 再次复用了页面，比如主页跳到带 params 的主页，解决 created 只会触发一次的问题
• beforeRouterLeave: 代表离开了页面

全局守卫

所有的路由一旦匹配到规则在真正渲染解析前都会经过全局守卫，只有在全局守卫放行后才能真正渲染页面 在创建实例前先声明一个白名单变量或常量，吧路由(path)以字符串的形式储存在数组中，然后使用router.beforeEach(回调函数)创建路由守卫，在路由解析访问之前都会经过回调函数，回调函数中有三个形参from从哪里来的路由信息对象、to要到那里去的路由信息对象、next是否放行这是一个方法，如果next()表示放行去的页面、next(路径)则表示拦截到的页面，使用whiteList.includes来匹配是否处于白名单

如验证用户是否登录

// 设置白名单
const whiteList = ['/login', '/regisrer']
router.beforeEach((to, from, next) => {
  // 如果有token就放行
  if (this.token) {
    next()
  } else {
    // 如果没有token检查是不是去白名单页面
    if (whiteList.includes(to.path)) {
      // 如果是去白名单直接放行
      next()
    } else {
      // 如果不是去白名单跳转到登录
      next('/login')
    }
  }
})

生命周期

生命周期是 Vue 组件创建到销毁的过程 在特定的时间点执行特定的操作 分四大阶段，八个方法 官方文档

初始化

beforeCreate在组件创建之前会被调用，此状态下无法获取自定义的数据，比如 data中的数据 created会在初始化数据并当前实例代理了数据后执行，一般会在此生命周期钩子中请求服务器数据

挂载

beforeMount无法获取到 DOM 元素因为这个时候还是虚拟 DOM mounted中就可以获取到真实 DOM 了

更新

beforeUpdate在页面使用中的数据发生变时虚拟 DOM 更新之前运行 updated在使用中的数据发生变化时虚拟 DOM 更新到页面后运行

销毁

beforeDestroy在销毁前运行，一般用来解绑一些事件，比如说定时器 destroyed咋子销毁后运行

keep-alive缓存

<keep-alive>是 Vue 内置的全局组件可以吧组件缓存到内存中，使用<keep-alive>被缓存的组件有两个生命周期activated组件被激活deactivated组件被隐藏

vuex

vuex 是 vue 的一个状态（数据）管理工具（也是插件），方便的解决多组件的共享状态，拥有响应式、操作简洁的优势 一般情况下多组件的数据共享会存在 vuex 中

创建仓库

一般为了维护项目的目录整洁会在src目录下新建store目录放置index.js 首先在创建 Vuex 实例然后再在main.js中导入挂载到 Vue 实例上 Vuex.Store()括号内是一个对象 [tabs] [tab name="store/index.js"]

// 引入Vue
import Vue from 'vue'
// 引入Vuex
import Vuex from 'vuex'
// 注册vuex插件
Vue.use(Vuex)
// 创建仓库实例
const store = new Vuex.Store()
// 导出仓库
export default store

[/tab] [tab name="main.js"]

import Vue from 'vue'
import App from './App.vue'
// 引入store
import store from '@/store'

Vue.config.productionTip = false

new Vue({
  // 挂载到 Vue 实例
  store,
  render: h => h(App)
}).$mount('#app')

[/tab] [/tabs]

state

state 提供唯一的公共数据源，所有的共享数据需要放到 state 中储存，可以在任何组件中使用$store.state.键来获取 state 中的数据也可以通过mapState()映射到computed中

[tabs] [tab name="store/index.js"]

import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)

const store = new Vuex.Store({
  // 设置 State
  state:{
    uname: 'JuziYou',
    age: 18
  }
})
export default store

[/tab] [tab name="App.vue"]

<template>
  <div>
    <!-- 直接使用 $store.state.uname 获取 uname 的值 -->
    <p>{{ $store.state.uname }}</p>
    <!-- 直接使用映射计算属性得到的值 -->
    <p>{{ age }}</p>
  </div>
</template>

<script>
// 引入 mapState 
import { mapState } from 'vuex'
export default {
  computed:{
    // mapState() 得到的是一个数组中对应的对象可以使用 ... 展开运算符展开到计算属性中
    ...mapState(['age'])
  }
}
</script>

[/tab] [/tabs]

mutation

state 中的数据只能通过 mutation 修改，用于父组件需要修改仓库中的数据 在 vuex 实例中定义mutation，它是一个对象里面存储修改 state 的方法，每个方法的第一个形参是当前仓库的 state，第二个是传入的参数 可以通过$store.commit('方法', 传参)来调用 mutation 中的方法，传参只能传一个参数如果需要传多个使用复杂数据类型来完成，比如说对象 还可以通过辅助函数mapMutations(数组)的方式使用展开运算符映射到methods中，需要使用this.方法来调用，使用起来和mapState()很像

actions

actions 负责仓库内的异步操作，mutation 只能用于同步更新数据 在 vuex 实例中定义actions，它是一个对象里面存储异步的方法，每个方法的第一个形参拥有仓库实例的所有属性和方法，第二个是传入的参数传参只能传一个参数如果需要传多个使用复杂数据类型来完成，比如说对象 可以通过$store.dispatch('方法', 传参)来调用 也可以通过辅助函数mapActions(数组)来调用使用展开运算符映射到methods

getters

getters 使用仓库 state 中现有的数据计算出新的数据 在 vuex 实例中定义getters，每个方法的第一个形参是当前仓库的 state，必须要有返回值 可以通过$store.getters.方法来调用 也可以通过辅助函数mapGetters(数组)的方式使用展开运算符映射到computed中

module 模块

如果使用单一的index.js项目大后应用会变得非常复杂相对臃肿 在store文件夹中创建一个用于存放模块的文件夹，export default向外暴露键state、mutations、actions、getters值就是它们所需要的值，访问模块中的数据可以直接通过$store.state.模块名.数据键来访问mutations、actions、getters默认情况下全局可以调用，然后在index.js中引入模块并在modules中注册，组件的state以对象的形式挂载到state` 下 [tabs] [tab name="store/data.js"]

export default {
  state: {},
  mutations: {},
  actions: {},
  getters: {}
}

[/tab] [tab name="store/index.js"]

import Vue from 'vue'
import Vuex from 'vuex'
// 引入子模块
import data from '@/store/data'
Vue.use(Vuex)
const store = new Vuex.Store({
  // 使用modules来引入子模块
  // 会将挂载组件的state以对象的形式挂载到state下
  modules:{
    data
  },
})

[/tab] [/tabs]

namespaced 命名空间

开启命名空间后子模块的 mutations、actions、getters 就不会注册在仓库全局，在子模块的export default中添加namespaced: true，开启后$store访问模块内的方法需要模块名/函数名 辅助函数需要在数组前增加模块名如mapState(模块名, 数组)，然后通过this.方法来调用 辅助函数还可以通过加/的方式来使用（如mapState(['模块名/方法名']），在调用方法时得this[模块名/方法名]()来调用

export default {
  namespaced: true,
}

createNamespacedHelpers

createNamespacedHelpers辅助函数会返回一个对象里有mapActions、mapGetters、mapMutations、mapState通过解构赋值和重命名的方式来提取映射 [tabs] [tab name="store/modules/datas.js"]

export default {
  namespaced: true,
  state: {
    uname: 'JuziYou'
  },
  mutations: {
    updateName (state, payload) {
      state.uname = payload
    }
  }
}

[/tab] [tab name="store/index.js"]

import Vue from 'vue'
import Vuex from 'vuex'
import datas from '@/store/modules/datas'
Vue.use(Vuex)
const store = new Vuex.Store({
  state: {
  },
  mutations: {
  },
  actions: {
  },
  getters: {
  },
  modules: {
    datas
  }
})

export default store

[/tab] [tab name="App.vue"]

<template>
  <div>
    <div>{{ $store.state.datas.uname }}</div>
    <button @click="updateUname">Mikanpapre</button>
  </div>
</template>

<script>
import { createNamespacedHelpers } from 'vuex'
const { mapMutations: userMapMutations } = createNamespacedHelpers('datas')
export default {
  methods: {
    ...userMapMutations(['updateName']),
    updateUname () {
      this.updateName('Mikanpapre')
    }
  }
}

[/tab] [/tabs]

Vue3 内容

相比 Vue2 它首次渲染更快、内存占用更少、diff 算法更快、打包体积更小、更好的支持 Typescript 拥有 Composition API 组合式 API，允许 template 存在多个根标签

vite 构建工具

vite 使用原生 ESModule 通过 script 标签动态导入，访问页面的时候加载到对应模块编译并响应，比 Webpack 查找依赖打包所有模块速度更快。在项目打包的时候还是得用打包工具 Rollup 打包成静态资源

运行创建项目：

# 使用 npm
npm create vite@latest
# 使用 yarn
yarn create vite

快速创建

# 使用 npm
npm init vite-app 项目名称
# 使用 yarn
yarn create vite-app 项目名称

Composition API

官方文档 Vue2 通过 data、methods、watch 等配置项编写代码逻辑是选项式 API 写法 Vue3 吧所有逻辑卸载 setup 函数中，使用 ref()、computed() 等阻止代码是组合式 API 写法 组合式 API 可复用可维护

setup

setup 是组合式 API 的入口钩子，作为组合式 API 的起点，它在组件的生命周期 beforeCreate 之前执行，函数中的 this 不是组件实例而是 undefined 如果数据或者函数在 template 中使用需要 return 对象返回

export default {
  setup() {
    const uname = 'JuziYou'
    return { uname }
  }
}

setup 语法糖

Vue3.2 后在 <script> 标签上添加 setup 属性会可以省去默认暴露 export default 和 return 步骤会自动完成，的顶层变量都可以在模板使用数据、函数、组件 在 setup 语法糖中 defineProps 、 defineEmits 、 defineExpose 不需要再引入

setup 语法糖 name 问题

因为使用了 setup 的语法糖后无法使用选项式 API 所以可以使用 vite-plugin-vue-setup-extend 插件来给 <script> 标签上添加属性 name 来解决这个问题，<script> 标签内有内容才能生效

安装插件：

npm i vite-plugin-vue-setup-extend-plus -D

在 vite.config.ts 使用插件

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'

// 引入 vite-plugin-vue-setup-extend-plus
import vueSetupExtend from 'vite-plugin-vue-setup-extend-plus'

export default defineConfig({
  // plugins 中添加 vueSetupExtend() 使用插件
  plugins: [vue(), vueSetupExtend()],
})

然后在 <script> 标签添加 name 属性

<!-- script 标签添加 name 属性 -->
<script setup lang="ts" name="Nya">
  console.log('script 标签内有内容才能生效');
</script>

<template>
</template>

<style scoped>

</style>

ref

从 vue 中导出在 setup 钩子中使用一般传入一个简单数据类型或复杂数据类型，返回一个响应式数据，template外使用 ref 中的数据时需要 .value 调用，它可以定义任意数据的响应式

获取 DOM

从 vue 中导出在 setup 钩子中使用，ref会在onMounted生命周期后获取页面上绑定了与变量名相同 ref 属性的的 DOM 存在 .value 中，第一个参数是如果没有成功获取到 DOM 时的返回值

<template>
  <div ref="Nya">JuziYou</div>
</template>


<script setup>
  import { onBeforeMount, onMounted, ref } from 'vue'
  const Nya = ref(null)
  onBeforeMount(() => {
    console.log(Nya.value)
  })
  onMounted(() => {
    console.log(Nya.value)
  })
</script>

defineExpose

因为使用 <script setup> 的组件是默认关闭的，组件实例无法使用到顶层的数据和函数，需要配合 defineExpose 暴露给组件实例使用，暴露的响应式数据会自动解除响应式。 从 vue 中导出 defineExpose传入一个对象对象中写入需要导出的数据和函数

[tabs] [tab name="components/MyCount.vue"]

<template>
  <h1>{{ count }}</h1>
</template>

<script setup>
  import { ref, defineExpose } from 'vue'
  const count = ref(0)
  const countPlus = () => {
    count.value++
  }
  defineExpose({countPlus, count})
</script>

[/tab] [tab name="App.vue"]

<template>
  <MyCount ref="count" />
  <button @click="addCount">Count++</button>
</template>


<script setup>
  import { ref } from 'vue';
  import MyCount from './components/MyCount.vue';
  const count = ref(null)
  const addCount = () => {
    count.value.countPlus()
  }
</script>

[/tab] [/tabs]

reactive

从 vue 中导出在 setup 钩子中使用， reactive 一般用来定义对象类型的响应式数据不支持简单数据类型，reactive 定义的数据修改不用加 .value 调用，不可以直接对它重新赋值，如果涉及到重新赋值应该使用 ref

toRefs

对 reactive 的响应式数据解构或者展开会失去响应式，使用 toRefs 函数让数据保持响应式， toRefs 会吧对象的每一个属性包装成响应式

<template>
  <div>{{ uname }} · {{ age }}</div>
  <button @click="age++">age++</button>
</template>


<script setup>
  import { reactive, toRefs } from 'vue'
  const person = reactive({
    uname: 'harry',
    age: 28
  })
  const {uname, age} = toRefs(person)
</script>

computed

从 vue 中导出在 setup 钩子中使用，computed 计算函数接收一个函数返回一个计算好的数据，并且和 Vue2 一样有缓存

<template>
  <div>{{ arr }}</div>
  <div>{{ sum }}</div>
  <button @click="pushNum">Push</button>
</template>


<script setup>
  import { ref, computed } from 'vue'
  const arr = ref([1, 1, 4, 5, 1, 4])
  const sum = computed(() => arr.value.reduce((pre, item) => pre + item, 0))
  const pushNum = () => {
    arr.value.push(1)
  }
</script>

watch

从 vue 中导出在 setup 钩子中使用，第三个值是配置项可以省略

单个数据监听

第一个参数是它接听的数据，第二个参数是函数数据发生变化执行的函数，函数中第一个接收值是新值第二个是旧值

<template>
  <div>{{ count }}</div>
  <button @click="numPlus">Plus</button>
</template>


<script setup>
  import { ref, watch } from 'vue'
  const count = ref(1)
  const numPlus = () => {
    count.value++
  }
  watch(count, (newVal, lodVal) => {
    console.log(newVal, lodVal);
  })
</script>

多个数据监听

在 Vue3 中 watch 支持一次监听多个数据，只需要第一个参数传入一个数组。第二个参数是函数数据发生变化执行的函数，函数中第一个接收值是新值第二个是旧值，返回值会是数组的形式

<template>
  <div>{{ count }} · {{ uname }}</div>
  <button @click="numPlus">Plus</button>
  <button @click="newName">NewName</button>
</template>


<script setup>
  import { ref, watch } from 'vue'
  const count = ref(1)
  const uname = ref('JuziYou')
  const numPlus = () => {
    count.value++
  }
  const newName = () => {
    uname.value = prompt('NewName')
  }
  watch([count, uname], (newVal, lodVal) => {
    console.log(newVal, lodVal);
  })
</script>

监听对象的单个属性

只需要第一个参数传入一个对象返回需要监听的属性。第二个参数是函数数据发生变化执行的函数，函数中第一个接收值是新值第二个是旧值

<template>
  <div>{{ user }}</div>
  <button @click="newName">NewName</button>
  <button @click="likePlus">LikePlus</button>
</template>


<script setup>
  import { watch , reactive } from 'vue'
  const user = reactive({
    uname: 'JuziYou',
    like: 0
  })
  const newName = () => {
    user.uname = prompt('NewName')
  }
  const likePlus = () => {
    user.like++
  }
  watch(()=>user.uname, (newVal, lodVal) => {
    console.log(newVal, lodVal);
  })
</script>

深度监听

和 Vue2 相同如果监听的是一个对象中的对象，发生变化后并不会触发，需要开启深度监听，在传入的第三个参数是配置项，在配置项中添加 deep: true 参数

<template>
  <div>{{ user }}</div>
  <button @click="likePlus">LikePlus</button>
</template>


<script setup>
  import { watch , reactive } from 'vue'
  const user = reactive({
    uname: 'JuziYou',
    info: {
      like: 0
    }
  })
  const likePlus = () => {
    user.info.like++
  }
  watch(()=>user.info, (newVal, lodVal) => {
    console.log(newVal, lodVal);
  }, {
    deep: true
  })
</script>

直接监听响应式对象

如果直接监听一个响应式对象时会自动启用深度监听

<template>
  <div>{{ user }}</div>
  <button @click="likePlus">LikePlus</button>
</template>


<script setup>
  import { watch , reactive } from 'vue'
  const user = reactive({
    uname: 'JuziYou',
    info: {
      like: 0
    }
  })
  const likePlus = () => {
    user.info.like++
  }
  watch(user, (newVal, lodVal) => {
    console.log(newVal, lodVal);
  })
</script>

生命周期

Vue3 的组合式 API 中与 Vue2 生命周期相比基本相同多了 on 打头 beforeCreate 与 created 不再需要直接写入 setup 中即可，beforeDestroyed 和 destroyed 变成了 onBeforeUnmount 和 onUnmounted Vue3 中组合式 API 的生命周期函数可以在 setup 中多次调用，谁写在前面执行谁

组件通讯

官网文档

父向子通讯

与 Vue2 基本相同，不同在子组件在 setup 钩子中使用 defineProps 传入一个对象来接收父组件传来的值，如果需要在 script 中使用就接收返回值，如果不需要只在 template 中使用就不用接收

子向父通讯

与 Vue2 基本相同，不同在子组件在 setup 钩子中使用 defineEmits 传入的第一个值是一个数组里面每一项是要触发的父元素绑定的自定义事件名然后接收它的返回值，然后调用接收返回值的常量第一项是父元素绑定的自定义事件名第二项是传参

跨级组件通讯

通过通过 provide 和 inject 函数实习便捷的跨级组件通讯，遵循谁提供由谁修改的原则 provide() 提供给后代的组件依赖或者数据，接收两个属性，第一个值为字符串第二个值为函数或要传递的数据 inject() 接收 provide() 提供给后代的组件依赖或者数据， 第一个值为 provide() 的第一个值（字符串） 详见官方文档

v-model

Vue3 中 v-model 是 :modelValue 和 @update:modelValue 的组合，Vue3官方文档 Vue3 中 v-model:name 和 .sync 相同，相当于绑定了 :name 和 @update:name

Pinia

Pinia 与 Vuex 一样是一个为 Vue 提供状态管理的工具，它与 Vue3 一样支持 选项式API 与 组合式API，它也支持 Vue2 和 Devtools 和 TypeScript 可以创建多个全局仓库，不像 Vuex 一个仓库中嵌套模块解构复杂，而且数据管理比 Vuex 更简单只需要写提供数据和修改数据的逻辑即可，不需要像 Vuex 那样记忆大量 API storeToRefs 可以解决在解构仓库里的数据后失去响应式的问题

[tabs] [tab name="main.js"]

import { createApp } from 'vue'
import './style.css'
import App from './App.vue'
// 1 引入 createPinia
import { createPinia } from 'pinia'

// 2 调用 createPinia()
const pinia = createPinia()

const app = createApp(App)
// 3 注册 createPinia()
app.use(pinia)
app.mount('#app')

[/tab] [tab name="App.vue"]

<script setup>
  // 10 引入 storeToRefs
  import { storeToRefs } from 'pinia'
  // 7 引入存储仓库的js文件中的存储
  import { useCountStore } from './store'
  // 8 使用一个变量存储调用按需引入的存储的返回值
  const store = useCountStore()
  // 11 storeToRefs 解决解构仓库里的数据失去响应式的问题
  const { count } = storeToRefs(store)
</script>

<template>
  <!-- 9 使用它 -->
  <div>{{ store.count }}</div>
  <div>{{ store.squCount }}</div>
  <div>{{ count }}</div>
  <button @click="store.addCont">count++</button>
  <button @click="store.asyncAddCount">asycCount++</button>
  <button @click="store.payloadCount(10)">asycCount+10</button>
</template>

[/tab] [tab name="store/index.js"]

// 4 引入 defineStore 来创建存储库
import { defineStore } from 'pinia'
import { computed, ref } from 'vue'

// 5 defineStore 接收两个参数第一个是名字第二个是函数，函数中 return 出来一个对象里面是你的数据
export const useCountStore = defineStore('count', ()=>{
  // 5.1 定义响应式数据,相当于定义vuex中的state
  const count = ref(0)
  // 5.2 相当于定义了vuex中的getters
  const squCount = computed(()=> Math.pow(count.value, 2))
  // 5.3 定义修改响应式数据的方法,相当于定义vuex中的mutations
  const addCont = () => {
    count.value++
  }
  // 5.4 定义修改响应式数据异步加的方法,相当于定义vuex中的actions
  const asyncAddCount = () => {
    setTimeout(()=>{
      count.value++
    }, 1000)
  }
  // 5.5 接收参数
  const payloadCount = (num = 1) => {
    count.value += num
  }
  // 6 对外暴露它们
  return { count, squCount, addCont, asyncAddCount, payloadCount }
})

[/tab] [/tabs]

只是自己的学习笔记只写了点自己觉得比较重要的内容，因为原本输出的就算 Markdown 所以就博客也发一份了，因为是学了哪一些记了哪一些可能会比较混乱，有错别字请见谅

[file url="https://file.lovemen.cc/NoteBook/JavaScript%E5%AD%A6%E4%B9%A0%E7%AC%94%E8%AE%B0.md"]下载原始文件（不一定同步）[/file]

事件

添加或解绑

使用 addEventListener()添加事件，使用 removeEventListener()解绑事件

const btn = document.querySelector('#button')
function fn(){
    console.log('Hello')
}
btn.addEventListener('click', fn()) // 绑定事件
btn.removeEventListener('click', fn()) // 解绑事件

事件名称

scroll 事件

需要给 window 或者 document 添加此事件，scrollLeft和 scrollTop获取被卷去的大小，是可读写的。document.documentElement HTML返回对象 HTML 的元素，scrollTo()方法可以使用 元素.scrollTo(x, y)来吧页面滚动到指定位置。

resize 事件

在窗口发生改变时会触发次事件

阻止默认行为

使用 preventDefault()方法来阻止默认行为

如：阻止表单提交的默认行为

document.querySelector('form').addEventListener('submit', function (event) {
    event.preventDefault()
})

日期对象

获取时间戳

时间戳是 1970 年 01 月 01 日 00 时 00 分 00 秒起至现在的毫秒数，通常使用将来的时间戳减去现在的时间戳来就行倒计时

使用 getTime() 方法

const date = new Date()
console.log(date.getTime())

简写 +new Date()

console.log(+new Date())

使用 Date.now()

console.log(Date.now())

节点

节点关系和节点查找

父子节点

子元素.parentNode返回最近的一级父级节点，如果找不回返回 null 父元素.childNodes返回所有的子节点，保活文本注释等 父元素.children⭕ 仅获取所有子元素的节点，并且会返回一个伪数组 元素.nextElementSibling获取下一个兄弟节点 元素.previousElementSibling获取上一个兄弟节点

创建/追加/克隆/删除节点

使用 document.createElement('标签名')创建一个节点 如:

const divNya = document.createElement('div')

吧节点插入到父元素最后 父元素.appendChild(要插入的元素) 吧节点插入到父元素之前 父元素.insertBefore(要插入的元素，在哪个元素前面) 元素.cloneNode(布尔值)会克隆出来一个和原标签一样的元素，括号内写布尔值，true时会克隆后代节点，false克隆时不包含后代节点这是默认值 父元素.removeChild(要删除的元素)删除不需要的节点，和 CSS 中 display:none的区别是前者为删除后者为隐藏

本地存储

本地存储有 localStorage和 sessionStorage会以键值对的方式存储，可以在浏览器的 DevTools 的 Application 查看 localStorage能永久的存储在用户电脑本地，关闭页面也不会被删除 sessionStorage在页面关闭时数据将会被删除 .setItem(key, value)存储数据 localStorage.getItem(key)获取数据 localStorage.removeItem(key)删除数据

JSON

JSON.parse(JSON字符串)吧 JSON 字符串转换为对象 JSON.stringify(复杂数据类型)吧复杂数据类型转换为字符串 JSON.parse(JSON.stringify(复杂数据类型))可以完成不含函数的深拷贝，但是有性能问题

location 对象

location 对象拆分保存了 URL 地址的各个部分 location.href获取当前的 URL 地址，如果赋值将会跳转到赋值的 URL 地址 location.search获取地址中的参数 ?后面的部分 location.hash获取地址中的哈希值 #后面的参数 location.reload刷新页面

history 对象

history 对象主要用于前进、后退、历史记录等，实际中用的少 history.back() 后退页面 history.forward() 前进页面 history.go(参数)可以前进或者后退页面正数前进负数后退

局部作用域和全局作用域

作用域规定了变量能够备份访问的范围

局部作用域

只能在函数内部访问不能在外部直接访问，函数执行完毕后一般会被释放

块级作用域

在 {}包裹的代码块中可以使用，外部有可能无法访问，var不能产生块级作用域

全局作用域

全局作用域中声明变量其他任何作用域都可以被访问

作用域链

由作用域串联提供查找变量的机制，就近原则从内往外一级一级查找变量

let a = 1
function nya(){
    let a = 2
    console.log(a); // 就近原则 nya() 中存在变量名'a'打印 2
}
nya()

闭包 ⭕

私有化数据，让外部也能访问内部变量，但会有内存泄漏 通过 return一个函数 function可以是匿名函数不起变量名

function nya() {
    let num = 1
    return function() {
        console.log(num);
    }
}
const nyaw = nya()
nyaw() //控制台打印 1

变量提升

var和 function有变量提升会预解析提升，var只提升变量名不赋值，function提升整个函数，function的优先级比 var高如果同时 function和 var定义一个相同的变量名 function会将 var覆盖

函数中的参数

动态参数

动态参数 arguments是函数内部内置的伪数组，可以通过 for循环递归，在箭头函数中无法使用

function nya(){
    console.log(arguments)
}
nya(1,2,3)
// Arguments(3) [1, 2, 3, callee: ƒ, Symbol(Symbol.iterator): ƒ]

剩余参数

剩余参数使用三个英文句号加变量名 …变量来传参，是真数组，需要写在最后一个参数中，可以在箭头函数中使用，开发中提倡使用

function nya(...nyaw){
    console.log(nyaw)
}
nya(1,2,3)
// [1, 2, 3]

展开运算符

和剩余参数一样使用三个英文句号加变量名 …变量 可以展开为数组可以用于 Math.max等需要数值的地方

let arr = [1,2,3,4,5]
console.log (...arr) // 1 2 3 4 5

This

this 指向函数的调用者，和函数的定义方式关系不大，箭头函数要另算应为箭头函数没有自己的 this 指向

• 函数直接调用，this 会被指向 window，因为函数全局定义默认挂载在 window 所以相当于直接通过 window 来调用
• 函数添加给哪个对象调用 this 就会指向哪个对象，除了 bind 创建的修改 this 指向后的函数
• 通过 new 执行函数此时函数会被当做构造函数处理，this 会被指向示例对象
• 函数通过 call 调用 ，call 的第一个参数是 this 指向，call 的剩余参数为函数的实参
• 函数通过 apply 调用，apply 的第一个参数是 this 指向，apply 和 call 不同的是第二个参数为数组，数组的每一项是调用函数的实参
• 函数通过 bind 调用会获得一个改变 this 指向后的函数需要接收它然后再执行， bind 的第一个参数是 this 指向，第二个参数和 apply 相同是数组，通过 bind 创建的函数它的 this 指向会被永久改变，不会被指向调用者
• 箭头函数没有 this 指向，箭头函数中的 this 指向实际是上下文中的 this

箭头函数 ⭕

可以用来替换匿名函数，箭头函数的语法比函数更加简洁，箭头函数中没 this将会往上级查找

1. 只有一个参数时可以省略小括号
2. 只有一行代码时可以省略大括号以及无需写 return
3. 如果只有一行省略大括号的情况下返回对象或者数组时需要英文括号包裹
4. 箭头函数中没有 arguments但是有剩余参数，使用三个英文句号加变量名 …变量名
5. 箭头函数中没有自己的 this会沿用上一层的 this

解构赋值 ⭕

快速批量赋值给变量的简洁语法

数组解构

遵循一一对应原则，变量如果大于单元数量时，会返回 undefined。可以直接在[]内赋值，可以使用剩余参数吧多余的数组内的单元返回赋值给变量名

基本语法

将会把左侧的数组中的单元赋值给右侧的 []变量名

let [a, b, c] = [114,514,1919] // a = 114 b=514 c=1919

多级

根据一一对应原则如下

let [a, b, [c]] = [114,514[1919]] //a = 114 b=514 c=1919

数组交换

开头必须加分号结束符

let a = 1
let b = 2
;[b,a]=[a,b]
console.log(a,b); // 2 1

对象解构

对象中找不到变量名一致的属性名时返回 undefined

基本语法

吧左侧对象中的属性名赋值给右侧 {}的变量名

let {userName} = {userName:'橘纸柚'}

多级

多级对象中嵌套和数组解构差不多使用冒号':'来连接

let {userName,site:{blog}} = {
    userName: '橘纸柚',
    site: {
        blog: 'lovemen.cc'
    }
}

更名

如果数组中的变量名已经被占用可以使用英文冒号进行更名

let {userName:MyName,site:{blog:BlogUrl}} = {
    userName: '橘纸柚',
    site: {
        blog: 'lovemen.cc'
    }
}

逻辑短路

如果左边短路右边的代码就不执行

&&左边为 false 就短路 ||左边为 true 就短路

创建对象的三种方法

字面量

通过字面量来创建对象，这是最常用的方法

const obj = {uname: '橘纸柚'}

new Object()

通过 new Object()来创建函数，通过字面量创建时也会经过 new Object()

const obj = new Object({uname:'橘纸柚'})

构造函数 ⭕

构造函数是一种特殊的函数，主要用来初始化对象，可以理解为是一个对象的模板可以用来创建多个类似的对象。JavaScript 实现面向对象需要借助于构造函数，直接创建方法存在浪费内存的问题。

声明构造函数

构造函数推荐驼峰命名法首字母开头大写用于与普通函数的区分，构造函数里的 this指向实例对象。推荐键的取名和形参相同。

function Nya(uname,age){
    this.uname = uname;
    this.age = age;
}

使用

称之为实例化对象，构造函数通常和 new一起使用，实参的使用方法和普通函数一样没有传入实参则 undefined

function Nya(uname,age){
    this.uname = uname;
    this.age = age;
}
const juzi = new Nya('JuziYou',18)

成员

实例对象的成员称为实例成员，只有实例对象可以使用 构造函数的成员称为静态成员，只有构造函数可以使用

function Nya(uname,age){
    this.uname = uname;
    this.age = age;
}
const juzi = new Nya('JuziYou',18)
Nya.baka = 'YES'
console.log(juzi.baka) // undefined
console.log(Nya.baka) // YES
console.log(Nya.uname) // undefined

原型对象 ⭕

prototype是每一个构造函数都有的一个属性指向了一个对象称为原型对象，在原型中构造函数和实例中的 this 指向实例化对象。原型是所有当前构造函数 new出来的对象的方法，可以吧那些不变的方法都放在里面节省内存

function Nya(uname,age){
    this.uname = uname;
    this.age = age;
}
Nya.prototype.say = function(){
    console.log('Nya!');
}
const juzi = new Nya('JuziYou',18)
juzi.say() // 将会在控制台打印 Nya!

内置构造函数

其中的 Boolean、String、Number既是包装类型又是方法

Object

Object是内置构造函数通常用于创建对象，不过推荐使用字面量来创建对象

PS: Object.prototype.toString.call(对象) 可以获取一个对象的数据类型

for(let key in obj){}

for(let key in obj){}用于遍历对象，'let key'的'key'为成员的键值，'obj'是目标数组

Object.keys

Object.keys(obj)将会返回一个真数组

const nya = {
    name: 'JuziYou',
    age: 18
}
console.log(Object.keys(nya)); // ['name', 'age']

Object.values

Object.values(obj)将会返回一个真数组

const nya = {
    name: 'JuziYou',
    age: 18
}
console.log(Object.values(nya)); // ['JuziYou', 18]

Object.assign

Object.assign(obj,{key:value})常用于数组拷贝也可以用于成员的添加

const nya = {
    name: 'JuziYou',
}
const nya2 = {
    age: 18
}
console.log(Object.assign(nya,nya2)); // {name: 'JuziYou', age: 18}
console.log(Object.assign(nya,nya2,{baka:'YES'})); // {name: 'JuziYou', age: 18, baka:'YES'}

Object.create

MDN文档 根据现有的对象 A 来创建一个 prototype 为对象 B 的对象，新对象 A 的 prototype 拥有所有对象 A 的属性和方法，一般只用一个参数就是传入对象 A

// 示例 一个对象需要数组的 prototype
const newObj = Object.create(Array.prototype)

Object.setPrototypeOf

MDN文档 用于修改对象的 prototype 指向，第一个参数是需要修改的对象，第二个参数为指向的 prototype

// 示例 一个对象 prototype 需要指向到数组的 prototype
const obj = {}
Object.setPrototypeOf(obj, Array.prototype)

Array

Array是内置的构造函数用于创建数组，不过推荐使用字面量创建数组

Array.from()

Array.from()可以将为数组转换为数组，转换对象必须带 length。length如果小于数量将会略去后面的，如果多余数量将会写入 undefined

Array.isArray

判断一个对象是否为数组，返回一个布尔值

Array.isArray([]) // true
Array.isArray({}) // false

reduce

reduce返回函数累计处理的结果通常用于求和等

索引号和原数组为可选变量。起始值如果不写将会使用数组的第 0 个值并且从第二个值开始遍历

arr.reduce(function(累计值prev, 当前元素item, 索引号index, 原数组original){}, 起始值)

forEach

forEach用于遍历数组，不会返回，通常用于遍历、输出、打印值。索引号和原数组为可选变量

arr.forEach(function(当前元素item, 索引号index, 原数组original){})

filter

filter用于遍历筛选数组，return会返回值可以声明一个变量接收。索引号和原数组为可选变量

arr.filter(function(当前元素item, 索引号index, 原数组original){})

map

map用于迭代数组，经常用于处理数据，return会返回值可以声明一个变量接收。索引号和原数组为可选变量

arr.map(function(当前元素item, 索引号index, 原数组original){})

join

join用于吧数组转化为字符串。索引号和原数组为可选变量

let arr = [1,2,3,4,5]
console.log(arr.join('')) // 12345
console.log(arr.join('/')) // 1/2/3/4/5

find

find将会查找符合条件的第一个元素，如果找不到将会返回 undefined。比如数组 [1,1,4,5,1,4]查找 4将会循环到下标 3 的 4 后结束，查找 9将会返回 undefined

arr.find(function(元素值、元素的索引，原数组){})

some

some将会检查数组中是否有任意一个符合条件返回布尔值，不符合将会返回 false符号将会返回 true。

arr.some(function(元素值，元素的索引，原数组){})

every

every将会查找数组是否都符合条件返回布尔值，不符合将会返回 false符号将会返回 true。

arr.every(function(元素值，元素的索引，原数组){})

sort

sort比对重排数组，返回后会直接重排数组

比如：a和 b为对比的两个值

arr.every(function(a,b){return a - b})

at

at 接收一个整数为参数可以是正整数也可以是负整数，正整数与下标获取相同，负整数从 -1 开始从数组中最后一个元素开始

const arr = [1,2,3,4,5]
console.log(arr.at(0)) // 1
console.log(arr.at(-1)) // 5

String

1. length获取字符串的长度，如 'JuziYou'.length将会得到 7
2. split(分隔符)将会吧字符串转换为数组，如 'Neko_Nya'.split('_')将会得到数组 ['Neko','Nya'],如果分隔符为空字符串 ''将会吧每个字符转换为数组，如 '橘纸柚'.split('')将会得到数组 ['橘','纸','柚']
3. substring(起始索引,结束索引)用于字符截取，如 '123456'.substring(2,4)将会截取字符串 34。如果只有一个参数将会截取起始索引之后的全部字符如 '123456'.substring(2)将会得到字符串 3456
4. startsWith(检测字符串,检测位置索引号)用于检测是否为某串字符开头，检测位置索引号为可选项将会从此索引号开始检测忽略之前的，将会返回布尔值。
5. includes(搜索字符串,检测位置索引号)判断一个字符串是否包含在另一个字符串中，检测位置索引号为可选项，将会返回布尔值

Number

toFixed(保留字符串位数)设置保留小数位的长度，如设置为 2将会保留两位，四舍五入

Ajax

常见状态码

Axios

Axios 是一个基于 promise 的网络请求库，可以方便的完成 ajax 请求 官方文档地址：https://axios-http.com/zh/docs/intro

基地址

axios.defaults.baseURL设置基地址

axios.defaults.baseURL = 'https://api.uuz.bid'

常用写法

method设置请求方式如 GET、POST url设置请求地址如果设置了基地址直接写地址即可如 /api/nya/api/nya method为 GET时使用 params写请求参数 method为 POST时使用 data写请求参数 headers设置请求头

如：

axios({
    method:'GET', // 发送GET请求
    url:'/userdata', // 请求地址（设置了基地址）
    params:{
      uname: userName // 发送载荷
    },
    headers: {
      Authorization: token // 服务器需要Authorization请求头验证token
    }
}).then(res=>{
    console.log(res.data); // 没有错误
}).catch(err=>{
    console.log(err); // 有错误
})

XMLHttpRequest()

这是原生的 Ajax 方式，不过实际中都用请求库比较多所以就简单记一下 MDN 传送门：https://developer.mozilla.org/zh-CN/docs/Glossary/AJAX

const xhr = new XMLHttpRequest() // NEW 一个 XMLHttpRequest()
xhr.open('GET','https://api.uuz.bid/random/?json=y') // GET请求数据
xhr.onload = function(){ //准备接受数据
    console.log(xhr.responseText); //打印返回的数据
}
xhr.send() //发送请求

Promise

Promise是一个构造函数，可以通过 new创建一个 Promise实例对象，代表一个异步的操作

语法

Promise构造函数包含一个参数带有两个回调值 resolve（解析）和 reject（拒绝） 如果正常则调用 resolve，否则调用 reject

const np = new Promise((resolve, reject) => {})

.then()方法用来预先指定成功和失败的回调函数，失败的回调函数为可选 return的返回值可以是Promise对象也可以是具体的值，但是都会被处理成Promise方便后面的链式调用 形参resolve()和reject()的传参将会传到.then()里的函数内 .catch()捕获错误，参数为一个函数回调值err（错误）

如：

const np = new Promise((resolve, reject) => {
    resolve('juzi')
}).then(
    res=>{
        console.log(res) // 控制台打印juzi
        return 'Nya'
    }
).then(
    res=>{
    console.log(res) // 控制台打印Nya
}
).catch(err=>{
    console.log(err)
})

中断 Promise 链

直接 return new Promise(()=>{})返回一个初始的 Promise 实例

Promise.all()

回并行发起 Promise 异步操作，全部的操作结束后才会下一步的 .then()

const promiseAll = [
   axios({method: 'GET',url: 'XXXXXX'}),
   axios({method: 'GET',url: 'XXXXXX'}),
   axios({method: 'GET',url: 'XXXXXX'})
]
Promise.all(promiseAll).then(res => {
    console.log(res)
}).catch(err => {
    console.log(err)
})

Promise.allSettled

和 Promise.all 差不多，只不过它无论成功失败都会返回一个成功状态的 Promise

Promise.race()

回并行发起 Promise 异步操作，只要有任意一个返回了值就立即进入下一步 .then()

const promiseAll = [
   axios({method: 'GET',url: 'XXXXXX'}),
   axios({method: 'GET',url: 'XXXXXX'}),
   axios({method: 'GET',url: 'XXXXXX'})
]
Promise.race(promiseAll).then(res => {
    console.log(res)
}).catch(err => {
    console.log(err)
})

Promise.any

和 Promise.all 差不多，它可以获取到异步处理成功最快的那一个

async await

async await 相当于是 Generator 的语法糖，它可以解决回调地狱问题，写起来也比 Promise更清楚，await必须在 async的函数内，错误需要使用 try catch 来获取

• async 相当于修饰 await 就近的函数，被 async 修饰的函数会变成一个 Promise，如果内部 return 一个数据也会被 Promise 包装 resolve
• await 一般用于修饰 Promise 如果不是就会吧后面的内容包装为 Promise 的 resolve，下面的代码相当于放在了 .then 的成功回调中，所以 await 相当于微任务

// 比如await从API里取用户数据并打印
(async () => {
    const userData = await axios({
        method: 'GET',
        url: '/user',
        params: {
            user: 'JuziYou'
        }
    })
    try {
        console.log(userData.data)
    } catch (err) {
        console.log(err.response.data.message)
    }
})()

Generator

Generator 是 ES6 的，作用是将函数暂停交出控制权，是一种异步的解决方案 async await 相当于是它的语法糖，只要在函数声明和函数名中间加 * 那就是一个 Generator 函数，会在函数内的 yield 暂停它的返回值是外面调用 .next() 传入的值， yield 后跟随的值会被传出去到 .next() 返回值的 value，需要一个常量接收函数返回的 Generator 实例，然后使用 常量名.next() 就会向下执行，可以通过返回值的 done 确认是否完成

第一份工作啊，真的没什么好找的，我住的这破地方虽然叫 “中国电器之都” 也没什么愿意招没有实际操作经验的电商部的公司。可能是吴总看我学习经历写温州大学吧所以要了，然后就第一份工作月薪 3200 没提成的死工资，这可能就是导致后来发生变化的主要原因吧。 公司离我家就 6KM 远天天开着我的小电驴上下班而且技术部只要客户不催几乎没有加班八点上班六点下班，摸一摸一天也就过去了，挺咸。虽然他们也算是个互联网企业，但是我所在的技术部其实工作节奏平时都挺佛系的，所以可以经常看到我在水推水群，只要不碰上有坑的客户一切都好说。同事也很好天天有说有笑的。 我的工牌上印着 “前端设计师” 前端设计到哪里去了呢？平时更多客户资料我整理录入，名片、工牌、海报、宣传物料也是我设计打印机、电脑也是我修，部分页面 HTML 和 CSS 也是我写，我觉得应该给我改成 “全干工程师” 更适合。标题 banner 背景图就是我的夹带私货~ 最后不过不得不吐槽一下您乐还自己开了个和温州人才网单独运行的人才网让我找工作转了不少弯路。 为什么要离职呢，就是因为我父上大人觉得就 3200 的死工资太少了，然我继续去学习几个月，我说不过他然后就从咯。总之变化总比计划快，挺对不起吴总的，两个月前跟他说 “干到年底没问题” 没想到变化那么快才两个月多点刚转正就提了离职。

然而本应很快结束的毕业照拍摄因为摄影师给堵在校外进不来需要等，于是我开始打听起了约车小面和中面选哪一个，因为博主有很多东西要带回家，父母也没空上来接，好在家比较近就二十千米所以直接跟车貌似也是划算的选择。突然时间还多于是我就开始了整活，套上了早上从宿舍带来了假发，和同学相互迫害，拍下了在这读了几年大学第一次和女同学的主动合照。 在两个小时后摄影师终于来了，给我们拍了一张集体照。然后学校给了我们一个毕业礼物，终于可以回到寝室收拾回家了。 走出教室预约了十二点的中面，骑上电瓶车赶快回去搬行李，因为疫情防控不让开进寝室需要提前搬到宿舍区门口，赶快回去提前搬出来等车来。 到了宿舍区先去小卖部买了一包燕麦酥和元气森林补一下早饭，回到宿舍楼交钥匙退押金，室友和同学帮忙吧我要带回去的一堆行李和两辆电瓶车一起运出了宿舍区，我应该是全班第一个走的吧，回到寝室呆了十多分钟就跑了。 早点...也好，浪费了两年的时光呢，那也去不了甚至最后一学期连学校都出不了，本想着大学最后这两年应该没什么课，确实没什么课，好好玩玩，玩什么那也玩不了，也就在寝室天天摸摸鱼划划水也没做什么事浪费过去了。交到了很多网友想毕业了就可以见面呢，不过目前的状况毕业了也见不了欸。 总之结束了，无趣的校园生活，来也匆匆去也匆匆。

首先我吐槽下这破学校，如果是自己找工作就给我二十几天你让我去哪里找这相关工作？只好老老实实跟着学校的安排，就很 GaN。

10/28

中午收拾了一下学校的寝室，带着我的鲨鲨冲锋！下午来到了公司第一印象还好，打扫完寝室发现宿舍有给厨房，没有吧学校宿舍里的锅带过来失算了。 然后晚饭去了食堂，哦我的上帝这菜煮的太糟糕了！您司食堂的盐和辣椒好似不要钱，这菜真是又咸又辣，点了两盘靠北就那一盘金瓜我还能勉强吃吃。 最后补给了一点点零食摸了一会儿鱼这一天结束了~

10/29

您司早饭其实还行比晚饭午饭清淡多了呢~ 然后去了会议室做了入职登记，下午去了仓库电商仓主管和我们说了接下来要做什么，总结就是好好搬砖嘛~ 然后参观了一下自动化还没做完的电商仓。

10/30~31

上岗培训，搬砖嘛这还需要什么培训，挺轻松的没什么好说就那样。然后我感冒了，靠北哦还没怎么上班就先花了一百多看感冒，这边的医院也真滴坑。陪我一起去看病的同学也说这医院视钱如命。给我开了一堆药然后我只买了平时我感冒常吃的药，如果药店可以买感冒药就没这点破事了。

11/01~02

双十一第一波来啦！相比前两天培训，强度一下子就上来咯。虽然公司给包饭吧，但是这食堂的菜盐跟不要钱一样，狗看了都摇摇头。A 区和 F 区那箱子堆得比我还高还得爪巴爪巴才能拿到，一直干到了十一点才下班，和朋友去十足坑的十足买了便当。十月二号也差不多，不过明天就调到退货仓去摸了所以今天没什么干劲明天继续努力。

11/03~08

我来到了退货仓，哦一下子强度又下来了。耍了一早上美工刀拆快递，不过玩刀一时爽不要乱飞啊！退货仓这边的食堂很棒味道刚刚好，还有下午茶时间给的还是小饼干可乐雪碧还有一次是 KFC，我还能玩一小会儿 Switch 哦这可太行了。晚上回到寝室就我和另外一个室友其他同学都在发货仓加班，退货仓唯独加班两次还只加班两个小时到点立马下班不管还有没有未处理。

11/09~10

经过了退货仓 5 天的修身养性（大雾）双十一当天还是要回到发货仓的。所以九号和十号我调休，虽然说退货仓强度没那么高，但是还是累的，所以我申请休息了两天，在公司边上逛逛，就这样愉快的摸了两天。公司边上的猫猫真可爱！

11/11

这可能是我作息最不规律的一天，因为我调班成了夜班，当然不是那个夜班这里的夜班是指 0 点到 8 点然后 20 点到 23 点反正加班是跑不了的（毕竟发货仓）。不过红牛管够，虽然这种饮料喝完后我喉咙超级难受我也不太想喝就是了只拿了一瓶然后买了瓶咖啡，早饭哇那个包子吃完我胃难受到下班，太油了。不过今天发货仓的饭菜还不错，辅导员给我们送了一些华莱士（草）。而且今天有可爱的工贸学院的同学在我滴天哪货乱拿，经常我要拿货的地方空着我货呢？？？加班结束后买了瓶健力宝和一包三明治。

11/12~14

双十一结束后第一天我给调到了流水线看机器有没有出 BUG 按急停了等师傅过来“debug（物理）”。然后第二天我就去继续分拣货物，一直干到了 14 号也没什么意思就这样吧

11/15

今天不上班，终于可以滚蛋了，整理了一早上的寝室内务。中午去退货仓食堂吧饭卡里的钱全刷完，然后去发货仓的食堂吧那边饭卡的钱全刷完，刷了不少饮料带走。下午三点到了学校，还好机智的我吧电瓶车停在了教室里不用慢慢拎着行李回去，到了寝室后整理学校的寝室，然后电脑给室友震刀了我在床上躺鱼。

最后吐槽

我天天搬砖什么还得天天写实习日志和一篇大的实习总结？您让我怎么写？“日志：搬砖，反思：累”？还要拍 Vlog？我都那么累那么忙了每天生活基本重复的拍什么，还一天一个？我能给你剪一个总的就不错了欸！ 我他喵硬挤出来也不够只好加一堆狗屁不通文章生成器的内容塞在里面...（大雾） 还有作业我服了，我上班累死了，回来还得写两篇期中作业小论文，有毒吧？我 Switch 都不想碰了还让我写论文您？

抱歉咕咕了那么久本来想在实习总结大会结束后再发的，但是学校一直拖，我好不容易肝好的总结结果三四周了还不用交。本想阴阳怪气的，但是没意义算了吧。然后贵司都把我们工资调低了说给我们算完就发都快一个月了您司居然工资还没发，草（双语）