1. 邮箱验证1/^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$/
2. 手机号验证（中国大陆）1/^1[3-9]\d{9}$/
3. 身份证号验证（中国大陆）1/^\d{17}[\dXx]$/
4. URL 验证1/^(https?:\/\/)?([\w-]+\.)+[\w-]+(\/[\w-./?%&=]*)?$/
5. IP 地址验证1/^(?:(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)\.){3}(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)$/
6. 日期格式验证（YYYY-MM-DD）1/^\d{4}-\d{2}-\d{2}$/
7. 时间格式验证（HH:MM:SS）1/^([01]\d|2[0-3]):([0-5]\d):([0-5]\d)$/
8. 用户名验证（字母、数字、下划 ...
指令-查看状态信息
指令
描述
git –version
查看git版本
git status
查看本地仓库状态，比较常用的指令，加参数-s简洁模式
git [指令] -h
查看指令帮助信息
git [指令] –help
打开指令详细帮助页面
git remote -v
查看所有远程仓库，不带参数-v只显示名称
git branch
查看分支列表，以及当前分支
git tag
查看标签列表
git log -n20
查看日志(最近20条)，可省略n为-20；参数--graph可视化显示分支关系
git log –follow [file]
显示某个文件的版本历史，包括文件改名
git reflog
查看所有可用的历史版本记录（实际是HEAD变更记录），包含被回退的记录，常用来撤销回退
git blame [file]
以列表形式查看指定文件的历史修改记录
git config –list
查看配置信息，包括系统（–system）+全局（–global）+项目（–local）配置
git config –list –system
...
1. Vue 2 为什么要求模板只能有一个根元素？1.1 虚拟 DOM 的渲染机制虚拟 DOM 是一个树形结构，每个组件对应一个虚拟 DOM 树。在 Vue 2 中，组件的模板必须有一个单一的根节点，因为 Vue 2 的渲染逻辑是基于单根节点的树结构设计的。
单根节点的必要性：
Vue 2 在编译模板时，会将模板转换成渲染函数。这些渲染函数会返回一个单一的 VNode（虚拟节点）。
每个组件的模板最终都会被转化成一个 render() 函数，这个 render() 函数必须返回一个单独的根虚拟节点。例如：
123render() { return h('div', [h('h1', '标题'), h('p', '内容')])}
12345<template> <h1>标题</h1> <p>内容</p> // Vue 2 无法确定 h1 和 p 哪个是根节点。</template& ...
Vue 3 使用 Proxy 替代 Vue 2 中的 Object.defineProperty 来实现响应式系统，主要是因为 Proxy 在性能、功能和灵活性方面具有显著优势。
1. 性能优化defineProperty 的局限性
初始化开销：在 Vue 2 中，初始化时需要遍历整个对象并递归设置响应式，这会导致较大的初始化性能开销。
深度嵌套对象的性能问题：defineProperty 需要递归遍历对象的所有属性，并为每个属性单独设置 getter 和 setter。对于嵌套对象，需要深度遍历，性能开销较大。
无法处理复杂的数据结构（如函数、Symbol 类型的属性）：defineProperty 不能很方便地处理函数类型的属性，特别是对于返回的值是函数的对象，或者属性本身是 Symbol 类型时，响应式系统会失效。
无法监听对象的新增属性：defineProperty 只能设置已存在的属性的 getter 和 setter，但它不能直接监听新增的属性。也就是说，当你通过 obj.newProp = value 向对象动态添加新属性时，Vue 2 无法自动让这个新属 ...
发布-订阅模式（Publish-Subscribe Pattern），也叫做观察者模式（ObserverPattern），是软件设计中常见的设计模式之一。在前端开发中，发布-订阅模式主要用于解耦组件之间的通信，尤其是在响应式框架如 Vue 中，能够有效地实现数据的双向绑定与组件之间的同步。本文将探讨发布-订阅模式的原理，并通过 Vue 2 和 Vue 3 中的实现方式加以说明，分析它们如何运用此模式来构建高效的响应式系统。
1. 发布-订阅模式是什么发布-订阅模式允许一个对象（称为“发布者”）向多个订阅者发布信息，而无需了解这些订阅者的具体实现。订阅者（Observers）通过订阅发布者的消息，在消息触发时响应并执行特定的动作。发布-订阅模式具有以下特点：
解耦 ：发布者和订阅者之间没有直接联系，它们通过中心化的消息代理（Event Bus、消息队列等）进行交互。
动态性 ：订阅者可以动态地订阅或取消订阅发布者的消息，且可以根据具体情况改变对信息的响应。
异步性 ：消息的发布和订阅通常是异步的，这使得应用能够高效地响应用户行为和异步事件。
在 Vue 中，数据的变化触发视图的更新就 ...
引言本文将从 核心架构、API 设计、性能优化、新特性、生态兼容性 等维度，并结合Vue2的缺点以及Vue3的优势进行分析，探讨这些变化背后的设计思想和技术实现。
1. 核心架构的重构1.1 响应式系统的革命性升级Vue 2 的响应式实现：
基于 Object.defineProperty，通过递归遍历对象属性，为每个属性设置 getter 和 setter。
局限性：
无法检测对象属性的新增或删除（需手动调用 Vue.set 或 Vue.delete）。
对数组的索引操作（如 arr[0] = 1）和 length 修改无法监听，需通过重写数组方法（push、pop 等）实现响应式。
Vue 3 的响应式实现：
基于 Proxy代理整个对象，而非单个属性。
优势：
支持动态新增、删除属性，无需手动处理。
直接监听数组索引和 length 变化。
性能更优：Proxy 是原生语言特性，无需递归初始化，仅在访问时触发代理。
底层原理对比：
123456789101112// Vue 2：Object.definePrope ...
<keep-alive> 是 Vue 3 中一个非常重要的内置组件，用于缓存动态组件的状态，避免重复渲染和销毁。它通常用于优化性能，尤其是在需要频繁切换组件的场景（如标签页、路由切换等）。本文将从源码层面深入解析 <keep-alive> 的实现原理。
1. <keep-alive> 的基本用法在 Vue 3 中，<keep-alive> 的使用方式如下：
123456789101112131415<template> <keep-alive> <component :is="currentComponent"></component> </keep-alive></template><script>export default { data() { return { currentComponent: 'ComponentA', }; & ...
双向绑定是Vue 3响应式系统的核心特性之一，它通过 数据劫持 和 依赖追踪 实现了数据与视图的自动同步。
1. 双向绑定的基本概念双向绑定是指：
当数据发生变化时，视图自动更新。
当用户操作视图时，数据自动更新。
在 Vue 中，双向绑定通常通过 v-model 指令实现。例如：
1234567891011121314<template> <input v-model="message" /> <p>{{ message }}</p></template><script>export default { data() { return { message: 'Hello, Vue!', }; },};</script>
v-model 是语法糖，它相当于 **:value=”message” @input= ...
引言HTTP（HyperText Transfer Protocol）是互联网上应用最广泛的协议之一，它定义了客户端和服务器之间的通信规则。自1991年诞生以来，HTTP协议经历了多次重大更新，从HTTP/1.0到HTTP/3.0，每一次变革都带来了性能、安全性和功能上的显著提升。
1. HTTP/1.0：互联网的起点诞生背景HTTP/1.0 是第一个被广泛使用的HTTP版本，于1996年正式标准化（RFC 1945）。它奠定了HTTP协议的基础，但功能较为简单。
核心特性
短连接 ：每次请求都需要建立一个新的TCP连接，请求完成后立即关闭。这种方式效率低下，尤其是在加载多个资源时。
简单请求/响应模型 ：客户端发送请求，服务器返回响应，通信过程简单直接。
支持多种内容类型 ：通过Content-Type头部字段支持HTML、图片、文本等多种资源类型。
局限性
性能瓶颈 ：频繁的TCP连接建立和关闭导致高延迟。
无状态性 ：每次请求都是独立的，服务器无法识别客户端的状态。
2. HTTP/1.1：性能优化与功能 ...
什么是 DOM？DOM（Document Object Model）是浏览器将 HTML 或 XML 文档解析为树形结构的一种编程接口。它允许开发者通过 JavaScript 动态地访问和操作文档的内容、结构和样式。
DOM 的核心特点
树形结构：DOM 将文档表示为一个树形结构，每个节点都是一个对象，代表文档的一部分（如元素、属性、文本等）。
平台和语言无关：DOM 是一个跨平台、跨语言的接口，不仅适用于 JavaScript，还可以在其他编程语言中使用。
动态性：通过 DOM，开发者可以动态地修改文档的内容、结构和样式，从而实现网页的交互效果。
DOM 的树形结构DOM 将文档解析为一个树形结构，称为 DOM 树。DOM 树由多个节点（Node）组成，每个节点代表文档的一部分。以下是 DOM 树的主要节点类型：
1. 文档节点（Document）
代表整个文档，是 DOM 树的根节点。
通过 document 对象访问。
2. 元素节点（Element）
代表 HTML 元素，如 <div>、<p>、<a> 等。
是 DOM 树中最常见的节 ...
