Cain的个人网站

用GPT学英语--第一课

Sat, 10 Oct 2026 01:45:42 GMT

用GPT学英语--第一课

Lesson 1 — Parts of Speech & Sentence Elements

今天先不讲复杂的语法规则，只解决三个问题：

什么是词性？
什么是句子成分？
为什么有些句子需要 am、is、are，有些却不需要？

理解这三个问题之后，就能开始真正分析英语句子的结构了。

一、什么是词性？

先看几个中文词语：苹果、吃、漂亮、我。

它们属于不同的类别：

苹果：表示一种事物。
吃：表示一种动作。
漂亮：描述事物的特点。
我：用来指代一个人。

英语也是一样的。所谓词性，就是根据单词的语法性质和用途，把单词分成不同的类别。

英语中有多个词性，今天先学习最重要的四种。

1. 名词（Noun，缩写 n.）

名词就是表示人、事物、地点或抽象概念的词。

英语	中文
apple	苹果
student	学生
school	学校
English	英语
happiness	幸福

例如：

text

I like apples.
我喜欢苹果。

这里的 apples 就是名词。

2. 动词（Verb，缩写 v.）

动词一般用来表示动作或者状态。

英语	中文
eat	吃
run	跑
study	学习
like	喜欢
know	知道

例如：

text

I study English.
我学习英语。

这里的 study 就是动词。需要注意，动词不一定表示身体上的动作，例如 like（喜欢）、know（知道）也属于动词。

3. 形容词（Adjective，缩写 adj.）

形容词主要用来描述人或者事物的特点、性质和状态。

英语	中文
happy	开心的
beautiful	漂亮的
difficult	困难的
good	好的
important	重要的

例如：

text

English is difficult.
英语很难。

其中 difficult 就是形容词。

4. 代词（Pronoun，缩写 pron.）

代词可以用来代替名词或名词短语。

英语	中文
I	我
you	你
he	他
she	她
it	它
we	我们
they	他们

例如：

text

He is a student.
他是一名学生。

这里的 He 就是代词，因为它可以用来指代某个男性，而不必每次都说出他的名字。

二、什么是句子成分？

这是今天最重要的知识。先区分两个概念：

词性：一个单词属于什么类别。
句子成分：一个单词或词组在句子中承担什么作用。

这两个概念完全不同。可以这样理解：

假设我们正在拍电影。一个人的身份是「学生」，但他在电影中扮演的角色可能是「警察」。那么词性就相当于他的身份，句子成分就相当于他在电影中扮演的角色。

来看一道题：

text

I like apples.
我喜欢苹果。

拆解如下：

单词	词性	句子成分
I	代词	主语
like	动词	谓语
apples	名词	宾语

可见，词性与句子成分不是同一个概念。

那么什么是主语、谓语、宾语？

1. 主语（Subject）

主语通常表示句子主要在谈论谁或者什么。

text

12345678

I like apples.
是谁喜欢苹果？是 I（我）。
所以 I 是主语。

Tom studies English.
汤姆学习英语。
是谁学习英语？是 Tom。
所以 Tom 是主语。

2. 谓语（Predicate）

在目前学习的简单句中，可以先重点理解「谓语动词」。它表示主语的动作或者状态，是句子的重要核心。

text

12345

I eat apples.
这里 eat 就是谓语动词。

She likes music.
这里 likes 就是谓语动词。

不过要注意：严格来说，英语语法中的完整谓语和谓语动词不是完全相同的概念。现阶段先学会识别谓语动词即可。

3. 宾语（Object）

宾语通常表示动作涉及的对象。

text

1234567

I eat apples.
吃的是什么？苹果。
所以 apples 是宾语。

I love English.
喜欢什么？英语。
所以 English 是宾语。

现在你已经理解了英语中非常常见的句子结构：

主语 + 谓语动词 + 宾语，也就是 Subject + Verb + Object（SVO）。

主语	谓语动词	宾语
I	like	music
She	studies	English
He	plays	football
We	eat	apples

不过，并不是所有英语句子都有宾语，这就涉及今天的第三个问题。

三、为什么 I am happy 需要 am，而 I like music 不需要？

分析这两个句子。

句子①：I like music.

先看三个单词：

I：代词
like：动词
music：名词

所以这个句子的结构是：主语 + 谓语动词 + 宾语。这里的 like 本身就是动词，因此不需要再添加一个 am。

句子②：I am happy.

先看其中两个单词：

I：代词
happy：形容词

注意：happy 是形容词，而不是动词。如果直接写成：

text

❌ I happy.

这句话在标准英语中是不正确的。因为英语中的普通陈述句通常需要一个能够充当谓语核心的动词，而 happy 只是形容词。

这时候就需要使用一个特殊的动词：be 动词。

text

123

I am happy.
She is happy.
They are happy.

这里的 am、is、are 都属于 be 动词的不同形式。在这些句子中，它们属于系动词（Linking Verb），作用是将主语与描述主语的部分联系起来。而 happy 在句子中充当表语（Predicative）。

因此 I am happy 的结构是：主语 + 系动词 + 表语，简称主系表结构。这也是英语中非常重要的基本句型。

对比一下

句子	结构
I like English.	主谓宾
I am happy.	主系表
She studies English.	主谓宾
She is beautiful.	主系表
He plays football.	主谓宾
He is a student.	主系表

注意：第一类句子中，like、study、play 本身就是谓语动词；第二类句子中，am、is、are 是系动词，后面通过形容词或名词短语等来说明主语的状态、特征或身份。

另外，不是所有主系表结构都必须使用 be 动词，例如 I feel happy（我感到高兴）中的 feel 也可以作系动词。这个以后详细讲。

四、顺便纠正两个理解

关于第三人称单数

因为 he、she 要加第三人称单数，所以用 plays。

理解方向是对的，但表达还不够准确。更准确地说：在一般现在时的肯定句中，当主语为第三人称单数时，谓语动词通常需要使用第三人称单数形式。

text

I like English.   →   He likes English.
I study English.  →   She studies English.

但要注意，不是任何情况下都加 s，例如：

text

He can play football.

这里 play 就不能变成 plays，因为前面已经有情态动词 can 了。这些规则后面会专门学习。

关于三个时态

① I study English. —— 我学英语。
② I am studying English. —— 我正在学习英语。
③ I studied English. —— 我学过英语。

前两句基本正确，第三句需要稍微纠正。

I studied English. 使用的是一般过去时，通常表示过去某个时间学习了英语，可以理解为「我过去学习过英语」。但如果想表达「我有过学习英语的经历」，有时使用 I have studied English. 更合适。两者区别在于是否侧重过去发生的事情，还是过去经历与现在的联系。

现阶段只需先理解：

study：一般现在时
am studying：现在进行时
studied：一般过去时

现在完成时以后再深入学习。

📝 第一课随堂练习

这次只有四道题，难度不高，重点检查是否真正理解了词性和句子成分的区别。

第1题：分析单词

观察句子：She likes apples.

① She 的词性是什么？句子成分是什么？
② likes 的词性是什么？句子成分是什么？
③ apples 的词性是什么？句子成分是什么？

第2题：判断句子结构

下面两个句子分别属于「主谓宾」还是「主系表」结构？

① He is a teacher.
② I love music.

第3题：找出错误

下面的句子有一处语法错误：She beautiful. 请尝试修改，并解释为什么原句是错误的。

第4题：尝试自己造句

分别使用下面两种结构，各写出一个简单的英语句子：

① 主语 + 谓语动词 + 宾语
② 主语 + 系动词 + 表语

我的作答与批改

第1题：完全正确 ✅

原句：She likes apples.

单词	词性判断	句子成分判断	结果
She	代词	主语	✅
likes	动词	谓语	✅
apples	名词	宾语	✅

第2题：完全正确 ✅

① He is a teacher. → 主系表 ✅（He：主语；is：系动词；a teacher：表语）

② I love music. → 主谓宾 ✅（I：主语；love：谓语动词；music：宾语）

第3题：修改正确，但解释需要纠正 🟡

原句：❌ She beautiful.

修改：✅ She is beautiful.

修改完全正确，但解释「主语后面不能直接跟宾语，需要系动词连接」存在概念错误：beautiful 不是宾语，而是表语。

句子	拆解
She likes music.	She：主语；likes：谓语动词；music：宾语（动作涉及的对象）
She is beautiful.	She：主语；is：系动词；beautiful：表语（描述 She 的特征）

所以需要记住：宾语通常表示动作涉及的对象，而表语用来说明主语的身份、性质或状态。

为什么不能直接写 She beautiful？因为 beautiful 是形容词，不能独立充当这个句子的谓语，需要通过 is 这样的系动词构成完整的句子。

另外补充一个容易混淆的知识：表语不一定是形容词，也可以是名词或名词短语。

text

She is beautiful.   （表语是形容词）
She is a teacher.   （表语是名词短语）

虽然表语的词性不同，但它们都属于主系表结构。

第4题：有一个小错误

① 主谓宾：I like football. ✅

单词	词性	句子成分
I	代词	主语
like	动词	谓语
football	名词	宾语

② 主系表：She is student. ❌

正确表达：✅ She is a student.（她是一名学生。）

主系表结构用对了：She（主语）+ is（系动词）+ a student（表语）。但 student 前面需要加一个 a，这涉及英语中非常重要的知识：冠词（Article）。

冠词包括 a、an、the。其中 a 和 an 经常放在单数可数名词前面：

text

123

She is a student.   （她是一名学生。）
He is a teacher.    （他是一名老师。）
It is an apple.     （它是一个苹果。）

但如果后面是形容词，就不需要加 a：

text

✅ She is beautiful.
✅ She is a student.

因为 beautiful 是形容词，而 student 是名词。这是以后学习冠词时需要重点掌握的内容。

📊 第一课学习总结

知识点	掌握情况
名词、动词、形容词、代词	✅ 初步掌握
主语、谓语、宾语	✅ 掌握较好
主谓宾结构	✅ 掌握
主系表结构	✅ 基本掌握
宾语和表语的区别	🟡 需要巩固
冠词 a、an、the	🟡 尚未系统学习

第一课到这里就结束了。需要记住今天最重要的两个概念：

词性决定单词属于什么类别，句子成分说明单词在句子中承担什么作用。

在后面的课程中，会不断使用这两个概念。下一课准备学习：Lesson 2：be 动词与实义动词——为什么英语有时候用 am/is/are，有时候却直接使用 like、study、play？

LeetCode 146. LRU缓存

Thu, 17 Sep 2026 16:00:00 GMT

LeetCode 146. LRU缓存

请你设计并实现一个满足 LRU (最近最少使用) 缓存约束的数据结构。

实现 LRUCache 类：

LRUCache(int capacity) 以正整数作为容量 capacity 初始化 LRU 缓存
int get(int key) 如果关键字 key 存在于缓存中，则返回关键字的值，否则返回 -1
void put(int key, int value) 如果关键字 key 已经存在，则变更其数据值 value；如果不存在，则向缓存中插入该组 key-value。如果插入操作导致关键字数量超过 capacity，则应该逐出最久未使用的关键字。

函数 get 和 put 必须以 O(1) 的平均时间复杂度运行。

示例

输入

text

["LRUCache", "put", "put", "get", "put", "get", "put", "get", "get", "get"]
[[2], [1, 1], [2, 2], [1], [3, 3], [2], [4, 4], [1], [3], [4]]

输出

text

[null, null, null, 1, null, -1, null, -1, 3, 4]

解释

js
LRUCache lRUCache = new LRUCache(2);
lRUCache.put(1, 1); // 缓存是 {1=1}
lRUCache.put(2, 2); // 缓存是 {1=1, 2=2}
lRUCache.get(1);    // 返回 1
lRUCache.put(3, 3); // 该操作会使得关键字 2 作废，缓存是 {1=1, 3=3}
lRUCache.get(2);    // 返回 -1 (未找到)
lRUCache.put(4, 4); // 该操作会使得关键字 1 作废，缓存是 {4=4, 3=3}
lRUCache.get(1);    // 返回 -1 (未找到)
lRUCache.get(3);    // 返回 3
lRUCache.get(4);    // 返回 4

提示

1 <= capacity <= 3000
0 <= key <= 10000
0 <= value <= 10^5
最多调用 2 * 10^5 次 get 和 put

解题思路

此题需要对容器中的元素进行频繁地取出和插入操作，并且需要拿到链表首尾的元素，所以可以使用双向链表的数据结构进行存储。

为了能够快速地找到对应的元素，则需要维护一个哈希表来对元素进行存储。

get 方法实现：先查询当前所需要的元素是否在哈希表中，如果不存在则返回 -1；存在则返回当前元素的值，并且将该节点放到链表首部。
put 方法实现：先查询当前所需要的元素是否在哈希表中。
- 如果存在，则直接将该节点的值修改为新值，并且将该节点放到链表首部；
- 如果不存在，则需要判断当前链表是否还有空间存入新元素：如果有空间，则直接将新节点存入链表首部并将长度加一；如果没有空间了，就将链表尾部的节点删除，并在首部存入新元素。

由于这两个方法的实现都需要将节点从链表中删除、以及将节点添加到链表首部，所以可以直接封装成两个方法用来单独处理这两件事。

代码实现

js
/**
 * LeetCode 146. LRU缓存
 *
 * 请你设计并实现一个满足  LRU (最近最少使用) 缓存 约束的数据结构。
 * 实现 LRUCache 类：
 * LRUCache(int capacity) 以 正整数 作为容量 capacity 初始化 LRU 缓存
 * int get(int key) 如果关键字 key 存在于缓存中，则返回关键字的值，否则返回 -1 。
 * void put(int key, int value) 如果关键字 key 已经存在，则变更其数据值 value ；如果不存在，则向缓存中插入该组 key-value 。如果插入操作导致关键字数量超过 capacity ，则应该 逐出 最久未使用的关键字。
 * 函数 get 和 put 必须以 O(1) 的平均时间复杂度运行。
 */

// 定义节点结构
class nodeList {
    constructor(key, val) {
        this.key = key
        this.value = val
        this.prev = null
        this.next = null
    }
}

/**
 * @param {number} capacity
 */
var LRUCache = function (capacity) {   // 链表的构造函数
    this.capacity = capacity    // 链表的最大长度
    this.num = 0                // 当前链表的长度
    this.first = new nodeList() // 首尾节点
    this.last = new nodeList()
    this.hash = []              // 哈希表
    this.first.next = this.last // 将首尾节点相连
    this.last.prev = this.first
};

// 从链表上删除节点方法
LRUCache.prototype.removeNode = function (node) {
    node.prev.next = node.next
    node.next.prev = node.prev
}

// 将节点添加到链表首部
LRUCache.prototype.addToHead = function (node) {
    node.prev = this.first
    node.next = this.first.next
    this.first.next.prev = node
    this.first.next = node
}

LRUCache.prototype.moveToHead = function (node) {
    this.removeNode(node)
    this.addToHead(node)
}

/**
 * @param {number} key
 * @return {number}
 */
LRUCache.prototype.get = function (key) {
    if (this.hash[key] != null) {
        this.moveToHead(this.hash[key])
        return this.hash[key].value
    } else return -1
};

/**
 * @param {number} key
 * @param {number} value
 * @return {void}
 */
LRUCache.prototype.put = function (key, value) {
    if (this.hash[key] != null) {
        this.moveToHead(this.hash[key])
        this.hash[key].value = value
    } else {
        const newNode = new nodeList(key, value)
        if (this.capacity > this.num) {
            this.addToHead(newNode)
            this.hash[key] = newNode
            this.num++
        } else {
            this.hash[this.last.prev.key] = null
            this.removeNode(this.last.prev)
            this.addToHead(newNode)
            this.hash[key] = newNode
        }
    }
};

/**
 * Your LRUCache object will be instantiated and called as such:
 * var obj = new LRUCache(capacity)
 * var param_1 = obj.get(key)
 * obj.put(key,value)
 */

手写防抖

Wed, 18 Mar 2026 16:00:00 GMT

手写防抖

js
function debounce(func, wait) {
  var timer = null
  return function (...args){
      if(timer)clearTimeout(timer)
      timer = setTimeout(() => {
          func.apply(this,args)
      },wait)
  }
}

// 测试用例：
const handleSearch = debounce((query) => console.log("发送搜索请求:", query), 500);
handleSearch("A");
handleSearch("AB");
handleSearch("ABC"); // 只有最后这个 "ABC" 会在 500ms 后被打印

手写一个判断空值的函数

Wed, 18 Mar 2026 16:00:00 GMT

手写一个判断空值的函数

空数组，空对象，空格字符串，undefined，null都算空值

js
function isEmpty(value) {
 //1、判断空字符串
    if(type value === "string"){
        if(value.trim().length === 0)return true
    }
 //2、判断空数组
    if(Array.isArray(value)){
        if(value.length === 0)return true
    }
 //3、判断null和undefined
    if(value === null || value === undefined)return true
 //4、判断空对象
    if(typeof value === "object"){
        if(Object.keys(value).length === 0)return true
    }
    return false
}

// 测试用例：
console.log(isEmpty(""));        // true
console.log(isEmpty("   "));     // true (纯空格字符串)
console.log(isEmpty({}));        // true (空对象)
console.log(isEmpty([]));        // true (空数组)
console.log(isEmpty(null));      // true
console.log(isEmpty(0));         // false (数字0通常算有效值)

手写一个提取URL参数的函数

Wed, 18 Mar 2026 16:00:00 GMT

手写一个提取URL参数的函数

这里提供三种解法：现代 API 法、传统手动解析法，以及将所有参数转为对象的解法。

解法一：现代 API - `URL` 和 `URLSearchParams` (强烈推荐)

这是目前浏览器原生支持的最好用的方法，能够轻松满足“获取参数”和“获取域名”的需求。

js
function getUrlParamModern(urlString, paramName) {
  try{
      const url = new URL(urlString)
      if(paramName === "domain"){
          return url.hostname 
          //如果需要获取主域名，则是
          //var parts = url.hostname.split('.')
          //return parts[parts.length - 1]   （因为有可能是www.baidu.com,也有可能是baidu.com）
      }
      return url.searchParams.get(paramName)
  }catch(error){
      console.log("无效的URL格式")
      return null
  }
}

// 测试用例：
const testUrl = "[https://www.example.com/page?name=%E5%BC%A0%E4%B8%89&age=25](https://www.example.com/page?name=%E5%BC%A0%E4%B8%89&age=25)";
console.log(getUrlParamModern(testUrl, 'domain')); // "[www.example.com](https://www.example.com)"
console.log(getUrlParamModern(testUrl, 'name'));   // "张三" (自动解码了)

解法二：传统手动拆解法（用到 decodeURIComponent）

js
function getUrlParamManual(urlString, paramName) {
  // 粗略获取域名的方法：使用正则截取
  if (paramName === 'domain') {
    const domainMatch = urlString.match(/^(?:https?:\/\/)?(?:[^@\n]+@)?(?:www\.)?([^:\/\n?]+)/im);
    return domainMatch ? domainMatch[1] : null;
  }

  // 1. 找到问号 ? 的位置
  const searchIndex = urlString.indexOf('?');
  if (searchIndex === -1) return null; // 没有参数

  // 2. 截取问号后面的部分："name=%E5%BC%A0%E4%B8%89&age=25"
  const searchString = urlString.substring(searchIndex + 1);
  
  // 去除哈希值 (如果 URL 里有 #hash)
  const cleanSearch = searchString.split('#')[0];

  // 3. 按 & 分割成数组：["name=%E5%BC%A0...", "age=25"]
  const paramsArray = cleanSearch.split('&');

  // 4. 遍历查找
  for (let i = 0; i < paramsArray.length; i++) {
    const pair = paramsArray[i].split('=');
    const key = pair[0];
    
    if (key === paramName) {
      // 找到了！使用 decodeURIComponent 解码中文和特殊字符
      // 如果没有等号后面的值，默认返回空字符串，否则返回解码后的值
      return pair[1] ? decodeURIComponent(pair[1]) : '';
    }
  }
  
  return null; // 没找到该参数
}

解法三：将所有参数转换为对象（实战常用法）

利用 ES6+ 现代语法（代码极简）

js
function getAllParamsToObjModern(urlString) {
  try {
    const url = new URL(urlString);
    // Object.fromEntries 可以把键值对列表转换成一个对象
    // url.searchParams.entries() 产出如: [['name', '张三'], ['age', '25']]
    return Object.fromEntries(url.searchParams.entries());
  } catch (error) {
    return {};
  }
}

企业级 Git 提交规范配置指南 (From 0 to 1)

Tue, 27 Jan 2026 16:00:00 GMT

企业级 Git 提交规范配置指南 (From 0 to 1)

本文档将指导你如何在项目中集成 Husky + Commitlint + Commitizen，实现自动化的代码与提交信息规范检查。

1. 核心工具安装 (Commitlint)

首先安装 Commitlint 及其标准配置。这是“裁判”，负责判断提交信息是否合格。

1.1 安装依赖

在项目根目录下执行：

text

npm install -D @commitlint/cli @commitlint/config-conventional

1.2 创建配置文件

在根目录新建文件 commitlint.config.js，内容如下：

text

1234567

module.exports = {
  extends: ['@commitlint/config-conventional'],
  // 你可以在这里自定义规则，例如：
  // rules: {
  //   'type-enum': [2, 'always', ['feat', 'fix', 'docs', 'style', 'refactor', 'test', 'chore', 'revert']],
  // }
};

2. 自动化钩子配置 (Husky)

Husky 是“触发器”，它利用 Git Hooks 在你敲击回车提交时拦截操作。

2.1 安装并初始化 Husky

注意：Husky v9 的初始化命令非常简化。

text

npm install -D husky
npx husky init

执行完 npx husky init 后，你的 package.json 会自动增加 "prepare": "husky" 脚本，并且根目录下会生成 .husky 文件夹。

⚠️ 常见报错预警： init 命令会自动创建一个 .husky/pre-commit 文件，内容默认是 npm test。如果你的 package.json 中没有定义 test 脚本，提交时就会报错 Missing script: "test"。 解决方法：打开 .husky/pre-commit 文件，删除里面的 npm test，暂时留空即可（后续在第 6 步我们会配置它）。

2.2 添加 commit-msg 钩子

我们需要告诉 Husky：在提交信息生成之前，请用 Commitlint 检查一下。

在终端执行（Mac/Linux）：

text

echo "npx --no -- commitlint --edit \$1" > .husky/commit-msg

Windows 用户 (PowerShell) 请执行：

text

Set-Content .husky/commit-msg 'npx --no -- commitlint --edit $1'

或者手动在 .husky 文件夹下新建文件 commit-msg (无后缀)，内容写入：

text

npx --no -- commitlint --edit $1

3. 交互式提交助手 (Commitizen & cz-git) - 可选但推荐

为了不用每次都手敲 feat: ...，我们可以安装一个工具，通过选择的方式生成提交信息。这里推荐使用 cz-git，它比老牌的 cz-conventional-changelog 更轻量、更漂亮。

3.1 安装依赖

text

npm install -D commitizen cz-git

3.2 修改 package.json

打开 package.json，在顶级层级（与 scripts 同级）添加 config 字段：

text

12345678910

{
  "scripts": {
    "commit": "git-cz"
  },
  "config": {
    "commitizen": {
      "path": "node_modules/cz-git"
    }
  }
}

3.3 测试交互式提交

以后你可以使用 npm run commit 来代替 git commit。

4. 验证是否成功

测试 1：错误的提交

尝试在终端输入一个不规范的提交：

text

git add .
git commit -m "随便写点什么"

预期结果：终端报错，提示 subject may not be empty 或 type must be one of [feat, fix...]，提交失败。这说明 Husky 拦截成功了。

测试 2：正确的提交

text

git commit -m "chore: 初始化 git 规范配置"

预期结果：提交成功。

5. 附录：提交类型速查表 (Conventional Commits)

团队成员在提交时应遵循以下前缀：

类型 (Type)	含义	示例
feat	新增功能 (Feature)	`feat: 增加用户登录功能`
fix	修复 Bug	`fix: 修复上传文件时的跨域问题`
docs	文档变更	`docs: 更新 README.md`
style	代码格式 (不影响逻辑，如空格、分号)	`style: 删除多余空行`
refactor	代码重构 (不修 Bug 也不加功能)	`refactor: 优化大文件切片逻辑`
perf	性能优化	`perf: 优化 ECharts 渲染速度`
test	测试相关	`test: 增加单元测试`
chore	构建/工具/依赖变动	`chore: 升级 express 版本`
revert	回滚代码	`revert: 回滚上一次提交`

6. 进阶：代码质量检查 (Lint-staged)

如果你希望在提交时，不仅检查提交信息，还要自动扫描代码（ESLint/Prettier）是否有错误，请继续配置 lint-staged。

6.1 安装

text

npm install -D lint-staged

6.2 配置 package.json

在 package.json 中添加：

text

12345678

{
  "lint-staged": {
    "*.{js,vue,ts}": [
      "eslint --fix",
      "prettier --write"
    ]
  }
}

(前提是你项目中已经配置了 eslint 和 prettier)

6.3 修改 Husky 的 pre-commit 钩子

找到 .husky/pre-commit 文件，将其内容修改为：

text

npx lint-staged

现在，你的流程变成了：

git commit
Husky 触发 pre-commit -> 运行 Lint-staged (检查代码格式，有问题直接报错或自动修复)。
Husky 触发 commit-msg -> 运行 Commitlint (检查提交文字，格式不对报错)。
一切通过 -> 真正生成 Commit。

通用防抖hook封装

Sun, 18 Jan 2026 16:00:00 GMT

通用防抖hook封装

typescript
/**
 * 通用防抖函数
 * @param fn 需要防抖执行的函数
 * @param delay 延迟时间（毫秒）
 * @returns 经过防抖处理的新函数
 */
export function debounce<T extends (...args: any[]) => any>(
  fn: T,
  delay: number
): (...args: Parameters<T>) => void {
  let timer: ReturnType<typeof setTimeout> | null = null;

  return function (this: any, ...args: Parameters<T>) {
    if (timer) clearTimeout(timer);

    timer = setTimeout(() => {
      fn.apply(this, args);
      timer = null;
    }, delay);
  };
}

Vue 组件间通信方式

Wed, 31 Dec 2025 16:00:00 GMT

Vue 组件间通信方式

一、父子组件通信 (最常用)

1. Props (父传子)

这是最基础的方式。父组件通过属性绑定传递数据，子组件通过 props 接收。

适用场景：通用的数据传递。
原则：单向数据流，子组件不应直接修改 Props。

text

12345

// Child.vue
defineProps(['msg'])

// Parent.vue
<Child msg="Hello Vue 3" />

2. $emit (子传父)

子组件通过触发事件，将数据传递给父组件。

适用场景：子组件状态变化通知父组件。

text

12345678

// Child.vue
const emit = defineEmits(['update'])
function handleClick() {
  emit('update', 'New Data')
}

// Parent.vue
<Child @update="handleUpdate" />

3. v-model (双向绑定)

本质是 props + emit 的语法糖。

Vue 2: 默认为 value prop 和 input event。
Vue 3: 默认为 modelValue prop 和 update:modelValue event。支持多个 v-model。

4. $refs / defineExpose

父组件可以通过 ref 获取子组件实例，直接调用子组件的方法或访问数据。

注意：Vue 3 中使用 <script setup> 的组件默认是关闭的，必须通过 defineExpose 暴露属性。

text

1234567

// Child.vue
const count = ref(0)
defineExpose({ count })

// Parent.vue
const childRef = ref(null)
console.log(childRef.value.count)

5. $parent /$ children (不推荐频繁使用)

Vue 2: 使用 $children 访问子组件实例数组。
Vue 3: $children 已被移除。建议使用 refs。
$parent 依然可用，但会导致组件耦合度过高。

二、跨级/祖孙组件通信

1. Provide / Inject (依赖注入)

祖先组件作为“依赖提供者”，后代组件（无论多深）都可以注入该依赖。

适用场景：编写插件、组件库或深层嵌套结构（不需要通过中间层透传 props）。
特点：非响应式（除非传递的是 ref/reactive 对象）。

text

12345

// Ancestor.vue
provide('theme', 'dark')

// Descendant.vue
const theme = inject('theme')

2. $attrs

包含了父作用域中不作为 prop 被识别 (且获取) 的 attribute 绑定 (class 和 style 除外)。

适用场景：高阶组件或二次封装组件，使用 v-bind="$attrs" 将属性透传给内部组件。

三、兄弟组件或任意组件通信

1. 全局状态管理 (Vuex / Pinia)

这是大型项目的标准解决方案。

Vuex: Vue 2 的主流，包含 State, Getter, Mutation, Action, Module。
Pinia: Vue 3 官方推荐（也支持 Vue 2），更轻量，去掉了 Mutation，支持 Composition API，对 TypeScript 支持更好。

2. EventBus (事件总线)

创建一个空的 Vue 实例作为中央事件总线，用 $emit 和 $on 通信。

Vue 2: Vue.prototype.$bus = new Vue()。
Vue 3: 已移除 $on, $off 等实例方法。官方推荐使用第三方库如 mitt 或 tiny-emitter。

3. Mitt (Vue 3 替代 EventBus)

text

123456

import mitt from 'mitt'
const emitter = mitt()
// 监听
emitter.on('foo', e => console.log(e))
// 触发
emitter.emit('foo', { a: 'b' })

四、面试高分总结策略 (Cheat Sheet)

如果面试官问：“Vue 组件间传值有哪些方法？”，你可以这样回答：

1. 开场定调

“Vue 的组件通信方式主要取决于组件之间的关系。我一般把它们分为三类：父子通信、跨级通信和全局通信。”

2. 核心展开 (由浅入深)

父子关系：最常用的是 props 和 $emit，这是符合单向数据流的最佳实践。如果是双向同步，我会用 v-model。如果是封装组件需要透传属性，我会用 $attrs。偶尔为了操作子组件内部方法，会配合 ref 和 defineExpose。

跨级/祖孙关系：对于深层嵌套，为了避免 props 逐层传递（Props Drilling），我会使用 provide 和 inject，这在开发通用组件库时非常有用。

兄弟或任意关系：如果是简单的场景，Vue 2 可以用 EventBus，但在 Vue 3 中我推荐使用 mitt。如果是复杂的应用状态管理，Pinia 是目前的首选（Vuex 是过去式），因为它对 TS 支持更好且 API 更简洁。

3. 补充亮点 (体现深度)

Vue 3 的变化：特意提到 Vue 3 移除了 $children 和 $on/$off API，体现你对新版本的关注。

状态管理选型：提到 Pinia 相比 Vuex 的优势（去掉了 mutation，体积更小）。

浏览器存储：如果数据需要持久化，还可以补充 localStorage / sessionStorage 作为辅助通信手段。

五、简单对比表

方式	适用场景	Vue Version	复杂度
Props / Emit	父子组件	All	⭐ (低)
v-model	父子双向同步	All (语法略有不同)	⭐
Refs / Expose	父调子方法	All	⭐
Provide / Inject	跨级/插件	All	⭐⭐
Attributes ($attrs)	组件封装/透传	All	⭐⭐
EventBus ($bus)	任意组件	Vue 2 Only	⭐⭐
Mitt / Tiny-emitter	任意组件	Vue 3 (替代 EventBus)	⭐⭐
Vuex	全局状态	Vue 2 (Vue 3可用)	⭐⭐⭐ (高)
Pinia	全局状态	Vue 3 (推荐)	⭐⭐⭐

JS 常用字符串操作大全

Wed, 24 Dec 2025 16:00:00 GMT

JS 常用字符串操作大全

在 JavaScript 中，字符串（String）是不可变的。以下方法均返回新字符串，不会修改原字符串。

一、查找与检测 (Searching & Checking)

这组方法用于判断字符串中是否包含某些内容，或者获取其位置。

1. `includes(str)` (ES6 推荐)

判断是否包含子串，返回布尔值。

text

123

const str = "Hello World";
console.log(str.includes("World")); // true
console.log(str.includes("Bye"));   // false

2. `indexOf(str)` / `lastIndexOf(str)`

获取子串第一次/最后一次出现的索引。如果未找到，返回 -1。

text

123

const str = "frontend";
console.log(str.indexOf("end")); // 5
console.log(str.indexOf("java")); // -1 (未找到)

3. `startsWith(str)` / `endsWith(str)`

判断字符串是否以某子串开头或结尾。常用于判断文件扩展名或 URL 协议。

text

123

const file = "image.png";
console.log(file.endsWith(".png")); // true
console.log(file.startsWith("http")); // false

二、截取与切片 (Slicing)

面试中常考 slice 和 substring 的区别，建议首选 slice。

1. `slice(start, end)` (推荐)

提取字符串的一部分。

start: 开始索引。
end: 结束索引（不包含该位置）。
特点：支持负数索引（代表从后往前数）。

text

123

const str = "JavaScript";
console.log(str.slice(0, 4));  // "Java"
console.log(str.slice(-6));    // "Script" (从倒数第6个取到最后)

2. `substring(start, end)`

功能与 slice 类似，但不支持负数（负数会被当作 0）。

text

const str = "JavaScript";
console.log(str.substring(0, 4)); // "Java"

三、转换与替换 (Transform & Replace)

1. `split(separator)` (转数组 - 核心)

将字符串拆分为数组。这是字符串处理中最强大的方法之一。

text

123456

const str = "apple,banana,orange";
const arr = str.split(","); 
console.log(arr); // ["apple", "banana", "orange"]

// 常见技巧：反转字符串
const reverse = "abc".split("").reverse().join(""); // "cba"

2. `replace(searchValue, newValue)` / `replaceAll()`

replace: 默认只替换第一个匹配项（除非使用带全局标志 g 的正则）。
replaceAll (ES2021): 替换所有匹配项。

text

12345678910

const str = "hello world, hello js";

// 只替换第一个
console.log(str.replace("hello", "hi")); // "hi world, hello js"

// 替换所有 (ES2021)
console.log(str.replaceAll("hello", "hi")); // "hi world, hi js"

// 使用正则替换所有
console.log(str.replace(/hello/g, "hi")); // "hi world, hi js"

3. `toLowerCase()` / `toUpperCase()`

大小写转换。常用于搜索功能中忽略大小写的比对。

text

const input = "React";
console.log(input.toLowerCase() === "react"); // true

4. `trim()` / `trimStart()` / `trimEnd()`

去除空白字符（空格、换行、Tab）。常用于处理表单输入。

text

const user = "  admin  ";
console.log(user.trim()); // "admin"

四、现代实用功能 (ES6+)

1. 模版字符串 (Template Literals)

使用反引号 ```，支持变量插入和多行文本。强烈推荐代替 + 号拼接。

text

12345678

const name = "Mike";
const age = 25;

// 旧写法
const oldStr = "My name is " + name + " and I am " + age;

// 新写法 (推荐)
const newStr = `My name is ${name} and I am ${age}`;

2. `padStart(targetLength, padString)` / `padEnd()`

用于补全字符串长度。常用于时间格式化或脱敏显示。

text

12345678

// 时间补零
const hour = "5";
console.log(hour.padStart(2, "0")); // "05"

// 手机号脱敏
const phone = "13812345678";
const last4 = phone.slice(-4);
console.log(last4.padStart(11, "*")); // "*******5678"

五、总结：高频场景速查表

场景	推荐方法	备注
搜索关键字	`includes()`	返回 true/false
获取位置	`indexOf()`	没找到返回 -1
字符串截取	`slice()`	支持负数，最灵活
转为数组	`split()`	配合数组方法处理复杂逻辑
拼接字符串	`${var}`	模版字符串
表单去空格	`trim()`	处理用户输入
替换内容	`replaceAll()`	或使用正则 `/g`

浏览器存储方式

Sat, 20 Dec 2025 16:00:00 GMT

浏览器存储方式

现代浏览器提供了多种存储机制，用于在客户端保存数据。根据数据的生命周期、大小限制和使用场景，开发者需要选择最适合的方案。以下是主流存储方式的详细对比与解析。

Cookie 是最早期的客户端存储机制，主要设计初衷是为了在无状态的 HTTP 协议中维持状态（如用户登录态）。

特点

大小限制：非常小，通常限制在 4KB 左右。
自动发送：在同域名的 HTTP 请求中，Cookie 会自动附加在 Request Header 中发送给服务器（这可能造成性能浪费）。
配置项：
- Expires/Max-Age：设置过期时间。
- HttpOnly：若设置为 true，JavaScript 无法读取（防止 XSS 攻击窃取 Cookie）。
- Secure：只允许在 HTTPS 下传输。
- SameSite：控制跨站请求时是否发送 Cookie（防止 CSRF 攻击）。

适用场景

存储用户 Token / Session ID（配合 HttpOnly）。
需要服务端读取的小型配置信息。

代码示例

text

123456789101112131415161718192021222324

/**
 * 设置 Cookie 的完整示例
 * 注意：HttpOnly 属性只能由服务器设置，无法在客户端 JS 中设置
 */

// 1. 基础用法：设置路径 (Path)
document.cookie = "username=JohnDoe; path=/";

// 2. 设置过期时间 (Max-Age 或 Expires)
// Max-Age: 单位为秒 (例如 3600秒 = 1小时)
document.cookie = "token=abc12345; path=/; max-age=3600";

// Expires: 具体的 UTC 时间字符串
const date = new Date();
date.setTime(date.getTime() + (7 * 24 * 60 * 60 * 1000)); // 7天后
document.cookie = `theme=dark; path=/; expires=${date.toUTCString()}`;

// 3. 安全配置 (Secure & SameSite)
// Secure: 仅允许在 HTTPS 连接中传输
// SameSite: Strict (完全禁止跨站) | Lax (导航到目标网址时发送) | None (允许跨站，必须配合 Secure)
document.cookie = "tracking_id=xyz987; path=/; Secure; SameSite=Strict";

// 4. 读取 Cookie (需要自行解析)
console.log(document.cookie); // 输出: "username=JohnDoe; token=abc12345; ..."

2. Web Storage (LocalStorage & SessionStorage)

HTML5 引入了 Web Storage API，旨在提供更大容量且更易用的本地存储，且不会自动随 HTTP 请求发送给服务器。

A. LocalStorage (本地存储)

生命周期：永久有效。除非用户手动清除或代码调用清除，否则数据一直存在。
作用域：同源（协议、域名、端口相同）共享。
大小限制：通常为 5MB 左右（不同浏览器略有差异）。

B. SessionStorage (会话存储)

生命周期：仅在当前会话（Session）有效。当浏览器标签页或窗口关闭时，数据会被清除。
- 注意：在同一个窗口打开新链接（_self）会保留，但右键“在新标签页打开”或通过 window.open 打开的新标签页（取决于浏览器实现和上下文）通常不共享 SessionStorage。
作用域：限制在当前标签页，即使是同源的两个标签页，SessionStorage 也是隔离的。
大小限制：通常为 5MB 左右。

适用场景

LocalStorage: 网站偏好设置（如深色模式）、购物车数据（未登录状态）、长期缓存的数据。
SessionStorage: 表单分步填写的临时数据、一次性敏感信息（关闭页面即焚）。

代码示例 (两者 API 相同)

text

123456789101112131415

// API 非常简单，没有复杂的配置项

// 1. 存储数据 (Key-Value)
localStorage.setItem('theme', 'dark');
localStorage.setItem('userSettings', JSON.stringify({ notifications: true, volume: 80 })); // 存对象需序列化

// 2. 读取数据
const theme = localStorage.getItem('theme');
const settings = JSON.parse(localStorage.getItem('userSettings') || '{}');

// 3. 删除特定项
localStorage.removeItem('theme');

// 4. 清空所有数据
localStorage.clear();

3. IndexedDB

IndexedDB 是一个运行在浏览器中的非关系型数据库 (NoSQL)。它比 Web Storage 强大得多，适合存储大量结构化数据。

特点

容量大：通常不少于 250MB，甚至可以达到磁盘可用空间的百分比（如 50%）。
异步操作：所有操作（读取、写入）都是异步的，不会阻塞主线程（LocalStorage 是同步的，大数据量读取会卡顿）。
支持事务：支持事务（Transaction），保证数据一致性。
支持索引：可以给字段建立索引，进行高效查询。
支持二进制存储：可以存储 ArrayBuffer、Blob 等文件对象。

适用场景

离线应用（PWA）的大量数据存储。
富文本编辑器保存草稿、图片或文件缓存。
复杂的本地数据管理系统。

代码示例 (配置数据库结构)

text

12345678910111213141516171819202122232425262728293031323334353637383940

// 打开数据库: open(数据库名, 版本号)
const request = indexedDB.open("MyDatabase", 1);

// 配置阶段：仅在数据库版本升级（第一次打开或版本号增加）时触发
request.onupgradeneeded = function(event) {
  const db = event.target.result;
  
  // 1. 创建对象仓库 (类似于 SQL 中的 Table)
  // 配置项: keyPath (主键字段), autoIncrement (是否自增)
  if (!db.objectStoreNames.contains("users")) {
    const objectStore = db.createObjectStore("users", { keyPath: "id", autoIncrement: true });
    
    // 2. 创建索引 (用于查询)
    // createIndex(索引名, 键路径, 配置项)
    // unique: false (允许重复值), unique: true (必须唯一，如邮箱)
    objectStore.createIndex("name", "name", { unique: false });
    objectStore.createIndex("email", "email", { unique: true });
  }
};

request.onsuccess = function(event) {
  const db = event.target.result;
  
  // 3. 开启事务进行读写
  // db.transaction(scope, mode)
  // 参数1 ["users"]: 作用域，声明本次事务需要操作哪些表（Object Store）。
  //                  因为 IndexedDB 建立事务时会锁定这些表，为了性能必须明确指定。
  // 参数2 "readwrite": 事务模式，"readonly" (默认，只读) 或 "readwrite" (读写)。
  const transaction = db.transaction(["users"], "readwrite");
  
  // 4. 获取具体的对象仓库（表）进行操作
  // 必须通过事务对象(transaction)来获取表，而不是直接通过 db 获取
  const objectStore = transaction.objectStore("users");
  
  // 添加数据
  const addRequest = objectStore.add({ name: "Alice", email: "alice@example.com", age: 25 });
  
  addRequest.onsuccess = () => console.log("数据添加成功");
  addRequest.onerror = () => console.error("数据添加失败");
};

4. Cache API

Cache API 最初是为 Service Worker 设计的，用于网络资源的缓存，但也可以在普通页面脚本中使用。

特点

基于 Request/Response：专门用于存储网络请求对（Request 对象和 Response 对象）。
可编程缓存：开发者可以精确控制缓存哪些资源（CSS, JS, 图片等）以及何时更新。
异步：基于 Promise。

适用场景

PWA (Progressive Web App)：实现离线访问。
预加载关键资源。

5. 综合对比表

特性	Cookie	LocalStorage	SessionStorage	IndexedDB
数据生命周期	可设置过期时间，默认关闭浏览器失效	永久有效，直到手动删除	仅在当前标签页会话有效	永久有效，直到手动删除
存储大小	~4KB	~5MB	~5MB	很大 (>250MB)
与服务器通信	每次 HTTP 请求都会自动携带	不参与服务器通信	不参与服务器通信	不参与服务器通信
易用性	较差 (原生 API 难用)	简单 (Key-Value)	简单 (Key-Value)	复杂 (类似数据库操作)
访问性能	同步 (且影响网络带宽)	同步 (大数据量可能阻塞 UI)	同步	异步 (高性能)
主要用途	身份验证、Session ID	简单配置、持久化数据	临时表单、单次会话状态	复杂结构化数据、离线应用

总结建议

需要与服务端交互的 Auth Token：优先考虑 Cookie (配合 HttpOnly)。
简单的键值对数据 (设置、标志位)：使用 LocalStorage。
临时保存的数据 (刷新页面还在，关闭页面清除)：使用 SessionStorage。
大量结构化数据、文件、离线数据：务必使用 IndexedDB，避免 LocalStorage 阻塞主线程。

Vue 2 vs Vue 3 核心差异深度解析

Sat, 20 Dec 2025 16:00:00 GMT

Vue 2 vs Vue 3 核心差异深度解析

Vue 3 相比 Vue 2 带来了巨大的性能提升和架构改进。以下是两者在核心原理、开发体验和新特性上的主要区别。

1. 响应式系统原理 (核心区别)

这是 Vue 3 最底层的变革，直接决定了性能上限和开发体验。

Vue 2: Object.defineProperty 的局限

Vue 2 使用 ES5 的 Object.defineProperty API 来劫持对象的 getter 和 setter。

初始化开销大：在组件初始化时，Vue 2 必须递归遍历 data 对象的所有属性（包括嵌套属性），将它们转换为 getter/setter。如果不访问这些属性，它们依然会被转换，这在数据量大时会造成明显的性能损耗。
无法监听属性新增/删除：由于 JavaScript 的限制，Object.defineProperty 只能劫持已存在的属性。
- this.obj.newProp = 123 不会触发视图更新。
- 必须使用 Vue.set(this.obj, 'newProp', 123) 或 this.$set。
数组监听缺陷：Vue 2 不能通过 Object.defineProperty 完美拦截数组索引的修改（如 arr[0] = 1）和长度修改（arr.length = 0）。
- Vue 2 不得不重写（Monkey Patch）了数组的 7 个变异方法（push, pop, shift...）来实现响应式。

Vue 3: Proxy 的强大能力

Vue 3 使用 ES6 的 Proxy API，它不是劫持属性，而是代理整个对象。

懒代理 (Lazy Observation)：Proxy 默认只代理第一层。只有当你真正访问嵌套对象时，Vue 3 才会通过 Reflect 动态地将嵌套对象包装为 Proxy。这使得初始化速度极大提升，内存占用显著降低。
动态属性支持：Proxy 可以拦截对象上任意属性的变化，包括新增属性和删除属性。
- state.newProp = 123 直接生效。
数组完美支持：Proxy 可以原生拦截数组索引修改和 length 变化，无需再重写数组方法。
更多拦截操作：Proxy 可以拦截多达 13 种操作，包括 has (in 操作符), deleteProperty (delete 操作符) 等，这让 Vue 3 的响应式能力更全面。

深度对比表

特性	Vue 2 (Object.defineProperty)	Vue 3 (Proxy)
拦截粒度	属性级别 (必须遍历所有 key)	对象级别 (直接拦截整个对象)
初始化性能	递归遍历，开销大	懒代理，按需转换，快
新增/删除属性	不支持 (需用 `$set` / `$delete`)	原生支持
数组索引修改	不支持 (需用 `$set` 或 `splice`)	原生支持
Map / Set 支持	不支持	支持
Class 语法	支持较弱	支持
兼容性	IE9+	不支持 IE11 (因 Proxy 无法被 Polyfill)

伪代码原理解析

为了让你理解得更透彻，这里是两者实现的简化逻辑对比：

Vue 2 实现逻辑 (简化):

text

1234567891011121314151617181920

function defineReactive(obj, key, val) {
  // 必须针对每一个 key 进行定义
  Object.defineProperty(obj, key, {
    get() {
      // 收集依赖
      return val;
    },
    set(newVal) {
      if (newVal !== val) {
        val = newVal;
        // 触发更新
        updateView();
      }
    }
  });
}
// 初始化时必须立即递归遍历所有属性
for (const key in data) {
  defineReactive(data, key, data[key]);
}

Vue 3 实现逻辑 (简化):

text

12345678910111213141516171819202122232425

const handler = {
  get(target, key, receiver) {
    // 收集依赖 (track)
    const result = Reflect.get(target, key, receiver);
    // 懒代理：只有当属性值是对象且被访问时，才递归创建 Proxy
    return isObject(result) ? reactive(result) : result;
  },
  set(target, key, value, receiver) {
    const oldValue = target[key];
    const result = Reflect.set(target, key, value, receiver);
    // 触发更新 (trigger)
    if (oldValue !== value) {
      updateView();
    }
    return result;
  },
  deleteProperty(target, key) {
    // 还能拦截 delete 操作
    const result = Reflect.deleteProperty(target, key);
    updateView();
    return result;
  }
};
// 不需要预先遍历 key，直接代理整个对象
const proxy = new Proxy(data, handler);

2. API 风格：Options API vs Composition API

这是开发者感受最直观的变化。

Vue 2: Options API (选项式 API)

代码按照 data, methods, computed, watch 等选项块进行组织。

优点：结构清晰，适合初学者，强制规范。
缺点：当组件逻辑复杂时，同一功能的代码（比如“搜索功能”）会分散在 data、methods 等不同地方，导致代码难以阅读和维护（"反复横跳"）。

Vue 3: Composition API (组合式 API)

使用 setup() 函数（或 <script setup>），将逻辑关注点组织在一起。

优点：逻辑复用极强（Hooks），类似 React Hooks；同一功能的代码集中在一起，易于维护；更好的类型推导。
兼容性：Vue 3 依然完全支持 Options API。

代码对比

Vue 2 (Options API):

text

12345678910111213

export default {
  data() {
    return { count: 0 };
  },
  methods: {
    increment() {
      this.count++;
    }
  },
  mounted() {
    console.log('mounted');
  }
};

Vue 3 (Composition API - script setup):

text

12345678910111213141516

<script setup>
import { ref, onMounted } from 'vue';

// 状态定义
const count = ref(0);

// 方法定义
const increment = () => {
  count.value++;
};

// 生命周期
onMounted(() => {
  console.log('mounted');
});
</script>

3. 生命周期钩子 (Lifecycle Hooks)

Vue 3 对生命周期钩子进行了重命名，使其更语义化，并提供了对应 Composition API 的函数。

Vue 2 (Options API)	Vue 3 (Options API)	Vue 3 (Composition API)	说明
`beforeCreate`	`beforeCreate`	`setup()`	setup 执行时机更早
`created`	`created`	`setup()`	setup 取代了这两个钩子
`beforeMount`	`beforeMount`	`onBeforeMount`
`mounted`	`mounted`	`onMounted`
`beforeUpdate`	`beforeUpdate`	`onBeforeUpdate`
`updated`	`updated`	`onUpdated`
`beforeDestroy`	`beforeUnmount`	`onBeforeUnmount`	名称变更：销毁变成了卸载
`destroyed`	`unmounted`	`onUnmounted`	名称变更
`errorCaptured`	`errorCaptured`	`onErrorCaptured`

4. 多根节点 (Fragments)

Vue 2: 组件模板必须有一个唯一的根元素。
Vue 3: 支持多根节点（Fragments）。Vue 3 会自动在虚拟 DOM 中创建一个 Fragment 节点来包裹它们，减少了不必要的 DOM 层级嵌套。

5. TypeScript 支持

Vue 2: 对 TypeScript 支持较弱。因为 this 上下文的动态性，很难进行完美的类型推导，通常需要使用 vue-class-component 装饰器写法，体验较为割裂。
Vue 3: 源码完全使用 TypeScript 重写。Composition API 天然对类型推导友好，不再依赖复杂的 this，开发体验极佳。

6. 新增内置组件与特性

Teleport (传送门)

允许将组件的 DOM 结构渲染到该组件 DOM 树之外的地方（例如直接挂载到 body 下），这对于制作模态框 (Modal)、通知 (Toast) 非常有用，避免了 z-index 层级冲突问题。

text

123

<Teleport to="body">
  <div class="modal">我是挂载在 body 下的模态框</div>
</Teleport>

Suspense (实验性)

允许在组件树中协调异步依赖的处理。可以在深层组件加载完成前，在父组件渲染一个“加载中”状态。

Tree Shaking (按需打包)

Vue 3 的全局 API（如 nextTick, set 等）改为 ES 模块导出。如果你不使用某个功能，打包工具可以将其摇掉（Remove），从而减小最终包的体积。

7. 全局 API 变更

Vue 2 使用 new Vue() 并修改 Vue 全局对象，这导致在同一页面运行多个 Vue 实例时容易相互污染。Vue 3 改为使用 createApp 创建应用实例。

text

1234567

// Vue 3 写法
import { createApp } from 'vue';
import App from './App.vue';

const app = createApp(App);
app.use(MyPlugin); // 仅影响当前实例
app.mount('#app');

总结

Vue 3 在性能（Proxy、Virtual DOM 优化）、可维护性（Composition API、TypeScript）和架构灵活性（Fragments、Teleport）上都全面优于 Vue 2。

如果是新项目，强烈建议直接使用 Vue 3 + Script Setup + TypeScript。

Server-Sent Events (SSE) 技术详解

Sat, 20 Dec 2025 16:00:00 GMT

Server-Sent Events (SSE) 技术详解

SSE (Server-Sent Events) 是一种基于 HTTP 的服务器推送技术。它允许服务器通过一个长期的 HTTP 连接，源源不断地向客户端发送文本数据流。

1. 核心概念

通俗地说，SSE 就像是收音机广播。

客户端：打开收音机（建立连接）。
服务器：不断发送广播信号（推送数据）。
单向性：你只能听广播，不能通过收音机向电台说话（只能服务器发给客户端）。

工作流程

客户端发起一个普通的 HTTP 请求。
服务器响应头中设置 Content-Type: text/event-stream。
连接保持打开状态（Keep-Alive）。
服务器随时可以通过这个连接发送数据。

2. SSE vs WebSocket

这是面试和架构选型中最常见的问题。

特性	SSE (Server-Sent Events)	WebSocket
通信方向	单向 (Server -> Client)	双向 (全双工)
协议	基于 HTTP 协议	独立的 WebSocket 协议 (TCP)
数据格式	仅支持文本 (UTF-8)	支持文本和二进制
自动重连	原生支持 (浏览器自动处理)	不支持 (需手写心跳重连逻辑)
使用难度	简单 (像普通 HTTP 请求)	较复杂 (需专门的握手和协议处理)
典型应用	股票行情、新闻推送、ChatGPT 回复	在线聊天室、多人游戏、协作编辑

3. 实战代码示例

A. 后端实现 (Node.js/Express)

SSE 对数据格式有严格要求，每条消息必须以 data: 开头，以 \n\n 结尾。

text

123456789101112131415161718192021222324252627282930313233

const express = require('express');
const app = express();

app.get('/stream', (req, res) => {
  // 1. 设置关键 Header
  res.writeHead(200, {
    'Content-Type': 'text/event-stream', // 声明流式数据
    'Cache-Control': 'no-cache',         // 禁止缓存
    'Connection': 'keep-alive',          // 保持长连接
    'Access-Control-Allow-Origin': '*'   // 允许跨域
  });

  // 2. 发送初始消息
  res.write('data: 连接成功！\n\n');

  // 3. 模拟每隔 1 秒推送一次数据
  const intervalId = setInterval(() => {
    const message = {
      time: new Date().toLocaleTimeString(),
      value: Math.random()
    };
    // 注意格式：data: <JSON字符串>\n\n
    res.write(`data: ${JSON.stringify(message)}\n\n`);
  }, 1000);

  // 4. 当客户端断开连接时，清理定时器
  req.on('close', () => {
    clearInterval(intervalId);
    console.log('客户端已断开');
  });
});

app.listen(3000, () => console.log('SSE Server running on port 3000'));

B. 前端实现 (原生 EventSource API)

浏览器提供了原生的 EventSource 对象来处理 SSE。

text

1234567891011121314151617181920

// 1. 建立连接
const eventSource = new EventSource('http://localhost:3000/stream');

// 2. 监听消息
eventSource.onmessage = function(event) {
  const data = JSON.parse(event.data);
  console.log('收到服务器数据:', data);
  
  // 更新 UI
  document.getElementById('result').innerText = data.time;
};

// 3. 监听错误 (包括连接中断)
eventSource.onerror = function(err) {
  console.error('连接出错:', err);
  // 注意：EventSource 默认会自动尝试重连，无需手动干预
};

// 4. 手动关闭连接
// eventSource.close();

4. SSE 的高级特性

除了基础的 data 字段，SSE 协议还支持其他字段来实现高级功能。特别要注意自动重连与数据补全的区别。

text

1234

id: 101           <-- 消息 ID (关键：用于断线重连恢复)
event: update     <-- 自定义事件类型
retry: 5000       <-- 告诉浏览器如果断连，5秒后重试
data: hello world <-- 数据内容

自动重连与断点续传机制详解

自动重连 (无需代码)：当连接中断（网络波动或服务器重启）时，浏览器会自动在约 3 秒后尝试重新连接。这是浏览器的默认行为，开发者无需编写任何前端代码。可以通过服务器发送 retry: 5000 字段来修改这个重试间隔。
数据补全 (需要服务端配合)： 仅仅自动重连并不保证能收到“剩余的数据”。 为了不丢失断开期间的数据，必须配合 ID 机制：
- 服务端：发送每条消息时必须带上 id: 序号。
- 浏览器：重连时，会自动在新的 HTTP 请求头中带上 Last-Event-ID: 序号（告诉服务器我上次收到了哪）。
- 服务端逻辑：必须读取这个 Header，并根据 ID 从数据库或缓存中把断开期间错过的消息补发给客户端。如果服务端不处理这个 Header，重连后就只能接收最新的数据，中间的数据会丢失。

5. 优缺点总结

优点

轻量级：不需要像 WebSocket 那样升级协议，不仅对服务器压力小，而且防火墙/代理服务器对 HTTP 更友好。
自动重连：浏览器原生内置了重连机制，开发成本极低。
简单：对于只需要服务器推送的场景（如大盘走势），SSE 是最简单的解决方案。

缺点

单向性：如果客户端也需要频繁向服务器发送数据（如实时游戏），SSE 不合适。
连接限制：HTTP/1.1 限制浏览器对同一域名的并发连接数（通常是 6 个）。如果打开多个 Tab 页，连接池可能会被占满。（HTTP/2 解决了这个问题）。
仅支持文本：无法直接传输二进制文件（WebSockets 支持）。

6. 经典案例：ChatGPT

目前最火的 SSE 应用就是 ChatGPT。

当你和 AI 对话时，AI 的回复是一个字一个字蹦出来的。这不是 WebSocket，而是 SSE。服务器通过 SSE 流，生成一个 token 就推送到前端渲染一个，从而实现了“打字机”效果，让用户感觉响应速度很快，不需要等待整段话生成完毕。

深浅拷贝，以及JS如何判断数据类型

Sun, 23 Nov 2025 16:00:00 GMT

深浅拷贝，以及JS如何判断数据类型

1. 最基础的方法：`typeof`

特点：简单，适合判断基础数据类型。

适用：Number, String, Boolean, Symbol, Undefined, Function。
局限性（面试必考点）：
- null 的陷阱：typeof null 会返回 'object'（这是 JS 的历史遗留 Bug）。
- 引用类型无法区分：除了 Function 外，其他的引用类型（Array, Date, RegExp, Error）都会统统返回 'object'，无法具体区分。

js
typeof 1 // 'number'
typeof '1' // 'string'
typeof undefined // 'undefined'
typeof true // 'boolean'
typeof Symbol() // 'symbol'
typeof null // 'object' (注意！)
typeof [] // 'object'
typeof {} // 'object'

2. 基于原型链的方法：`instanceof`

特点：适合判断引用数据类型（Object），检测构造函数的 prototype 属性是否出现在某个实例对象的原型链上。

适用：Array, Date, RegExp(正则) 等对象类型。
局限性：
- 不能判断基础类型：比如 1 instanceof Number 为 false。
- 原型链可被修改：如果手动修改了原型指向，结果可能不准确。
- 多窗口/iframe 问题：在不同 iframe 中，全局对象不同，[] instanceof Array 可能会失效。

js
[] instanceof Array // true
{} instanceof Object // true
new Date() instanceof Date // true

3. 构造函数属性：`constructor`

特点：查看对象的构造函数。

适用：大部分类型。
局限性：非常不安全。因为 constructor 属性是可以被随意修改的，而且 null和 undefined 没有 constructor。一般不推荐作为首选方案。

JavaScript
[].constructor === Array // true

4. 终极全能方案：`Object.prototype.toString.call()`

特点：这是最准确、最通用的方法，也是面试中的“标准答案”。

原理：所有对象都继承自 Object，调用 Object 原型上的 toString 方法，会返回格式为 [object type] 的字符串。
适用：所有类型（包括 null 和 undefined）。

js
Object.prototype.toString.call(1) // "[object Number]"
Object.prototype.toString.call('1') // "[object String]"
Object.prototype.toString.call(true) // "[object Boolean]"
Object.prototype.toString.call(null) // "[object Null]"
Object.prototype.toString.call(undefined) // "[object Undefined]"
Object.prototype.toString.call([]) // "[object Array]"
Object.prototype.toString.call(function(){}) // "[object Function]"
Object.prototype.toString.call({}) // "[object Object]"

手写通用类型判断函数

js
function getType(value) {
  // 1. 处理 null 和 undefined (虽然 toString 也能处理，但这样更直观)
  if (value === null) return 'null';
  if (typeof value === 'undefined') return 'undefined';

  // 2. 使用 typeof 处理基础类型 (性能稍好)
  // 注意：Function 也是 'function'，这里也可以直接返回
  if (typeof value !== 'object') {
      return typeof value;
  }

  // 3. 使用 Object.prototype.toString.call 处理复杂类型
  // slice(8, -1) 是为了去掉 "[object " 和 "]"，只保留类型名称
  return Object.prototype.toString.call(value).slice(8, -1).toLowerCase();
}

深浅拷贝

第一，从原理上讲： 浅拷贝 (Shallow Copy) 就像是‘复制了钥匙’。对于引用类型，它只复制了指向堆内存中对象的地址（指针）。所以如果修改了新对象里的属性，原对象也会受到影响，因为它们指向的是同一个房间。 深拷贝 (Deep Copy) 则是‘建造了一个一模一样的新房子’。它会在堆内存中开辟新的空间，完整复制原对象的所有属性。新旧对象互不干扰。

第二，在日常开发中： 如果只是简单的对象，我会用 Object.assign() 或者 ES6 的展开运算符 ... 来做浅拷贝。如果要深拷贝，最简单粗暴的方法是 JSON.parse(JSON.stringify())，但这只适用于纯数据对象。

第三，关于特殊情况： JSON 方法有局限性，比如它无法处理函数、正则、Date 对象，遇到循环引用还会报错。所以在复杂的场景或者面试手写题中，我会采用递归的方式来实现深拷贝，并且需要通过 WeakMap 来解决循环引用的问题。”

手写实现深拷贝

js
function deepClone(obj, hash = new WeakMap()) {
    // 如果是null或者不是对象，则直接返回
    if (obj === null || typeof obj !== 'object') {
        return obj;
    }
    // 如果是正则表达式，则直接返回
    if (obj instanceof RegExp) {
        return new RegExp(obj);
    }
    // 如果是日期对象，则直接返回
    if (obj instanceof Date) {
        return new Date(obj);
    }
    // 如果是函数，则直接返回
    if (typeof obj === 'function') {
        return obj;
    }
    //如果已经存在于hash中，直接返回克隆后的对象
    if (map.hash(obj)) {
        return hash.get(obj);
    }
    // 创建一个新的对象或数组
    const cloneObj = Array.isArray(obj) ? [] : {};
    // 将新对象存入hash中
    hash.set(obj, cloneObj);
    // 递归克隆
    for (let key in obj) {
        if (obj.hasOwnProperty(key)) {
            cloneObj[key] = deepClone(obj[key], hash);
        }
    }
}

防抖节流

Sun, 23 Nov 2025 16:00:00 GMT

防抖节流

一句话总结

“防抖（Debounce）是‘最后一次说了算’，而节流（Throttle）是‘按时间节奏执行’。”

防抖：在事件被触发 n 秒后再执行回调，如果在这 n 秒内又被触发，则重新计时。
节流：规定在一个单位时间内，只能触发一次函数。如果这个单位时间内触发多次函数，只有一次生效。

this

Sun, 23 Nov 2025 16:00:00 GMT

this

1. 默认绑定 (Default Binding)

这是最基础的规则。当函数独立调用，没有带任何修饰符（没有 new，没有 obj.，没有 call）时，应用此规则。

规则：
- 非严格模式：this 指向全局对象（浏览器中是 window，Node.js 中是 global）。
- 严格模式 ('use strict')：this 指向 undefined。

js
function sayHi() {
  console.log(this);
}

sayHi(); // window (非严格模式) / undefined (严格模式)

面试陷阱：这也是你之前做错的那道题的原因。const say = person.sayName; say(); 这里 say 是独立调用的，所以 this 丢了，变成了全局或 undefined。

2. 隐式绑定 (Implicit Binding)

当函数作为对象的方法被调用时，this 指向那个对象。

规则：this 指向调用链中最后一层的对象。

JavaScript
const user = {
  name: 'Alice',
  greet: function() {
    console.log(this.name);
  }
};

user.greet(); // Alice -> user 调用了 greet

隐式丢失（常见坑）：

如果把对象的方法赋值给一个变量，或者作为参数传入回调函数，隐式绑定会丢失，退化为默认绑定。

JavaScript
const fn = user.greet;
fn(); // undefined (因为变成了独立调用)

setTimeout(user.greet, 100); // undefined (回调函数通常也是独立调用的)

3. 显式绑定 (Explicit Binding): call, apply, bind

这三个方法都在 Function.prototype 上，允许你强制指定函数的 this 指向。

A. `call` 和 `apply`

这两个方法非常相似，都会立即执行函数。区别仅在于传递参数的方式。

call(thisArg, arg1, arg2, ...)：参数是一个接一个传的。
apply(thisArg, [argsArray])：参数是放在一个数组里传的。

JavaScript
function introduce(lang, hobby) {
  console.log(`${this.name} likes ${lang} and ${hobby}`);
}

const p1 = { name: 'Bob' };

// 使用 call：参数逗号隔开
introduce.call(p1, 'JS', 'Gaming'); // "Bob likes JS and Gaming"

// 使用 apply：参数放数组里
introduce.apply(p1, ['JS', 'Gaming']); // "Bob likes JS and Gaming"

记忆口诀：apply 对应 array（数组），call 对应 comma（逗号）。

B. `bind`

bind 不会立即执行函数，而是返回一个新的函数。这个新函数的 this 被永久地“锁死”（硬绑定）到了传入的第一个参数上。

场景：常用于 React 类组件的事件处理，或者解决 setTimeout 中的 this 丢失问题。

JavaScript
const p2 = { name: 'Charlie' };

function sayName() {
  console.log(this.name);
}

const boundFn = sayName.bind(p2); // 只是绑定，没执行
boundFn(); // "Charlie"

// 即使之后再 call 别人，也改变不了 bind 的结果
boundFn.call({ name: 'Dave' }); // 依然是 "Charlie"

4. `new` 绑定 (New Binding)

当使用 new 关键字调用构造函数时，会发生以下步骤：

创建一个全新的空对象。
将这个对象的 [[Prototype]] 链接到构造函数的 prototype。
将函数内部的 this 指向这个新对象。
如果函数没有返回其他对象，则自动返回这个新对象。

JavaScript
function Person(name) {
  this.name = name; // this 指向新创建的实例
}

const tom = new Person('Tom');
console.log(tom.name); // "Tom"

5. 特殊规则：箭头函数 (Arrow Function)

箭头函数没有自己的 this。它不遵循以上 4 条规则。

规则：箭头函数的 this 完全取决于定义时（也就是写代码时）所处的外层（词法）作用域。
特点：
- 一旦确定，无法被 call、apply、bind 修改。
- 常用于解决回调函数中 this 指向错误的问题。

JavaScript
const obj = {
  name: 'Arrow',
  // 定义时，外层作用域是全局（对象字面量不构成作用域）
  say: () => {
    console.log(this.name);
  },
  // 普通函数创造了一个作用域
  waitAndSay: function() {
    // 这里的箭头函数定义在 waitAndSay 内部
    // 所以它继承 waitAndSay 的 this (即 obj)
    setTimeout(() => {
      console.log(this.name); 
    }, 100);
  }
};

obj.say(); // undefined (指向全局)
obj.waitAndSay(); // "Arrow" (正确继承了 obj)

总结与优先级 (Priority)

如果同一个调用位置存在多种规则，谁说了算？优先级如下（从高到低）：

new 绑定 (最高)
显式绑定 (call, apply, bind)
隐式绑定 (obj.func())
默认绑定 (func()) (最低)

箭头函数是一个特例，它忽略所有绑定规则（除了 new，但箭头函数不能被 new），只认词法作用域。

一张表复习 `call`, `apply`, `bind`

特性	call	apply	bind
立即执行?	是	是	否 (返回新函数)
参数形式	`arg1, arg2, ...`	`[arg1, arg2, ...]`	`arg1, arg2, ...`
用途	借用方法、改变上下文	处理数组参数 (如 `Math.max`)	预设参数、回调函数绑定

原型链

Wed, 19 Nov 2025 16:00:00 GMT

原型链

原型链是 JavaScript 实现继承（Inheritance）的核心机制。有两个核心的概念：prototype（原型对象）,_ proto_

_ _proto__作为链条链接着prototype，每个函数都有prototype，prototype是给子类提供共享属性的。由于prototype是一个对象。每个对象默认有着一个proto的属性，指向这个对象的构造函数的prototype（即实例.proto === 构造函数.prototype），以此形成链条，当这个实例的prototype中没有所需的属性时候就通过proto向父级的prototype寻找知道找到null（即Object.prototype.proto）

闭包

Wed, 19 Nov 2025 16:00:00 GMT

闭包

一、什么是闭包？

1. 通俗定义（一句话回答）

闭包就是一个函数以及它所引用的周边环境（词法环境）的组合。 简单来说，就是内部函数可以访问外部函数的变量，即使外部函数已经执行完毕。

2. 官方/学术定义 (MDN)

A closure is the combination of a function bundled together (enclosed) with references to its surrounding state (the lexical environment).

二、核心原理

闭包的形成基于 JavaScript 的 词法作用域 (Lexical Scoping) 规则：

函数的作用域在定义时决定，而不是调用时。
内部函数持有对外部函数作用域的引用（Scope Chain）。
当外部函数执行完毕后，因为内部函数还持有引用，所以外部函数的变量对象无法被垃圾回收机制（GC）回收，从而形成了闭包。

text

123456789101112

function createCounter() {
  let count = 0; // 私有变量
  return function() {
    count++;
    console.log(count);
  }
}

const counter = createCounter();
counter(); // 1
counter(); // 2
// count 变量依然存在内存中，但外部无法直接访问

三、闭包的常见应用场景

面试时列举 2-3 个实际场景非常加分：

1. 数据私有化 / 模拟私有变量 (最常用)

在 ES6 类出现之前，闭包是实现模块化和私有变量的主要方式。

text

123456789101112

function User(name) {
  let _name = name; // 私有变量
  
  return {
    getName: function() {
      return _name;
    },
    setName: function(newName) {
      _name = newName;
    }
  }
}

2. 柯里化 (Currying)

将多参数函数转换成一系列单参数函数。

text

1234567

function makeAdder(x) {
  return function(y) {
    return x + y;
  };
}
const add5 = makeAdder(5);
console.log(add5(2)); // 7

3. 防抖与节流 (Debounce & Throttle)

工具函数中大量使用闭包来保存定时器状态 timer。

text

1234567

function debounce(fn, delay) {
  let timer = null; // 闭包变量，保存定时器状态
  return function(...args) {
    if (timer) clearTimeout(timer);
    timer = setTimeout(() => fn.apply(this, args), delay);
  }
}

四、经典面试题：循环中的闭包

这是考察闭包最经典的题目，考察 var 和 let 的区别。

题目

text

123456

for (var i = 1; i <= 3; i++) {
  setTimeout(function() {
    console.log(i);
  }, 1000);
}
// 输出结果是什么？

答案

结果：输出三次 4。
原因：var 声明的变量是函数作用域（这里变成了全局），循环结束后 i 变成了 4。setTimeout 是异步执行的，当它执行时，去读取 i 的值，此时 i 已经是 4 了。

怎么修改为输出 1, 2, 3？

方法 1：使用 let (推荐) let 有块级作用域，每次循环都会创建一个新的绑定。

text

123

for (let i = 1; i <= 3; i++) {
  setTimeout(function() { console.log(i); }, 1000);
}

方法 2：使用立即执行函数 (IIFE) 构造闭包 通过传参，将当前的 i 保存为局部变量 j。

text

12345

for (var i = 1; i <= 3; i++) {
  (function(j) {
    setTimeout(function() { console.log(j); }, 1000);
  })(i);
}

五、闭包的缺点与内存泄漏

缺点：闭包会让变量始终保存在内存中，不会被垃圾回收。如果不当使用，会导致内存消耗过大。
内存泄漏误区：闭包本身不是内存泄漏（它是 JS 的特性）。但如果闭包持有的大量对象不再需要使用，却一直不释放，就会导致内存泄漏。

解决方法：将不再使用的闭包引用置为 null。

text

123

let counter = createCounter();
counter();
counter = null; // 解除引用，允许 GC 回收

六、面试高分回答策略 (Cheat Sheet)

如果面试官问：“讲讲闭包”，你可以这样回答：

下定义：

“闭包是指有权访问另一个函数作用域中变量的函数。简单来说，就是内部函数引用了外部函数的变量，导致这些变量无法被垃圾回收。”
讲原理：

“它的核心原理是基于 JavaScript 的词法作用域链。内部函数在定义时就记住了它所处的环境。”
举例子：

“在实际开发中，闭包主要有两个用途：一是保护变量，比如实现数据私有化、模块化；二是保存变量，比如在防抖节流函数中保存 timer，或者在柯里化函数中保存预设参数。”
提注意：

“不过使用闭包要注意内存管理。因为它会阻止垃圾回收，滥用可能导致内存占用过高。在不再使用时，我会手动将引用置为 null。”

事件循环，宏任务，微任务

Wed, 19 Nov 2025 16:00:00 GMT

事件循环，宏任务，微任务

问题

js
console.log('1');

setTimeout(() => {
  console.log('2');
}, 0);

new Promise((resolve) => {
  console.log('3');
  resolve();
}).then(() => {
  console.log('4');
});

console.log('5');

打印顺序是1,3,5,4,2。在这段代码中1,3,5都是同步任务，所以从上到下立即执行。setTimeout中的是宏任务，.then中的是微任务。优先级是：微任务＞宏任务。常见的微任务有Promise.then / .catch / .finally，process.nextTick（node环境），常见的宏任务有script(整体代码，这是第一个宏任务)，setTimeout / setInterval (定时器)，DOM 事件回调 (如点击事件)，ajax 请求回调。

所以事件循环的顺序是：同步代码先执行（这属于当前的宏任务）->同步代码执行完，立刻清空微任务队列（所有加塞的 Promise.then）->渲染页面（如果有需要）->取出下一个宏任务（比如 setTimeout）->重复第二步

小测验：

js
console.log('1'); // 同步

setTimeout(function() {
    console.log('2'); // 宏任务
}, 0);

async function async1() {
    console.log('3'); // 同步？还是异步？
    await async2();
    console.log('4'); // 这里的代码相当于在 .then 里
}

async function async2() {
    console.log('5');
}

async1();

new Promise(function(resolve) {
    console.log('6');
    resolve();
}).then(function() {
    console.log('7');
});

console.log('8');

答案是：1, 3, 5, 6, 8, 4, 7, 2，注意await async2();是同步代码

组件间传值

Sun, 16 Nov 2025 16:00:00 GMT

组件间传值

父传子

父组件：

vue

12345678910111213

<template>
  <div style="background-color: lightcoral;">
    我是父组件
    <!-- 将要传给子组件的值重新命个名加上：即可 -->
    <Children :name = "fatherName"></Children>
  </div>

</template>

<script setup>
import Children from './components/children.vue'
const fatherName = 'Cain'
</script>

子组件：

vue

123456789101112131415

<template>
  我是子组件
  父亲的名字是：{{ props.name }}
</template>

<script setup>
// 接收父组件传过来的值
const props = defineProps({
  name: {
    type: String,
    default: '默认值'
  }
})
</script>

子传父

子组件：

vue

12345678910111213

<template>
  我是子组件
  <button @click="send">发送</button>
</template>

<script setup>
// 定义子组件传值
const emit = defineEmits(['update:childrenName'])
const send = () => {
    // 传值给父组件
  emit('update:childrenName', '这里是子组件传过来的值1', '这里是子组件传过来的值2')
}
</script>

父组件：

vue

123456789101112131415161718

<template>
  <div >
    我是父组件
    <!-- 通过事件的方式接收子组件传过来的值 事件名要与子组件中定义的相同-->
     <!-- 需要使用一个函数来接收，因为子组件的值是放到参数中的-->
    <Children @update:children-name="getChildrenName"></Children>
  </div>
</template>

<script setup>
import { ref } from 'vue'
import Children from './components/children.vue'
const childrenName = ref('')
// 定义接收子组件传值的方法
const getChildrenName = (name1, name2) => {
  console.log(name1, name2)
}
</script>

子组件参数暴露

子组件：

vue

12345678910111213

<template>
  我是子组件
</template>

<script setup>
// 使用 defineExpose 向父组件暴露方法或属性
defineExpose({
  send() {
    console.log('子组件发送消息')
  },
  name: '子组件名称'
})
</script>

父组件：

vue

12345678910111213141516171819

<template>
  <div >
    我是父组件
    <!-- 使用ref绑定一下子组件的实例 -->
    <Children ref="children"></Children>
  </div>
</template>

<script setup>
import { ref } from 'vue'
import Children from './components/children.vue'
const children = ref('')
import { onMounted } from 'vue'
onMounted(() => {
  // 通过ref访问子组件暴露的方法
  children.value?.send()
  console.log(children.value?.name) // 访问子组件暴露的属性
})
</script>

这样拿到的子组件参数不能直接修改

WebSocket

Mon, 03 Nov 2025 16:00:00 GMT

WebSocket

安装

bash

npm i ws//安装WebSocket
npm i @types/ws -D//安装声明文件

前后端互发消息（后端）

js
import { WebSocketServer } from 'ws'
// 创建一个WebSocket服务器 端口8080
const wss = new WebSocketServer({port: 8080},() => {
    console.log('服务器启动成功！')
})
// 监听客户端连接事件
wss.on('connection', (socket) => {
    console.log('客户端连接成功')
    socket.on('message', (message) => {
        console.log('收到客户端消息：', message.toString())
        socket.send(message.toString())
    })
})

前后端互发消息（前端）

js
import { ref } from 'vue'
const msg = ref('hello')
const list = ref(null)
const send = () => {
  //发送信息
  if(msg.value)ws.send(msg.value)
}
// 引入WebSocket
const ws = new WebSocket('ws://localhost:8080')
// 连接成功
ws.onopen = () => {
    console.log('连接成功')
}
// 接收到消息
ws.onmessage = (msg) => {
  console.log(msg.data);
}

群发消息（后端，前端不需要修改）

js
import { WebSocketServer } from 'ws'
// 创建一个WebSocket服务器 端口8080
const wss = new WebSocketServer({port: 8080},() => {
    console.log('服务器启动成功！')
})
// 监听客户端连接事件
wss.on('connection', (socket) => {
    console.log('客户端连接成功')
    socket.on('message', (message) => {
        console.log('收到客户端消息：', message.toString())
        //群发
        wss.clients.forEach((client) => {
            client.send(message.toString())
        })
    })
})

跨域

Sun, 02 Nov 2025 16:00:00 GMT

跨域

解决跨域问题有四种方案：jsonp（需要前后端协作，不安全），打包工具（纯前端，只能在开发阶段解决跨域），设置相应头（纯后端），nginx

1. 什么是跨域？

跨域本质上是浏览器为了安全而引入的一种 同源策略 (Same-Origin Policy)。

当一个请求 URL 的 协议 (Protocol)、域名 (Domain)、端口 (Port) 三者中，只要有一个与当前页面的 URL 不同，就会产生跨域。

1.1 同源策略判断表

假设当前页面地址为: http://www.example.com/index.html

请求地址	结果	原因
`http://www.example.com/api/data`	成功	同源
`https://www.example.com/api/data`	跨域	协议不同 (http vs https)
`http://api.example.com/data`	跨域	域名不同 (www vs api)
`http://www.example.com:8080/data`	跨域	端口不同 (80 vs 8080)
`http://www.google.com/api`	跨域	域名完全不同

1.2 为什么要有同源策略？

主要是为了安全。如果没有同源策略，恶意网站可能会窃取你在其他网站（如银行）的敏感数据（Cookies、LocalStorage），或者利用你的登录状态伪造请求（CSRF 攻击）。

2. 常见的解决方案

解决跨域的核心思路通常有两种：

后端配合：允许特定的源访问（CORS）。
绕过浏览器：通过服务器代理转发请求（因为服务器之间没有同源策略）。

以下是 5 种最常用的解决方案：

这是目前最标准、最通用的解决方案。它需要后端在响应头中添加特定的字段，告诉浏览器：“我允许这个源访问我”。

核心响应头：

Access-Control-Allow-Origin: 允许访问的源（例如 http://localhost:3000 或 *）。
Access-Control-Allow-Methods: 允许的请求方法（GET, POST, PUT, DELETE 等）。
Access-Control-Allow-Headers: 允许的自定义 Header。

代码示例 (Node.js/Express):

text

123456789101112131415161718192021

const express = require('express');
const app = express();

// 方法 1: 手动设置 Header
app.use((req, res, next) => {
    // 允许所有来源访问，生产环境建议指定具体域名
    res.header('Access-Control-Allow-Origin', '*'); 
    res.header('Access-Control-Allow-Headers', 'Content-Type, Authorization');
    res.header('Access-Control-Allow-Methods', 'PUT, POST, GET, DELETE, OPTIONS');
    next();
});

// 方法 2: 使用 cors 中间件 (推荐)
const cors = require('cors');
app.use(cors()); 

app.get('/api/data', (req, res) => {
    res.json({ msg: '这是跨域数据' });
});

app.listen(3000);

方案二：开发环境代理 (Proxy) 【前端开发常用】

在前端开发阶段（使用 Vue, React, Webpack, Vite 等），由于本地服务器（如 localhost:3000）和后端接口（如 https://www.google.com/search?q=api.server.com）不同源，常使用本地代理解决。

原理：浏览器 -> 本地开发服务器 (同源) -> 转发请求到后端服务器。 服务器与服务器之间通信不受同源策略限制。

代码示例 (Vite `vite.config.js`):

text

123456789101112

export default defineConfig({
  server: {
    proxy: {
      // 当请求路径以 /api 开头时
      '/api': {
        target: '[http://backend-api.com](http://backend-api.com)', // 目标后端地址
        changeOrigin: true, // 修改请求头的 Host 为目标地址
        rewrite: (path) => path.replace(/^\/api/, '') // 去掉 /api 前缀
      }
    }
  }
})

注意：这只在开发环境有效，生产环境通常需要 Nginx 配合。

方案三：Nginx 反向代理【生产环境常用】

在项目上线时，通常使用 Nginx 作为反向代理服务器。前端请求 Nginx，Nginx 再转发给后端，从而实现“同源”的效果。

Nginx 配置示例 (`nginx.conf`):

text

12345678910111213141516171819

server {
    listen 80;
    server_name [www.example.com](https://www.example.com);

    # 前端静态资源
    location / {
        root /usr/share/nginx/html;
        index index.html;
    }

    # 接口代理
    location /api/ {
        proxy_pass http://backend-server:8080/; # 转发到真实后端
        
        # 也可以在这里配置 CORS 头
        add_header Access-Control-Allow-Origin *;
        add_header Access-Control-Allow-Methods 'GET, POST, OPTIONS';
    }
}

方案四：JSONP (JSON with Padding) 【老旧方案】

JSONP 是利用 <script> 标签不受同源策略限制的特性来实现跨域的。

缺点：只支持 GET 请求，不安全（容易受 XSS 攻击），现在已经很少使用，主要用于兼容极老的系统。

前端实现原理：

text

1234567

<script>
    function handleResponse(data) {
        console.log('获取到的数据:', data);
    }
</script>
<!-- 请求后端，并告诉后端回调函数名是 handleResponse -->
<script src="https://cjw32.xyz/blog/article/2025110301/[http://api.example.com/data?callback=handleResponse](http://api.example.com/data?callback=handleResponse)"></script>

方案五：Websocket

Websocket 协议本身不受同源策略限制。如果你使用 Socket.io 等库进行通信，天然支持跨域。

3. 总结与建议

场景	推荐方案	备注
日常开发调试	Proxy (代理)	配置简单，无侵入，仅对开发环境有效
生产环境 API	CORS	标准做法，后端控制权限，支持所有 HTTP 方法
项目部署	Nginx 反向代理	性能高，架构清晰，隐藏真实后端地址
老旧系统兼容	JSONP	仅限 GET 请求，不推荐新项目使用

最佳实践流程：

开发时：前端配置 proxy 解决本地开发跨域。
上线时：后端配置 CORS 允许特定的线上域名访问，或者运维配置 Nginx 反向代理将前端和后端聚合在同一个域下。

promise

Mon, 27 Oct 2025 16:00:00 GMT

promise

Promise 是 JavaScript 异步编程的核心解决方案，它代表了一个异步操作的最终完成（或失败）及其结果值。

1. Promise 的核心概念与状态

1.1 三种状态 (States)

一个 Promise 必然处于以下三种状态之一，且状态的改变是不可逆的。

Pending (待定): 初始状态。既没有被兑现（fulfilled），也没有被拒绝（rejected）。
Fulfilled (已兑现/已成功): 意味着操作成功完成。此时会有一个 result (值)。
Rejected (已拒绝/已失败): 意味着操作失败。此时会有一个 error (通常是一个 Error 对象)。

1.2 状态转化 (State Transitions)

Promise 的状态流转只有两个方向，一旦发生，状态就固定 (Settled) 了，不会再变：

Pending -> Fulfilled: 调用 resolve(value)
Pending -> Rejected: 调用 reject(reason) 或执行器函数内抛出异常。

1.3 基本语法

js
const myPromise = new Promise((resolve, reject) => {
    // 这是一个 "Executor" (执行器) 函数，会立即执行
    const success = true;

    if (success) {
        // 将状态从 Pending 改为 Fulfilled
        resolve("操作成功！"); 
    } else {
        // 将状态从 Pending 改为 Rejected
        reject(new Error("操作失败...")); 
    }
});

2. 实例方法 (Instance Methods)

创建 Promise 后，我们通过以下方法处理结果：

2.1 `.then(onFulfilled, onRejected)`

接收两个函数作为参数。
第一个参数在 Promise 成功时执行。
第二个参数在 Promise 失败时执行（可选，一般常用 .catch 代替）。
链式调用: .then 返回一个新的 Promise。

2.2 `.catch(onRejected)`

专门用于捕获错误（Rejected 状态）。
等同于 .then(null, onRejected)。
具有“冒泡”性质，可以捕获前面链中任何一个步骤抛出的错误。

2.3 `.finally(onFinally)`

无论 Promise 是成功还是失败，都会执行。
通常用于清理工作（如关闭加载动画、关闭数据库连接）。

3. 静态方法 (Static Methods) - 并发与调度

这是你提到的类似于 Promise.all 的方法集合。它们用于处理多个 Promise 的组合情况。

3.1 `Promise.all([p1, p2, ...])` (全有或全无)

机制: 接收一个 Promise 数组（或可迭代对象）。
成功: 只有当所有 Promise 都成功时，才返回成功，结果是结果数组。
失败: 只要有任意一个 Promise 失败，立即返回失败（短路效应），错误信息是那个失败的 Promise 的错误信息。

js
const p1 = Promise.resolve(3);
const p2 = 42;
const p3 = new Promise((resolve, reject) => {
  setTimeout(resolve, 100, 'foo');
});

Promise.all([p1, p2, p3]).then((values) => {
  console.log(values); // [3, 42, "foo"]
});

3.2 `Promise.allSettled([p1, p2, ...])` (无论死活，都要结果)

机制: 等待所有 Promise 完成，无论它们是成功还是失败。
结果: 返回一个对象数组，每个对象包含 status ('fulfilled' 或 'rejected') 和对应的 value 或 reason。
适用场景: 并发请求，不关心其中某些是否失败，想拿到所有结果时。

js
const p1 = Promise.resolve('Success');
const p2 = Promise.reject('Fail');

Promise.allSettled([p1, p2]).then((results) => {
  // results: 
  // [
  //   { status: 'fulfilled', value: 'Success' },
  //   { status: 'rejected', reason: 'Fail' }
  // ]
});

3.3 `Promise.race([p1, p2, ...])` (赛跑，谁快谁赢)

机制: 哪个 Promise 最先解决（无论是成功还是失败），Promise.race 就返回那个结果。
适用场景: 设置请求超时（网络请求 vs 设定时间的 Reject）。

js
const pSlow = new Promise(resolve => setTimeout(resolve, 500, '慢'));
const pFast = new Promise(resolve => setTimeout(resolve, 100, '快'));

Promise.race([pSlow, pFast]).then((value) => {
  console.log(value); // "快"
});

3.4 `Promise.any([p1, p2, ...])` (求生欲，只要一个成功)

机制: 等待直到有任意一个 Promise 成功。
成功: 返回第一个成功的 Promise 的值。
失败: 只有当所有 Promise 都失败时，才返回失败（AggregateError）。
区别: 与 race 不同，any 会忽略失败的 Promise，直到遇到成功的。

js
const pErr = Promise.reject('错误');
const pSlow = new Promise(resolve => setTimeout(resolve, 500, '慢但成功'));
const pFast = new Promise(resolve => setTimeout(resolve, 100, '快但成功'));

Promise.any([pErr, pSlow, pFast]).then((value) => {
  console.log(value); // "快但成功" (忽略了 pErr)
});

3.5 辅助方法

Promise.resolve(value): 快速创建一个状态为 Fulfilled 的 Promise。
Promise.reject(reason): 快速创建一个状态为 Rejected 的 Promise。

4. 总结对比表

方法	描述	成功条件	失败条件
Promise.all	并行执行，且必须全部成功	所有都成功	任意一个失败 (立即返回)
Promise.allSettled	并行执行，获取所有结果	总是成功 (等待所有完成)	不会失败 (除非迭代器本身出错)
Promise.race	赛跑，以最快的为准	第一个 Settled 的是成功	第一个 Settled 的是失败
Promise.any	只要有一个成功即可	任意一个成功	所有都失败

5. 最佳实践代码示例

js
// 模拟两个异步任务
const fetchUser = () => new Promise(resolve => setTimeout(() => resolve("用户数据"), 1000));
const fetchPosts = () => new Promise(resolve => setTimeout(() => resolve("文章数据"), 1500));
const fetchError = () => new Promise((_, reject) => setTimeout(() => reject("连接超时"), 500));

async function main() {
    console.log("--- 开始 Promise.all 演示 ---");
    try {
        // 只有两个都成功才会打印
        const [user, posts] = await Promise.all([fetchUser(), fetchPosts()]);
        console.log(`Promise.all 结果: ${user}, ${posts}`);
    } catch (e) {
        console.error("Promise.all 出错:", e);
    }

    console.log("\n--- 开始 Promise.allSettled 演示 ---");
    // 即使包含 fetchError，也会返回所有结果
    const results = await Promise.allSettled([fetchUser(), fetchError()]);
    results.forEach((res, index) => {
        if (res.status === 'fulfilled') {
            console.log(`任务 ${index} 成功: ${res.value}`);
        } else {
            console.log(`任务 ${index} 失败: ${res.reason}`);
        }
    });
    
    console.log("\n--- 开始 Promise.any 演示 ---");
    try {
        // 忽略 fetchError，返回最快成功的 fetchUser
        const firstSuccess = await Promise.any([fetchError(), fetchUser(), fetchPosts()]);
        console.log(`Promise.any 赢家: ${firstSuccess}`);
    } catch (e) {
        console.log("全军覆没");
    }
}

main();

插槽

Sun, 26 Oct 2025 16:00:00 GMT

插槽

插槽就是子组件中的提供给父组件使用的一个占位符，用表示，父组件可以在这个占位符中填充任何模板代码，如 HTML、组件等，填充的内容会替换子组件的标签。

匿名插槽

vue

12345678910

<!-- 我是子组件slot_test.vue -->
<template>
  <div style="background-color: aqua; width: 1000px; height: 100px"></div>
  <div style="background-color: red; width: 1000px; height: 100px">
    <slot></slot>
  </div>
  <div
    style="background-color: greenyellow; width: 1000px; height: 100px"
  ></div>
</template>

vue

123456789

<!-- 父组件 -->
<template>
  <slot_test>
    <template #default>
      <h3>我是默认插槽</h3>
    </template>
  </slot_test>
</template>

具名插槽

vue

12345678910111213

<!-- 我是子组件slot_test.vue -->
<template>
  <div style="background-color: aqua; width: 1000px; height: 100px">
    <slot name="header"></slot>
  </div>
  <div style="background-color: red; width: 1000px; height: 100px">
    <slot></slot>
  </div>
  <div style="background-color: greenyellow; width: 1000px; height: 100px">
    <slot name="footer"></slot>
  </div>
</template>

vue

12345678910111213141516

<!-- 父组件 -->
<template>
  <slot_test>
    <template #default>
      <h3>我是默认插槽</h3>
    </template>
    <!-- 完整写法 -->
    <template v-slot:header>
      <h3>我是header插槽</h3>
    </template>
    <!-- 简写写法 -->
    <template #footer>
      <h3>我是footer插槽</h3>
    </template>
  </slot_test>
</template>

LazyMan函数实现

Fri, 24 Oct 2025 16:00:00 GMT

LazyMan函数实现

题目：

js
//1
LazyMan("Cain")
//输出“你好！我是Cain！”

//2
LazyMan("Cain").sleep(10).eat("dinner")
//输出“你好！我是Cain！”
//等待10秒
//输出“我醒了，我睡了10秒”
//输出“我现在吃晚饭”

//3
LazyMan("Cain").sleep(10).eat("dinner").eat("breakfast")
//输出“你好！我是Cain！”
//等待10秒
//输出“我醒了，我睡了10秒”
//输出“我现在吃晚饭”
//我现在吃早饭

//4
LazyMan("Cain").sleep(10).eat("dinner").eat("breakfast").sleepFirst(5)
//等待5秒
//输出“我醒了，我睡了5秒”
//输出“你好！我是Cain！”
//等待10秒
//输出“我醒了，我睡了10秒”
//输出“我现在吃晚饭”
//我现在吃早饭

代码实现：

js
import { onMounted } from "vue";

const LazyMan = (name) => {
  var queue = [];
  const task = () => {
    console.log(`你好！我是${name}`);
    next();
  };

  const next = () => {
    if (queue.length > 0) {
      queue.shift()();
    }
  };
  queue.push(task);
  //
  setTimeout(next, 0);

  const api = {
    sleep(time) {
      const task = () => {
        setTimeout(() => {
          console.log(`等待了${time}秒`);
          next();
        }, time * 1000);
      };
      queue.push(task);
      return api;
    },
    eat(food) {
      const task = () => {
        if (food == "dinner") {
          console.log(`我吃了晚饭`);
          next();
        }
        else {
          console.log(`我吃了早饭`);
          next();
        }
      };
      queue.push(task);
      return api;
    },
    sleepFirst(time) {
      const task = () => {
        setTimeout(() => {
          console.log(`等待了${time}秒`);
          next();
        }, time * 1000);
      };
      queue.unshift(task);
      return api;
    },
  };
  return api;
};
onMounted(() => {
  LazyMan("Cain").sleep(10).eat("dinner").eat("breakfast").sleepFirst(5)
});

执行过程：

js
1. 创建 queue = []
2. 创建 task 函数  
3. queue.push(task) → queue = [task]
4. setTimeout(next, 0) ← 只是注册，不立即执行！
5. 创建并返回 api 对象
6. 调用 sleep(5):
   - queue.push(sleepTask) → queue = [task, sleepTask]

7. 事件循环：现在才执行 setTimeout 回调回调！
   - next() 第一次执行：取出并执行 task()
     ↓
     输出"你好！我是张三"
     调用 next()
     
   - next() 第二次执行：取出并执行 sleepTask()
     ↓
     设置5秒定时器

生命周期

Fri, 24 Oct 2025 16:00:00 GMT

生命周期

vue有三个阶段，创建，更新，卸载，分别对应6个生命周期钩子函数

js
import { onBeforeMount, onBeforeUnmount, onBeforeUpdate, onMounted, onUnmounted, onUpdated } from "vue";

//创建
onBeforeMount(() => {
  //无法访问dom
  console.log("创建之前=======>");
});
onMounted(() => {
  //可以访问dom
  console.log("创建之后=======>");
});
//更新
onBeforeUpdate(() => {
  //可以访问dom,访问到的是更新前的dom
  console.log("更新之前=======>");
});
onUpdated(() => {
  //可以访问dom,访问到的是更新后的dom
  console.log("更新之后=======>");
});
//卸载,卸载组件的操作可以通过使用v-if来进行卸载
onBeforeUnmount(() => {
  console.log("卸载之前=======>");
});
onUnmounted(() => {
  console.log("卸载之后=======>");
});

除此之外还有4个生命钩子函数分别是，beforeCreate,created(使用setup就没有前两个生命周期),onRenderTracked,onRenderTriggered(这两个生命周期钩子函数是用来调试的，他会在组件中内容被修改时返回一个effect事件)

watch监听器

Mon, 20 Oct 2025 16:00:00 GMT

watch监听器

用于监听响应式变量，当传入的响应式变量发生变化就执行传入的逻辑，用法如下：

vue

12345678910111213141516

<template>
  <input type="text" v-model="name1" />
  <input type="text" v-model="name2" />
</template>

<script setup>
import { ref, watch } from "vue";

const name1 = ref("张三");
const name2 = ref("李四");

//当有多个变量需要监听时，可以使用数组，这样返回的值也是一个数组
watch([name1, name2], (newValues, oldValues) => {
  console.log(newValues, oldValues);
});
</script>

watch的其他参数

js
import { ref, watch } from "vue";

const name1 = ref({
  foo:{
    bar:{
      name:"Cain"
    }
  }
});

watch(name1, (newValues, oldValues) => {
  console.log(newValues, oldValues);
},{
  deep:true,//开启深度监听
  immediate:true,//立即执行
  flush:"pre"//pre 组件更新前执行 sync 同步执行 post 组件更新后执行
});

Computed计算属性

Sat, 18 Oct 2025 16:00:00 GMT

Computed计算属性

Computed有两种写法选项式和函数式

选项式

vue

12345678910111213141516171819202122232425

<template>
<input type="text" v-model="firstName">
<input type="text" v-model="lastName">
{{ name }}
<button @click="change">修改</button>
</template>

<script setup lang="ts">
import { computed, ref } from 'vue';
const firstName = ref('张');
const lastName = ref('三');
const change = () => {
  name.value = 'Mc_Cain'
}
//选项式
const name = computed({
  get() {//computed展示的逻辑
    return firstName.value + "_" + lastName.value
  },
  
  set(value: string) {//computed修改时执行的函数
    [firstName.value, lastName.value] = value.split('_')
  }
})
</script>

函数式

vue

12345678910111213141516

<template>
<input type="text" v-model="firstName">
<input type="text" v-model="lastName">
{{ name }}
</template>

<script setup lang="ts">
import { computed, ref } from 'vue';
const firstName = ref('张');
const lastName = ref('三');

//函数式
const name = computed(() => {
  return firstName.value + lastName.value
})
</script>

函数式只能实现get函数的逻辑，不能实现set的逻辑，因此使用函数式定义的Computed不能修改

to全家桶

Wed, 15 Oct 2025 16:00:00 GMT

to全家桶

toRef：能将reactive的属性转化为ref对象，但是不能将非响应式的数据转化为ref对象。可以用于将reactive的属性解构成ref对象。

用法如下：

vue

12345

<script setup lang="ts">
import { reactive, toRef } from 'vue';
const Cain = reactive({name: "Cain"})
const name = toRef(Cain, "name")
</script>

toRefs:能将reactive的每一个属性转化为ref对象，用法如下：

vue

123456789

<script setup lang="ts">
import { reactive, toRef, toRefs } from 'vue';
const Cain = reactive({
  name: 'Cain',
  age: 18,
  gander: "男"
})
const { name, age, gander} = toRefs(Cain)
</script>

toRefs的底层实现非常简单，就是将reactive的每个属性都使用toRef转成ref，再创建一个全是ref对象属性reactive返回出去

vue

1234567891011121314151617

<script setup lang="ts">
import { reactive, toRef } from 'vue';
const Cain = reactive({
  name: 'Cain',
  age: 18,
  gander: "男"
})
//手写toRef
const toRefs = <T extends object>(object: T) => {
    const map:any = {}
    for (let key in object) {
      map[key] = toRef(object,key)
    }
    return map
}
const { name, age, gander} = toRefs(Cain)
</script>

toRaw:将响应式对象转化为普通对象，即消除响应式。

用法如下：

vue

123456789

<script setup lang="ts">
import { onMounted, reactive, toRaw, toRef } from 'vue';
const Cain = reactive({
  name: 'Cain',
  age: 18,
  gander: "男"
})
console.log(Cain,toRaw(Cain))
</script>

可以看到将原来的proxy对象变成了普通对象

响应式源码实现

Wed, 15 Oct 2025 16:00:00 GMT

响应式源码实现

reactive

vue

1234567891011121314

<script setup lang="ts">
const reactive = <T extends object>(target: T) => {
    return new Proxy(target, {
        get(target, key, receiver){//tarftet:目标对象 key:属性名 receiver:代理对象本身
            //返回目标对象的属性值,使用反射 API 执行原始的属性写入操作，行为与直接赋值类似，使用Reflect可以避免上下文错乱的问题
            return Reflect.get(target, key, receiver)
        },
        set(target, key, value, receiver){
            //设置目标对象的属性值
            return Reflect.set(target, key, value, receiver)
        }
    })
}
</script>

Reactive全家桶

Sun, 12 Oct 2025 16:00:00 GMT

Reactive全家桶

reactive的作用也是创建一个响应式对象，reactive与ref的区别是reactive只接收引用类型（Object，Array，Map等），且使用时不用加.value。而ref接受任何类型，且使用时需要加.value。reactive的使用场景一般为为form表单进行数据双向绑定。

由于reactive是一个proxy对象，所以不能直接用对象或者数组对reactive进行赋值，这样会让reactive失去响应性。

readonly

readonly能够将reactive变成只读的

vue

123456

<script setup lang="ts">
import { reactive, readonly } from 'vue';
const Cain = reactive({name: "Cain"})
const read = readonly(Cain)
//这样read就是Cain的只读版本了，是不能直接修改read里面的属性的，但是能够通过修改Cain的属性来间接修改read属性
</script>

shallowReactive

与shallowRef相同，能将reactive变成浅层次的响应,根本原因还是因为没有触发视图的更新

vue

1234567891011121314151617181920

<template>
  <button @click="change">修改</button>
  <h1>{{ shallowCain.first.name }}</h1>
</template>

<script setup lang="ts">
import { reactive, readonly, shallowReactive } from "vue";
const shallowCain = shallowReactive({
  first: {
    name: "Cain",
  },
});
const Cain = reactive({ name: "Cain" });
const read = readonly(Cain);
const change = () => {
  //这样修改是不可以的，因为shallowReactive只到第一层即first
  shallowCain.first.name = "我被修改了";
};
</script>

同样，shallowReactive也具有与shallowRef相同的特性，即与reactive写到一起的时候，也会引起shallowReactive的更新

Ref全家桶

Sat, 11 Oct 2025 16:00:00 GMT

Ref全家桶

由于ref返回的是一个ES6的class类，要修改ref的值要通过.value来进行修改。

isRef

用于判断是不是ref，用法为

vue

12345

<script setup>
import { isRef, ref } from 'vue';
const Cain = ref({name: "Cain"})
isRef(Cain)//返回一个布尔值
</script>

shallowRef

ref实现深层次的响应，shallowRef实现浅层的响应

vue

1234567891011121314151617

<template>
  <button @click="change" style="width: 200px;height: 200px;">修改</button>
  <div>
    <h1>ref:{{ Cain }}</h1>
    <h1>shallowRef:{{ Cain2 }}</h1>
  </div>
</template>

<script setup>
import { ref, shallowRef } from "vue";
const Cain = ref({ name: "Cain" });
const Cain2 = shallowRef({ name: "Cain2" });
const change = () => {
  Cain2.value.name = "Cain3";
  console.log(Cain2);
};
</script>

点击按钮前，视图效果如下：

点击按钮后，视图效果没有变化，控制台输出：

说明值变化了，但是视窗没有变化，这是因为shallowRef的响应是浅层的，shallowRef的响应只到.value处，如果要实现修改shallowRef的效果需要直接修改.value

vue

123456789

<script setup>
import { ref, shallowRef } from "vue";
const Cain = ref({ name: "Cain" });
const Cain2 = shallowRef({ name: "Cain2" });
const change = () => {
  Cain2.value = { name: "Cain3" };//修改成这样就可以实现响应了
  console.log(Cain2);
};
</script>

视窗显示：

可以看到视图成功响应了，但是有一个地方需要注意就是如果ref跟shallowRef写到一起就会引起shallowRef跟ref一起变化

vue

12345678910111213

<script setup>
import { ref, shallowRef } from "vue";
const Cain = ref({ name: "Cain" });
const Cain2 = shallowRef({ name: "Cain2" });
    
//如果这样写的话shallowRef就会被ref影响到改变
const change = () => {
  Cain.value.name = "我是ref"
  Cain2.value.name = "我被影响了";
  console.log(Cain2);
};
    
</script>

这是因为ref更新底层会调用triggerRef

vue

123456789101112

<script setup>
import { ref, shallowRef, triggerRef } from "vue";
const Cain = ref({ name: "Cain" });
const Cain2 = shallowRef({ name: "Cain2" });

//如果这样写的话shallowRef也会更新
const change = () => {
  Cain2.value.name = "我被影响了";
  triggerRef(Cain2)
  console.log(Cain2);
};
</script>

效果如下：

customRef

用于自己实现ref功能，但是可以在ref更新过程中加入一些自己的逻辑，例如防抖，下面是自己实现一个最简易的ref代码

vue

123456789101112131415161718192021222324

<script setup lang="ts">
import { customRef, ref, shallowRef, triggerRef } from "vue";
const Cain = ref({ name: "Cain" });
const Cain2 = shallowRef({ name: "Cain2" });
//实现一个最基础的ref
function MyRef<T>(value: T) {
  return customRef((track, trigger) => {
    return {
      get(){
        track()//收集依赖
        return value
      },
      set(newVal){
        value = newVal
        trigger()//更新依赖
      }
    }
  })
}
const myRef = MyRef<string>("myCain")
const change = () => {
  myRef.value = "我被修改了"
}
</script>

以下是最简单的防抖功能实现

vue

123456789101112131415161718192021222324252627282930

<script setup lang="ts">
import { customRef, ref, shallowRef, triggerRef } from "vue";
const Cain = ref({ name: "Cain" });
const Cain2 = shallowRef({ name: "Cain2" });
//实现一个最基础的防抖
function MyRef<T>(value: T) {
  let timer: any;
  return customRef((track, trigger) => {
    return {
      get() {
        track(); //收集依赖
        return value;
      },
      set(newVal) {
        clearTimeout(timer);
        timer =  setTimeout(() => {
          console.log("调用了接口")
          timer = null
          value = newVal;
          trigger(); //更新依赖
        },500);
      },
    };
  });
}
const myRef = MyRef<string>("myCain");
const change = () => {
  myRef.value = "我被修改了";
};
</script>

js中常用的数组操作

Tue, 09 Sep 2025 16:00:00 GMT

js中常用的数组操作

本文按「增删改 → 遍历 → 转换 → 排序反转 → 其他常用」五类，整理 JavaScript 数组的常用方法。表中统一标注：作用、返回值、是否改变原数组（原数组被修改记「是」，返回新数组记「否」）。

1. 数组增删改

1.1 添加元素

方法	作用	返回值	是否改变原数组
`push()`	在数组末尾添加元素	新数组长度	是
`unshift()`	在数组开头添加元素	新数组长度	是
`concat()`	合并数组，返回新数组	新数组	否
`splice()`	在指定位置插入/删除元素	被删除的元素数组	是

js
const arr = [1, 2, 3];

arr.push(4);        // 返回 4，arr 变为 [1, 2, 3, 4]
arr.unshift(0);     // 返回 5，arr 变为 [0, 1, 2, 3, 4]

const merged = arr.concat([5, 6]);
// merged: [0, 1, 2, 3, 4, 5, 6]，arr 不变

// 从索引 1 开始删除 0 个元素，插入 9
arr.splice(1, 0, 9); // 返回 []，arr 变为 [0, 9, 1, 2, 3, 4]

1.2 删除元素

方法	作用	返回值	是否改变原数组
`pop()`	删除最后一个元素	被删除的元素	是
`shift()`	删除第一个元素	被删除的元素	是
`splice()`	删除指定位置元素	被删除的元素数组	是
`filter()`	过滤符合条件的元素	新数组	否

js
const arr = [1, 2, 3, 4, 5];

arr.pop();          // 返回 5，arr 变为 [1, 2, 3, 4]
arr.shift();        // 返回 1，arr 变为 [2, 3, 4]

const kept = arr.filter((x) => x > 2);
// kept: [3, 4]，arr 不变

1.3 修改元素

方法	作用	返回值	是否改变原数组
`splice()`	替换指定位置元素	被删除的元素数组	是
直接索引赋值	`arr[i] = 值`	修改后的值	是

js
const arr = [1, 2, 3, 4, 5];

arr[0] = 99;          // arr 变为 [99, 2, 3, 4, 5]

arr.splice(1, 2, 100); // 返回 [2, 3]，arr 变为 [99, 100, 4, 5]

2. 数组遍历

方法	作用	返回值	是否改变原数组
`forEach()`	遍历数组	`undefined`	否
`map()`	映射新数组	新数组	否
`filter()`	过滤数组	新数组	否
`find()`	查找第一个匹配项	元素或 `undefined`	否
`findIndex()`	查找第一个匹配项的索引	索引或 `-1`	否
`some()`	检查是否至少有一个满足条件	`boolean`	否
`every()`	检查是否所有元素满足条件	`boolean`	否

js
const arr = [1, 2, 3, 4, 5];

arr.forEach((x) => console.log(x)); // 依次打印 1 2 3 4 5

const doubled = arr.map((x) => x * 2);
// doubled: [2, 4, 6, 8, 10]

const evens = arr.filter((x) => x % 2 === 0);
// evens: [2, 4]

const firstEven = arr.find((x) => x % 2 === 0);      // 2
const firstEvenIdx = arr.findIndex((x) => x % 2 === 0); // 1
const hasEven = arr.some((x) => x % 2 === 0);        // true
const allEven = arr.every((x) => x % 2 === 0);       // false

3. 数组转换

方法	作用	返回值	是否改变原数组
`join()`	数组转字符串	`string`	否
`toString()`	数组转字符串（逗号分隔）	`string`	否
`Array.from()`	类数组转数组	新数组	否
`flat()`	数组扁平化	新数组	否
`flatMap()`	先 `map()` 再 `flat(1)`	新数组	否

js
const arr = [1, 2, 3];

arr.join("-");      // "1-2-3"
arr.toString();     // "1,2,3"

Array.from("abc"); // ["a", "b", "c"]

const nested = [1, [2, 3], 4];
nested.flat();      // [1, 2, 3, 4]

const mapped = arr.flatMap((x) => [x, x * 2]);
// [1, 2, 2, 4, 3, 6]

4. 数组排序 & 反转

方法	作用	返回值	是否改变原数组
`sort()`	排序（默认按 Unicode）	排序后的数组	是
`reverse()`	反转数组	反转后的数组	是

js
const arr = [3, 1, 4, 2];

arr.sort();         // 默认按字符串比较
// arr: [1, 2, 3, 4]

arr.sort((a, b) => a - b); // 数字升序
arr.reverse();      // arr: [4, 3, 2, 1]

注意：sort() 默认把元素转成字符串按 Unicode 比较，所以 [10, 2, 1].sort() 的结果是 [1, 10, 2]。数字排序务必传入比较函数。

5. 其他常用方法

方法	作用	返回值	是否改变原数组
`slice()`	截取子数组	新数组	否
`includes()`	检查是否包含某元素	`boolean`	否
`indexOf()`	查找元素索引（严格相等）	索引或 `-1`	否
`reduce()`	从左向右累积计算	计算结果	否
`reduceRight()`	从右向左累积计算	计算结果	否

js
const arr = [1, 2, 3, 4, 5];

arr.slice(1, 3);      // [2, 3]，arr 不变
arr.includes(3);      // true
arr.indexOf(3);       // 2

const sum = arr.reduce((acc, cur) => acc + cur, 0);       // 15
const sumFromRight = arr.reduceRight((acc, cur) => acc + cur, 0); // 15

react中的常用hook

Sat, 23 Aug 2025 16:00:00 GMT

react中的常用hook

useState

状态是变化的数据，是组件甚至前端应用的核心。useState有传入值和函数两个参数，返回的setState也有传入值和传入函数两种参数。

useEffect

副作用effect函数是在渲染之外额外执行的一些逻辑。它是根据第二个参数的依赖数组是否变化来决定是否执行effect，可以返回一个清理函数，在下一次effect执行前执行。

useLayoutEffect

作用与useEffect差不多，但是useEffect的effect函数是异步进行的，所以中间有次渲染，中间可能会有闪屏。而useLayoutEffect是同步执行的，所以中间不会闪屏，但计算量大的话会导致掉帧。

useReducer

用来封装一些修改状态的逻辑到reducer，通常setState也能胜任，但是当需要多次使用逻辑时，setState需要书写多次逻辑，使用useReducer就不需要书写多次逻辑代码，直接封装成reducer，通过action触发。当修改深层对象时，创建新对象较麻烦，可以结合使用immer。

useRef

可以用来存储dom引用或者其他内容，通过xxRef.current来取，改变它的内容不会触发重新渲染。

forwardRef + useImperativeHandle

通过forwardRef 可以从子组件转发ref到父组件，如果想要自定义ref内容可以使用useImperativeHandle。

useContext

跨层组件之间传递数据可以使用useContext。用createContext创建Context对象，用provider修改其中的值，function组件用useContext的hook来取值，class组件用Consumer来取值。

memo + useMemo + useCallback

memo包裹的组件只有在props变的时候才会重新渲染，useMemo、useCallback可以防止props不必要的变化，两者一般是结合使用。不过用来当做缓存计算结果等场景的时候，也可以单独用useMemo、useCallback。

hook的闭包陷阱的成因和解决方案

Sat, 23 Aug 2025 16:00:00 GMT

hook的闭包陷阱的成因和解决方案

成因

闭包陷阱就是effect函数等引用了state，形成了闭包，但是并没有把state写到依赖数组中，导致执行effect时用的state还是更新之前的。

解决方案

1、直接把state加到依赖数组中，这样state变化就会重新执行effect函数，引用新的state。但这样做有一个弊端就是在需要用到定时器的场景中需要保证计时器只跑一次，不然重新跑会导致定时不准。

2、使用useState的函数传入形式，从参数拿到上次的state，这样就不会形成闭包了，或者用useReducer，直接dispatch action，而不是直接操作state，这样页不会形成闭包。

3、使用useRef保存每次渲染的值，用到的时候从ref.current取

React核心语法

Wed, 20 Aug 2025 16:00:00 GMT

React核心语法

项目搭建，方法一，在项目中引入React核心文件。方法二，使用脚手架进行创建，在终端输入npx create-react-app 项目名，cd到项目文件后使用npm start启动项目

tsx基本语法

tsx

123456789101112131415161718192021222324252627

import './App.css'
function App(){
    let a = "1"
    const fn = () => {...}
    const fn2 = (num) => {...}
    const fn2 = <T,>(num:T) => {...}//如果想要支持泛型函数需要在类型后面加一个逗号，这样就不会理解为html标签
    const cls = "text"
    const styles = {color:"red"}
    let html = `<seciton><div>我是div</div></seciton>`
              let arr = [1, 2, 3, 4]
    return(
    <>
        <div>{a}</div> //插值格式只需一个花括号
        <div onClick={fn}></div>//事件绑定使用小驼峰
        <div onClick={() => {fn2(123)}}></div>//如果需要传参使用高阶函数
        <div id={id}></div> //绑定id
        <div className={cls}></div> //绑定class
        <div className={`${cls} aaa ccc bbb`}></div> //绑定多个class
        <div style={styles}></div> //绑定style
        <div dangerouslySetInnerHTML={{__html: html}}></div> //添加html代码片段，注意标签中不能有内容
        <div>{arr.map(v => {
                return <div key={v.id}>{v}</div>
            })}</div> //遍历数组
    </>
    )
}
export default App

useState

javascript
import { useState } from "react"
function App(){
    //constent是本次渲染的数据内容，setConstent是用来修改状态的函数
    const [constent,setConstent] = useState('默认内容')
    function handleClick (){
        setConstent('修改内容')
    }
    const [data,setData] = useState({
        title: '默认标题',
        content: '默认内容'
    })
    function handleClick (){
        setConstent('修改内容')
    }
    function handleClick1 (){
        //由于这个函数的逻辑是直接替换状态，所以要重新写一个对象,数组同理
        setConstent({
            ...data,
            content: '新内容'
        })
    }
    return(
    	<>
        	<div>{constent}</div>
        	<button onClick={handleClick}>按钮</button>
			<div>{data.content}</div>
        	<button onClick={handleClick1}>按钮</button>
        </>
    )
}

文件上传及文件相关操作

Mon, 18 Aug 2025 16:00:00 GMT

文件上传及文件相关操作

前端文件上传有两种方式

二进制blob通过formData传输和转为base64传输

前端文件上传涉及到四种文件对象

files：通过input标签度过来的文件对象，前端对象不能传给后端

vue

1234567

<input type="file" name="file" @change="fileChage"/>

<script>
	fileChage(e){
        console.log(e.target.files[0])//files对象是自己创建好的，是一个数组，如果是单文件上传就是第0项
    }
</script>

以下是对上传的文件进行文件类型与大小的限制方法

vue

123456789

<input type="file" name="file" @change="fileChage"/>

<script>
	fileChage(e){
        let file = e.target.files[0]
        if(file.size > 10 * 24 * 24)alert("文件不能大于十兆")
        if(file.type !== 'video/mp4')alert("文件必须是mp4")
    }
</script>

blob:不可变的二进制内容，包含很多操作方法

fileReader:多用与把文件读取为某种形式，如base64,text文本

vue

1234567891011121314

<input type="file" name="file" @change="fileChage"/>
<script>
	fileChage(e){
        let file = e.target.files[0]
        let blob = new Blob([file])//将file对象转为blob对象
        let _sliceBlob = blob.slice(0,5000)//对blob进行切割
        let _sliceFile = new File([_sliceBlob],"fileName.png")//将切割后的blob转为file
        let fr = new FileReader()
        fr.readAsDataURL(_sliceFile)//将切割后的文件转成base64
        fr.onload = function() {//由于FileReader是异步执行的所以需要在这里面使用
            console.log(fr.result)
        }
    }
</script>

注：缩略图功能就是将base64的图片展示出来，文本预览也是使用FileReader做

formData:用于和后端传输的对象

vue

123456789101112131415

<input type="file" name="file" @change="fileChage"/>
<button @click="submit">提交</button>
<script>
    let _fileObj
	fileChage(e){
        let file = e.target.files[0]
 		_fileObj = file
    }
    const submit = () => {//由于formdata的作用主要是用来传递给后端，所以在提交的时候进行转换即可
        let _formData = new FormData()
        _formData.append("user","abcabc")//在给后端的信息中添加一个字段叫user，值为abcabc
        _formData.append("file",_fileObj)//在给后端的信息中添加一个字段叫file，值为_fileObj
        axios.post("/xx.com",_formData)//发送给后端
    }
</script>

以上实现的就是单文件上传

文件的转化关系如下

多文件上传

原理就是将多个文件一个一个发送请求给后端

vue

1234567891011121314151617181920212223

//加上multiple属性支持一次选择多个文件，但是用户体验不好，所以我们需要在js中对其进行一些操作
<input type="file" name="file" @change="fileChage" multiple/>
<button @click="submit">提交</button>
<script>
    let imgList = [];
    let _fileObj;
	fileChage(e){
        if(e.target.files.lenth > 1){
            imgList = imgList.concat(e.target.files)//当添加的文件数大于1的时候就将数组与之前的添加的拼接
        }else{
            imgList.push(e.target.files[0])//当添加的文件数只有1的时候就直接push
        }
 		_fileObj = file
    }
    const submit = () => {//由于formdata的作用主要是用来传递给后端，所以在提交的时候进行转换即可
        imgList.forEach((item) => {//遍历数组，将文件转为FormData
            let _formData = new FormData()
            _formData.append(item.name,item)
            axios.post("/xx.com",_formData)//发送给后端
        })
        
    }
</script>

切片上传

原理：将大文件切成多片再转成formdata形式传给后端

vue

12345678910111213141516171819202122232425

<input type="file" name="file" @change="fileChage"/>
<div>{{ precent }}</div>//文件上传进度展示
<button @click="submit">提交</button>

<script>
    let _fileObj
    let precent //用来展示文件上传进度
	fileChage(e){
        let file = e.target.files[0]
 		_fileObj = file
    }
    const submit = () => {
        let size = 2 * 1024 * 1024 //每片大小2Mb
        let fileSize = _fileObj.size
        let current = 0 //当前切到位置的基准值
        while(current < fileSize){//只要还没切完就继续
            let _formData = new FormData()
            //每次发送2Mb的切片给后端
        	_formData.append(_fileObj.name,_fileObj.silce(current,current + size))
            await axios.post("xxx.com",_formData)
            precent = Math.min((current / fileSize) * 100, 100)//上传进度
            current += size
        }
    }
</script>

后端方面：判断传过来的文件名一致，就拼接起来

vite的基本使用

Sun, 17 Aug 2025 16:00:00 GMT

vite的基本使用

vite的最大特点是利用esm，让代码不像传统的构建工具一样去分析引入，打包构建，而是直接保持模块化，这样省去了大量的编译时间，让代码更改后的响应速度大量提升

基本结构，vite的配置写在vite.config.js中

js
import { defineConfig } from "vite";
export default defineConfig({
    resolve:{},//用来写文件后缀省略或者别名的地方
    build: {
        assetsInlineLimit: 20000//小于20000图片转成base64
    },
    server:{//开发模式配置
        port: 2000,//端口号
    },
    base: "www.xxx.com"//类似于webpack的public path
})

webpack的基本使用

Fri, 15 Aug 2025 16:00:00 GMT

webpack的基本使用

基本使用

安装

要安装webpack5就要安装webpack-cli，以下是全局安装命令

bash
npm install webpack webpack-cli -g 

webpack配置文件应建在根目录名为webpack.config.js，格式为

js
module.exports={} // 要使用commonjs格式

配置属性

entry（必填）：打包入口

js
module.exports={
    entry:{
        app:"./app.js"，
        app2:"./app2.js"
    }
}

output（必填）:出口，即打包出来的文件的存放位置

js
module.exports={
    entry:{
        app:"./app.js"，
        app2:"./app2.js"
    }，
    output:{
        //由于要使用绝对路径，所以加个__dirname，表示当前目录下的绝对路径
        path:__dirname+"./dist" 
        //文件名设定，name指入口名，hash:4是指哈希值取前4位，如果打包内容发生了更新，哈希值就会更新
        filename:"[name].[chunkhash:4].bundle.js"
    }
}

mode(webpack4以后必填):可以填三个值，production(生产模式)，development（开发模式）和none（什么都不做）

js
module.exports={
    //生产模式下会对代码进行压缩和简化，提高效率
    mode: "production"
    entry:{
        app:"./app.js"，
        app2:"./app2.js"
    }，
    output:{
        path:__dirname+"./dist" 
        filename:"[name].[chunkhash:4].bundle.js"
    }
}

loader（非必填）:定义对某种类型文件的处理方案

js
//loader基本格式，在rules中写相应配置
module:{
    rules:[
        
    ]
}

plugins(非必填)：插件

js
//基本格式
plugins:[
    
]

配置基本格式

js
module.exports={
    mode: "production",//打包模式
    optimization:{},
    entry:{}，//打包入口
    output:{},//出口
    devServer:{},
    resolve:{},
    module:{},
    plugins:[],//插件
    
}

webpack处理js

babel-loader:负责将es6转化为es5

bash

npm install babel-loader @babel/core --save-dev

babel-loader的使用

js
module:{
    rules:[
        {
            test:/\.js$/,  //指对所有.js文件进行处理
            use:{ //有多个loader需要使用的时候也可以写成数组形式：use["babel-loader","xxx"]
                loader: "babel-loader",
                options:{//options中填写配置项
                    presets:[//可以将以下部分写到.babelrc中
                        [
               //需要另外安装，在命令行输入npm install @babel/preset-env --save-dev
                            '@babel/preset-env',
                            {
                                targets: {
                                    browsers: [ //通用打包规则
                                        ">1%",
                                        "last 2 versions",
                                        "not ie <=8" 
                                    ]
                                }
                            }
                        ]
                    ]
                }
            }
        }
    ]
}

ESlint:代码规范设定

要使用ESlint需要安装ESlint（bash输入npm install eslint eslint-webpack-plugin --save-dev）,然后在webpack.config.js文件中引用

js
const eslintplugin=require("eslint-webpack-plugin")
module.exports={
    plugins:[
        new eslintplugin();
    ],//插件
    
}

eslint的配置文件写在根目录下的.eslintrc.js

js
module.exports = {
    env: {
        browser: true,
        es2021: true
    },
    //继承的代码规范，常用的有eslint-config-standard和eslint-config-airbnb
    //如果要继承需要重新安装，npm install eslint-config-standard --save-dev
    extends: [
        "standard",
        "plugins:vue/strongly-recommended"
    ],
    //插件,提供eslint没有的规则，或者使用现成的规范
    plugins:[
        "vue"//还需要在extends继承
    ],
    praserOptions: {
        ecmaVersion: 6,
        sourceType: "module",
        ecmaFeature: {//如果希望代码中的jsx也检查，就加上这个
            jsx: true
        }
    },
    rules:{}//这里写eslint的规则，在官网有
}

css文件的处理

安装css-loader，bash输入npm install css-loader style-loader mini-css-extract-plugin --save-dev,以下是css-loader的使用：

js
const minicss=require("mini-css-extract-plugin")
module.exports={
    module:{
        rules:[{},{
            test:/\.css/,//处理css文件
            //顺序很重要，css-loader是让webpack识别css文件，style-loader是将css文件以style的方式插入代码中
            use:[minicss.loader,"style-loader","css-loader"]
        }],
        
    },
    plugins:[
        new minicss({
            filename: "test.bundle.css"//配置文件名
        })
    ],
}

css压缩插件css-minimizer-webpack-plugin:npm install css-minimizer-webpack-plugin --save-dev,使用方法依旧引入一下，然后在plugins中new一下即可

资源文件处理

webpack5自带资源文件处理，使用方式如下

js
module.exports={
    module:{
        rules:[{},{
            test:/\.(jpg|jpeg|png|gif|svg)$/,//处理资源文件
            type:"asset",
            parser:{
                dataUrlCondition:{
                    maxSize:5000//大于5kb的文件就单独拎出来保存，小于的就转化为base64保存在js代码中
                }
            },
            generator:{
                filename:"[name].[chunkhash][ext]"//ext是文件后缀
            }
        }],
        
    },
}

html处理

安装html-webpack-plugin

js
const htmlplugin=require("html-webpack-plugin")
module.exports={
	plugins:[
        new htmlplugin({
            template:"./index.html",//模版文件
            filename:"index.html"//处理出来文件的名字
        })
    ]
}

代码分割

对于单入口文件，为了避免所有的文件打包在一个js里面导致首屏加载过慢，可以在单入口文件里面把后面才需要的文件通过异步加载的方式进行引入，以减少文件体积。使用import方法或require.ensure加载的模块在打包的时候会自动拆分为一个独立文件

js
//例如在3000ms后才需要使用a.js
setTiomeout(() => {
    import("./a.js").then(res => {//then的作用是得到返回的内容
        console.log(res)
    })
})

对于多入口文件，为了避免重复加载同一段逻辑代码，可以将需要重复使用的代码另外缓存下来，需要在webpack.config.js中设置 splitChunks,以下代码是将第三方代码与本地代码分离的打包方法

js
module.exports={
    optimization:{
        splitChunks:{
            chunks:"all",
            cacheGroups:{//分割规则
                vendor:{
                    test: /[\\/]node_modules[\\/]/,
                    filename: "vendor.js",
                    chunks: "all",
                    minChunks: 1
                },
                common: {
                    filename: "common.js",
                    chunks: "all",
                    minChunks: 2,
                    minSize: 0
                }
            }
        }
    },
}

publicPath:打包出来的js，css文件要放到cdn上的时候使用

js
module.exports={
    output:{//出口
        publicPath:"www.xxx.com"//写cdn的地址，就会自动拼接到引用js，css的路径上面去了
    },
}

关于markdown基础语法

Wed, 13 Aug 2025 16:00:00 GMT

基础语法

标题

text

123456

# 1级标题
## 2级标题
### 3级标题
#### 4级标题
##### 5级标题
###### 6级标题

个人建议在标题中只用2级3级标题即可，注意#与标题中间有空格。

段落

text

123

这是第一行
空行
这是第二行

在markdown中，段落只需要在两行文字中空出来一行即可。

换行

text

这是第一行。两个空格
这是第二行

在markdown中，换行只需要在第一行文字后添加两个空格即可。

在hexo（即这个博客）里面，只需要每两行加个回车即可，不用细抠那么仔细，只需要知道这个概念即可。

强调

text

**加粗**
*倾斜*

在markdown中，强调有两种语法：

加粗，在需要加粗的内容前后用两个 * 进行包裹，同时注意 * 要和文字挨着。
倾斜，在需要倾斜的内容前后用一个 * 进行包裹，同时注意 * 要和文字挨着。

引用

text

> 内容

在markdown中，引用需要在开头添加>然后加一个空格即可。

列表

text

12345

1. 内容
2. 内容

- 内容
- 内容

在markdown中，分为有序列表和无序列表，有序列表为数字.空格内容，无序列表为-空格内容。

代码块

当你在编辑这个文件的时候，你总能看见有两组三个 ` 包裹起来的内容，这个就是代码块。

格式为：

html

javascript

等。

链接

text

[链接名称](链接url)

图片

text

![链接名称](链接url)

图片就是比链接在前面多一个 !

git基础语法

Wed, 13 Aug 2025 16:00:00 GMT

git常用指令

基础操作

初始化 & 克隆

在网上找到要克隆的仓库，复制克隆网址，输入以下代码

bash
   git init                  # 初始化本地仓库
   git clone <仓库URL>       # 克隆远程仓库

提交更改

bash
   git status               # 查看文件状态
   git add <文件名>         # 添加单个文件到暂存区
   git add .                # 添加所有更改到暂存区
   git commit -m "描述"     # 提交更改到本地仓库
   git commit --amend       # 修改最后一次提交（未推送时）

查看历史

bash
   git log                  # 查看提交历史
   git log --oneline        # 简洁版提交历史
   git show <commit-id>     # 查看某次提交的详情

分支操作

bash
   git branch               # 查看本地分支
   git branch <分支名>      # 创建新分支
   git checkout <分支名>    # 切换分支
   git checkout -b <分支名> # 创建并切换到新分支
   git merge <分支名>       # 合并指定分支到当前分支
   git branch -d <分支名>   # 删除本地分支（已合并）
   git branch -D <分支名>   # 强制删除本地分支（未合并）

远程分支

bash
   git fetch                # 拉取远程分支信息（不自动合并）
   git pull                 # 拉取远程分支并合并（= fetch + merge）
   git push -u origin <分支名> # 推送本地分支到远程并关联
   git push origin --delete <分支名> # 删除远程分支

撤销与回退

撤销工作区修改

bash
   git restore <文件名>     # 撤销工作区的修改（未 add）
   git restore --staged <文件名> # 撤销暂存区的修改（已 add）

回退提交

bash
   git reset --soft <commit-id>  # 回退提交但保留更改到暂存区
   git reset --hard <commit-id>  # 彻底回退到指定提交（慎用！）
   git revert <commit-id>        # 生成一个新提交来撤销某次提交（安全）

远程仓库

关联与推送

bash
   git remote -v            # 查看远程仓库地址
   git remote add origin <URL> # 关联远程仓库
   git push origin <分支名>  # 推送到远程分支
   git push --force         # 强制推送（覆盖远程，慎用！）

拉取更新

bash
   git pull origin <分支名>  # 拉取远程分支>  # 拉取远程分支最新代码
   git fetch --prune        # 同步远程已删除的分支

Cain的个人网站

用GPT学英语--第一课

用GPT学英语--第一课

一、什么是词性？

1. 名词（Noun，缩写 n.）

2. 动词（Verb，缩写 v.）

3. 形容词（Adjective，缩写 adj.）

4. 代词（Pronoun，缩写 pron.）

二、什么是句子成分？

1. 主语（Subject）

2. 谓语（Predicate）

3. 宾语（Object）

三、为什么 I am happy 需要 am，而 I like music 不需要？

句子①：I like music.

句子②：I am happy.

对比一下

四、顺便纠正两个理解

关于第三人称单数

关于三个时态

📝 第一课随堂练习

第1题：分析单词

第2题：判断句子结构

第3题：找出错误

第4题：尝试自己造句

我的作答与批改

第1题：完全正确 ✅

第2题：完全正确 ✅

第3题：修改正确，但解释需要纠正 🟡

第4题：有一个小错误

📊 第一课学习总结

LeetCode 146. LRU缓存

LeetCode 146. LRU缓存

示例

提示

解题思路

代码实现

手写防抖

手写防抖

手写一个判断空值的函数

手写一个判断空值的函数

手写一个提取URL参数的函数

手写一个提取URL参数的函数

解法一：现代 API - URL 和 URLSearchParams (强烈推荐)

解法二：传统手动拆解法（用到 decodeURIComponent）

解法三：将所有参数转换为对象（实战常用法）

企业级 Git 提交规范配置指南 (From 0 to 1)

企业级 Git 提交规范配置指南 (From 0 to 1)

1. 核心工具安装 (Commitlint)

1.1 安装依赖

1.2 创建配置文件

2. 自动化钩子配置 (Husky)

2.1 安装并初始化 Husky

2.2 添加 commit-msg 钩子

3. 交互式提交助手 (Commitizen & cz-git) - 可选但推荐

3.1 安装依赖

3.2 修改 package.json

3.3 测试交互式提交

4. 验证是否成功

测试 1：错误的提交

测试 2：正确的提交

5. 附录：提交类型速查表 (Conventional Commits)

6. 进阶：代码质量检查 (Lint-staged)

6.1 安装

6.2 配置 package.json

6.3 修改 Husky 的 pre-commit 钩子

通用防抖hook封装

通用防抖hook封装

Vue 组件间通信方式

Vue 组件间通信方式

一、 父子组件通信 (最常用)

1. Props (父传子)

2. $emit (子传父)

3. v-model (双向绑定)

4. $refs / defineExpose

5. parent/parent / parent/children (不推荐频繁使用)

二、 跨级/祖孙组件通信

1. Provide / Inject (依赖注入)

2. $attrs

三、 兄弟组件或任意组件通信

1. 全局状态管理 (Vuex / Pinia)

解法一：现代 API - `URL` 和 `URLSearchParams` (强烈推荐)

一、父子组件通信 (最常用)

5. $parent /$ children (不推荐频繁使用)

二、跨级/祖孙组件通信

三、兄弟组件或任意组件通信

四、面试高分总结策略 (Cheat Sheet)

五、简单对比表

一、查找与检测 (Searching & Checking)

1. `includes(str)` (ES6 推荐)

2. `indexOf(str)` / `lastIndexOf(str)`

3. `startsWith(str)` / `endsWith(str)`

二、截取与切片 (Slicing)

1. `slice(start, end)` (推荐)

2. `substring(start, end)`

三、转换与替换 (Transform & Replace)

1. `split(separator)` (转数组 - 核心)

2. `replace(searchValue, newValue)` / `replaceAll()`

3. `toLowerCase()` / `toUpperCase()`

4. `trim()` / `trimStart()` / `trimEnd()`

四、现代实用功能 (ES6+)

2. `padStart(targetLength, padString)` / `padEnd()`

五、总结：高频场景速查表