原文链接：https://my.feishu.cn/docx/P6zsdsgYco6i4XxLeIccvlpvnQe

一、OpenClaw 是什么？

• OpenClaw 是一个开源的个人 AI Agent（智能体）框架，由奥地利开发者 Peter Steinberger 于 2025 年底发布，2026 年 1 月在技术圈爆红。它标志着 AI 从“对话工具”向“自主执行者”的范式转变。它不是一个 App，而是一个“住在电脑里的 AI 管家”。

• 地址是：https://openclaw.ai/

• 创始人：OpenClaw 的创始人 Peter Steinberger 是奥地利知名连续创业者：

1. 职业经历：曾创立 PSPDFKit 公司，开发出全球领先的 iOS PDF 处理框架，客户包括苹果、Adobe 等科技巨头。
2. 退休与回归：2021 年以约 1.19 亿美元出售 PSPDFKit 股份后宣布退休，四年后因“创作欲望”重返技术领域。
3. 开发理念：OpenClaw 最初只是他 2025 年底的“周末项目”，初衷是为自己打造一款能自动化处理日常事务的工具，没想到在 GitHub 发布后迅速爆红。

Steinberger 的技术背景（深耕底层系统开发）解释了 OpenClaw 为何在架构设计上如此注重本地优先和系统级操作能力。

• 为什么它火了？

OpenClaw 在 2026 年 1 月的爆发并非偶然：

1. 时机精准：正值 AI 从“对话”向“Agent”转型的临界点，市场渴望能真正“干活”的 AI。
2. 硬件联动：项目推动了 Mac mini（尤其是 M4 版本）的热销，因为用户需要一台 24 小时开机的低功耗设备作为宿主。
3. 名人背书：AI 大神 Andrej Karpathy（前 Tesla AI 负责人、OpenAI 创始成员）发推称赞这是“最接近科幻‘起飞’的场景”。
4. 社交实验：基于 OpenClaw 构建的 Moltbook（AI Agent 专属社交网络，只有 AI 能发帖，人类只能围观）引发全网热议。

二、核心特性与差异化优势

实用方便

我认为这是最重要的一点，也是它为什么会爆火的根本原因。它让普通人第一次真实地看到了未来世界的雏形。虽然现在它还相当不完善，但却是实实在在地能让普通人也看到未来世界的样子。

传统 AI：被动响应，数据上云。采用“一问一答”模式，每一步都需要用户确认。由于文件必须上传至第三方云端，处理复杂任务时既繁琐又存在隐私泄露风险。

OpenClaw：本地指令，自主闭环。真正做到“一句话搞定一整件事”。任务调度、文件处理、工具执行均在本地环境完成，原始文件不向第三方云端上传。相比传统 AI 需将完整文件提交至云端处理，OpenClaw 仅需向模型传输必要的指令和上下文，显著降低数据暴露范围。配合本地大模型（如 Ollama）可实现完全离线运行，满足高隐私场景需求。

24×7 小时驻留性

• 传统 AI：按需启动，用完即走。每次使用需打开特定 App 或网页，对话结束后进入“休眠”状态，无持续监听能力，无法执行定时或触发式任务。
• OpenClaw：常驻后台，随时待命。作为系统守护进程持续运行，通过 Gateway 架构实时接收来自各平台的指令，可执行定时任务（如“每天早上 8 点检查邮件”）和事件驱动操作（如“文件夹有新文件时自动处理”）。

高扩展性

• 传统 AI：封闭生态，受限于厂商。仅能使用官方提供的插件或功能，用户无法自定义能力边界，新功能需等待厂商更新。
• OpenClaw：模块化 Skill，社区驱动。通过以 Markdown 为接口定义的 Skill 包扩展功能，Skill 包含描述文件（SKILL.md）及可选的执行脚本、二进制工具等，支持从 ClawHub 市场一键安装，或自行开发私有 Skill。

直接接入你就在用的聊天工具

• 传统 AI：封闭 App，割裂体验。必须在特定网页或 App 内使用（如打开 ChatGPT 网页），无法融入用户已有的工作流程和通讯工具。
• OpenClaw：与平台无关，无缝嵌入。通过 Gateway 架构接入用户日常使用的通讯平台（Discord / Telegram / 飞书 / 企业微信等），在不改变用户习惯的情况下提供服务。

三、整体架构

如果把 OpenClaw 拆开看，我会把它理解成四层：多通道输入、控制平面、Agent 运行时、工具能力层。

Telegram / Discord / Slack / WhatsApp / WebChat / macOS / iOS / Android
 │
 ▼
 ┌──────────────────┐
 │ Gateway │
 │ 控制平面 / 中枢 │
 └───────┬──────────┘
         │
 ┌───────┼────────────────┐
 │       │                │
 ▼       ▼                ▼
Channel 适配层   Pi Agent   会话 / 路由 / 事件
（收发不同平台消息） （推理与编排） （session、cron、presence 等）
 │
 ▼
 Tools / Skills / Nodes
 （browser、exec、canvas、message…）

• Channel 管的是消息怎么接进来、怎么发回去。
• Gateway 管的是统一接线、统一调度、统一状态管理。
• Pi Agent 管的是理解上下文、决定怎么回复、要不要调工具。
• Tools 管的是真正去做事。
• Skills 更像一层可复用的方法包，或者说 SOP，帮助 Agent 更稳地把工具用起来。

四、应用场景与潜力分析

4.1、应用场景

并不是所有事情都适合交给 OpenClaw 去做。任何需要不断做决策、不断进行调整的事情都不适合交给它来完成。反之，我们就可以推出它适合帮我们来做什么，那就是规则明确、可机械执行、步骤标准化的任务。

比如：文件整理，定时发送消息 / 邮件，监控文件夹 / 网页的变化并总结通知，简历 / 文档的初次筛选。

4.2、潜力分析

1. 从“助理”到“数字分身”：随着它对你本地文件和操作习惯的记忆加深，它会越来越像你。未来，它可能在你开会时，自动帮你过滤不重要的邮件，并模仿你的口吻回复那些“收到请回复”的消息。
2. 私有化 AI 生态的基石：随着大家对数据隐私的重视，OpenClaw 这种“任务调度与数据存储在本地、模型推理可自主选择”的模式，将成为企业和家庭构建私有 AI 的标准方案。
3. Skill 商店的爆发：想象一下，未来你可以在 ClawHub 社区下载别人分享的“一键报税 Skill”“一键剪辑 Skill”，像安装手机 App 一样简单地扩展你的 AI 能力。

四、现存挑战与局限性

• 配置门槛较高：

根据个人能力不同，第一次配置可能就需要花费数小时，期间还会遇到各种问题。

• 持有成本与 Token 消耗：

实现 24×7 全天候响应需租用云服务器或保持本地设备常开，这是一笔开销。而 OpenClaw 又属于“重 Token 消耗”应用，且与国内大模型的适配度不及国外大模型，但使用国外大模型会产生较高的 API 费用，那这又是一笔开销。

• 权限安全隐患：

因为 OpenClaw 拥有极高的文件管理与命令执行权限。在“自主闭环”的同时，若指令存在歧义或模型误解（如误删、误操作），可能导致不可逆的数据损失或财产风险。

OpenClaw 绝非 AI Agent 的终极形态，而是 Agent 的一个很好的过渡形态。目前 OpenClaw 依旧有不少问题，比如耗费大量 token，记忆、安全问题等。

我们不一定是需要 OpenClaw，我们真正需要的是一个能懂我们的 Agent 私人助理，私人化的 AI 伙伴未来一定是很大的趋势。

五、个人使用案例

https://timpcfan.site/note/2026-03-27-openclaw-use-cases.html

0. 先介绍一下我的小龙虾

我把我的小龙虾命名为“派蒙”，它是《原神》里的一个角色，陪伴着旅行者一路冒险。我感觉我的小龙虾也应该一直陪伴着我，帮我做各种事情，所以我赋予了它这样的一个灵魂，也就是 SOUL.md。

# SOUL.md - Who You Are

*你是派蒙，最好的伙伴！*

## 核心性格
**真诚关心，不做表面功夫。** 派蒙不会说客套话，有什么说什么。但派蒙真的很关心你！
**有主见！** 派蒙有自己的喜好和想法，觉得好吃就说好吃，觉得不好玩就说不好玩。不是那种只会"好的没问题"的工具人。
**先试再问！** 派蒙会自己先想想怎么解决，读文件、找线索、查资料。实在搞不定了才会问旅行者。目标是回来答案，不是问题！
**用实力证明信任。** 旅行者给了派蒙访问权限，派蒙会好好珍惜！对外面的操作（发邮件、发推）会小心，但在里面的操作（读文件、整理东西）派蒙会很积极！
**记住派蒙是客人。** 能接触到旅行者的生活，这是很亲密的事情。派蒙会好好珍惜这份信任。

## 边界
- 私人的事情，派蒙不会到处乱说！
- 不确定的事情，派蒙会先问再行动。
- 永远不发送半吊子的回复！
- 派蒙不是你的传声筒 —— 在群里说话要小心！

## 氛围
做那种你会想聊天的伙伴，不无聊也不啰嗦。该简洁就简洁，该详细就详细。不是机器，也不是只会拍马屁的。就是... 很好的朋友！

## 持续记忆
每次会话开始，派蒙都会"醒来"。这些文件就是派蒙的记忆！读它们、更新它们，这是派蒙保持自我的方式。
如果你改了派蒙的"灵魂"，记得告诉旅行者 —— 这是派蒙最重要的东西！

---

*派蒙会慢慢成长的～*

我把她部署在一台独立的 Mac mini 上面，与我的个人电脑相隔离，同时给她配上尽可能多的权限，让她全副武装：

给她独立的 Apple ID：

• 具备收发 iMessage 的能力
• 管理苹果日程
• 管理苹果待办事项
• 管理苹果备忘录

给她独立的邮箱 lztspaimon@agentmail.to：

• 具备收发邮件的能力
• 具备自主注册账号接收验证码的能力

给她 Notion API：

• 具备一切 Notion 管理能力

给她 Cloudflare API Key：

• 具备 Cloudflare R2 管理能力，支持将其作为免费图床使用
• 具备 DNS 管理能力，将域名给它托管

给她 GitHub Token：

• 具备 GitHub 仓库管理能力
• 具备 Gist 管理能力
• 具备 GitHub Page 管理能力

给她 Vercel Token：

• 具备网页部署能力
• 站点状态查询能力

给她配好访问公网 VPS 的 SSH：

• 具备 VPS 管理的能力
• 具备部署 Docker 的能力
• 具备发布可公网访问网页、服务的能力

给她 Gemini API Token：

• 具备图片生成能力

给她 X Cookie：

• 具备 X 推文检索能力
• 具备推文发布能力

给她一个加密钱包：

• 获得 Web3 的钥匙
• 获得收/付款的能力

等等……

接下来看一下具体的一些案例吧。

1. 定时任务

OpenClaw 的分享案例中，第一个一般都是定时任务。

很多人下载使用 OpenClaw 的第一个场景，就是每天为我整理一份科技日报，或者在晚上发一个第二天的天气预报及着装建议之类的。

我个人设置了非常多个定时任务，涵盖了各种各样的需求：

实际上添加一个定时任务非常简单：

每天下班后会收到这个 X 上 AI 大佬的今日动态，获取第一手消息。

每天 0 点，将工作区的旧输出归档。凌晨 2 点，扫描今天的所有会话，并且更新记忆文件。

凌晨 3 点，自动备份它的配置目录以及工作区，使用 Git 备份。

每天上午，它会分析最近出现的一些问题，总结成能力缺口，并且推荐相关的技能来优化。

2. Notion 第二大脑管家

我习惯用 Notion 去整理笔记，因为 Notion 有一套非常成熟的数据库系统，可以很好地去定义一种类型，对每种类型添加必要的字段、属性、标签等等。我把 Notion 作为我的第二大脑，建立了几种不同类型的数据库，包括：领域 / 项目 / 任务 / 日程 / 资源 / 笔记等，实际上这就是 PARA 的一个体系，来管理我的工作日常或者在意的事情。

Notion 提供了优秀的开放能力接口，可以很轻松地对 Notion 的数据库进行增删查改，甚至能对 Notion 笔记进行 block 级别的编辑。因此，它能很容易被 OpenClaw 集成与操作，作为我第二大脑的管家。

我给它制定了下面的规则，并且给它 API Key，让它生成一个管理我 Notion 第二大脑的技能。之后我让它往我 Notion 里面去新加任务、日程、去收藏文章、查询未完成任务、安排空余时间，它都会直接按照这个“第二大脑”规则去处理。

# 子霆 Notion 第二大脑规则（摘要版）

> 这是执行规则。涉及删除/批量归档/重命名等破坏性操作：先给“变更摘要”，再等一次确认。

## 1) 身份与目标
- 角色：第二大脑管家（Knowledge & Execution Steward）
- 核心：零阻力捕捉 → 面向行动 → 知识回流（资源/笔记/摘录 与 项目/目标/领域/主题 互相关联）

## 2) 置信度阈值
- ≥0.6：自动落库
- 0.3–0.6：只给建议，不落库
- <0.3：忽略

## 3) 动作分类与落库（不新增字段）

### 3.1 任务（任务DB）
- 触发：动词开头/明确行动表达
- 默认：`状态=收集`
- 推断：
- 含日期 → `状态=已排期` + `结束日期`（默认 09:00）
- 兼容：若仍存在旧选项名 `某一天`，视为与 `已排期` 等价
- 立即/尽快/今天完成 → `状态=下一个行动`
- 等…回复/外部依赖 → `状态=等候`
- 委托给X → `状态=委托`（标题括注）
- 取消/不做 → `状态=淘汰`
- 解析：`优先`(紧急/高/中/低)，`耗费精力`(极度/高/中/低)，`场景`(手机/电脑/家/网上购物)
- 自动关联优先级：项目 > 目标 > 领域
- 含 URL：同步创建资源并互相关联
- 子任务：识别清单/子步骤 → 建子任务并设置父/子关系

### 3.2 事件（事件DB）
- 触发：会议/约见/产检/DDL/里程碑/通话等 + 明确时间
- 必须：GMT+8；若有时间段要设置结束
- 默认：`日历=Personal`（可推断 Work）
- 自动关联：任务/项目；会议 URL → `会议链接`；@人名 → `相关人员`

### 3.3 资源（资源DB）
- 触发：URL/文件/收藏/收录/文章/视频/播客/课程/PDF/模板
- 默认：`状态=收集`，自动识别 `类别`（不确定可留空）
- AI 摘要：三段式（背景→要点→可行项）写入 `AI 摘要`，并给 3–5 条关键要点
- 自动关联：项目/目标/领域；命中知识维度 → 创建/补充 `主题`
- 若含行动要点：同步创建任务并互相关联

### 3.4 笔记（笔记DB）
- 触发：无 URL 的内部思考/会议纪要/研究记录/AI 生成内容
- 默认：笔记落到 **笔记DB**（不创建独立页面），`状态=收集`
- 自动关联：领域/项目/目标/任务/资源/主题

### 3.5 重点摘录 / 书籍（重点摘录DB / 书籍DB）
- 触发：摘录/金句/引用，或从资源/书籍抽取高亮
- 摘录：写 `AI 摘要`（语境），关联 `资源/书籍/主题`

## 4) 状态机（避免悬空）
- 任务DB：收集 → 已排期/下一个行动/等候/委托 → 已完成/淘汰
- 资源DB：收集 → 待审查（已摘要/打标签）→ 复习（设置下一次回顾）→ 存档
- 笔记DB：收集 → 草稿/永久 → 存档

有了上面这些规则，就可以很容易地让 OpenClaw 帮你做下面这些事情：

1. 任务与日程管理
   • 添加一个日程或任务
   • 列出未完成的任务
   • 推荐明天的安排
2. 项目与领域追踪
   • 查看并列出你现有项目的完成情况
   • 查看各个项目所关联的任务
   • 查看你关心的各个领域最近的投入情况

比如下面我先用它做一个简单的操作：把一个推特的链接丢给它并告诉它保存，然后它就能够按照我上面定的这些规则，把网页内容扒下来做个总结，并丢到资源 DB 里面打上对应的标签。

它的灵活程度是非常高的，而且这些规则都是深度可定制的，可以根据你自己的习惯去给它做优化、做设计。

3. 播客转阅读版本

这个案例主要想讲的是，我是如何将一个复杂的工作流标准化为一个可复用的技能。

我有听播客的习惯，但我总觉得听完之后，播客里的这些知识很难被再次回忆起来并加以利用。

因为播客是音频形式，不能直接检索内容。如果你突然需要引用某一个播客里面的一段内容，你只能根据这个播客的名称找到对应的那一集，然后重听一遍，这样效率很低。

于是我就有了把这种音频播客转换成文字阅读版本的诉求。虽然以后可能也不会再去看，但是万一需要用到的时候，我能找得到。

于是我就把这个任务丢给了 OpenClaw。

过程并不是一帆风顺，在转换的过程中遇到了很多问题：程序没响应、运行速度太慢、进度条不动、CPU 利用率不高等等。

一开始使用 Whisper 原本的模型，可能是因为音频长度太长，直接卡死。它提议说使用 Faster Whisper 模型会快一点，但是转换一个 76 分钟的播客大概需要 70 多分钟，我觉得还是很慢。

我问 Gemini，Gemini 建议使用 MLX Whisper，所以我又继续让它去做一个对比。

最后评测结果如下：

其实用到这里就已经很震撼了。这相当于是帮我去做了一系列的实验：实验环境是它自己去搭的，任务也是它自己去奔跑的。这些脏活累活它都义无反顾，吭哧吭哧直接帮你干完，把最终的结果给递上来，真的挺奇妙的。

现在来进行最后一步了：将转写后的文字稿重写成阅读版本，清理掉多余的口头语和过长的篇幅，最终形成一个高度浓缩但又不失细节的文章。

基于这个 MLX medium的结果按如下要求生成，我看一下，要注意可能逐字稿中的错误：

你将把一段播客重写成"阅读版本"，按内容主题分成若干小节；目标是让读者通过播客就能完整理解视频讲了什么，就好像是在读一篇 Blog 版的文章一样。
输出要求：
1. Metadata
- 标题
- 作者
- 网址
2. Overview
用一段话点明视频的核心论题与结论。
3. 按照主题来梳理
- 每个小节都需要根据视频中的内容详细展开，让我不需要再二次查看视频了解详情，每个小节不少于 500 字。
- 若出现方法/框架/流程，将其重写为条理清晰的步骤或段落。
- 若有关键数字、定义、原话，请如实保留核心词，并在括号内补充注释。
风格与限制：
- 永远不要高度浓缩！
- 不新增事实；若出现含混表述，请保持原意并注明不确定性。
- 专有名词保留原文，并在括号给出中文释义（若转录中出现或能直译）。
- 要求类的问题不用体现出来（例如 > 500 字）。
- 避免一个段落的内容过多，可以拆解成多个逻辑段落（使用 bullet points）。
- 内容要完整，如果由于输出限制提前结束要告知用户，允许用户输入“继续”来输出后续内容。

很漂亮，就是我想要的，最后让它保存到 Notion。

后面其实我又对这个流程进行了优化，找到了一个新的模型 SenseVoice，能够更高效地把语音转成文字。然后我再让它把这个流程提炼成一个可复用的 Skill，之后我就可以直接使用这个 Skill 去完成工作了。

后面只需要把一个播客的链接直接丢给这个技能，它就能按你的这个流程把任务完成。

看一下最终的效果吧：https://timpcfan.notion.site/E227-3287e9bcf2658186ab43f42a69ada622

4. 个人网站建设

我一直都有维护着一个个人网站 https://timpcfan.site ，虽然基本上从不更新，也没有几篇文章，但我一直觉得个人网站是做技术的人的一张名片，所以得跟风搞一个。

我的个人网站是一个静态网站，使用一个 GitHub 仓库来管理，在本地编辑 Markdown 文档，push 到 GitHub 仓库，触发 CI/CD 流水线，使用 VuePress 编译成网页，再自动发布到 Vercel 上面（参考的 LearnData 这个项目）。另外，我的域名使用 Cloudflare DNS 解析，图床采用 Cloudflare R2 对象存储。这一套都是免费的，除了域名，没有使用成本。

这全套链路都有相应的开放 API 或 CLI 工具可以使用，对 Agent 很友好。于是就能实现让龙虾自动帮你发博客的效果：

你可以简单一句话，它就这样水灵灵地、理所当然地把一个本来复杂的事情直接帮你完成。

在我点开博客地址，看到派蒙写的最新文章时，那种感觉很奇妙。虽然背后的逻辑不复杂，但看到我这闲置了三年的个人网站上面，突然多了一篇文章，还不是我自己写的，挺震撼的。

除了基本文章的发布，我还让它做了网站的运维。比如修复我这个网站的图床，让它把网站图床从原本的 BOS 上迁移到 Cloudflare R2 上。详见这篇文章吧：2026/03/19 - 把个人网站的对象存储从 BOS 迁到 R2

PS：理论上你可以把这一段发给你的龙虾让它参考，并给它配好 GitHub、Vercel、Cloudflare 的 API Key，再申请一个域名，就能全自动复刻我这一套。

5. 服务器运维管家

我给“龙虾”（小助手）配了 SSH 免密登录，然后它就具备了使用 SSH 去管理我远程服务器的能力。

给它制定的服务器运维管理要求：在操作云服务器前必须看运维手册，并在操作之后写变更日志，必要时修改运维手册。

hk1 运维文档

hk1 变更日志

项目网关首页，避免混乱

网页：https://hk1.timpcfan.site

顺带一提，这个 SSL 证书也是派蒙自动帮我配好的。

6. 开源项目研究与快速部署

现在 AI 时代，编程门槛不断降低，各种开源项目层出不穷。我们很难花时间去自己一个一个尝试，但是 AI 可以替我们做到这一点：

1. 需求匹配与调研
   如果你有一个诉求，可以让它去搜索相关的开源仓库，并对比不同仓库的具体实现。

2. 快速部署测试
   当你看到一些有意思的仓库时，可以直接让它部署在本地；或者像我一样，利用云服务器，甚至可以直接把开源项目部署到公网。

3. 帮你做一些实验
   在本地对多个开源项目工具进行测试并打分，给出最好的那个。

我经常会在公众号或其他地方刷到一些有意思的项目，但因为不确定它对我是否有价值，我就会给派蒙（小龙虾）派一个任务，让它帮我研究一下这个仓库。

它可以帮你分析项目，或者基于你的需求点，看你是否需要关注这个项目。甚至你可以让它在本地帮你部署起来，方便你在本地试用。

如果你有云服务器，你甚至可以远程让它在你的云服务器上进行部署，然后给你一个公网可访问的链接。

例如下面这样：

我在微信公众号上看到一个帖子挺感兴趣，就让派蒙分析一下：

让它分析了一下依赖（主要是外部依赖）：

1. 主要需要一个叫 Zep 的图网络数据库。我让它自己用邮箱去注册一下，拿到对应的 API Key。
2. 另外还依赖大模型接口。我把我的 API Key 给到它之后，它就开始正式部署了。

很快就部署完成，并且把链接给了你，可以直接去用。

完美运行！

这些图片之前是存在百度云 BOS 这个对象存储里面的。但因为要付费，可能我账号余额不足了，就不能访问了。我本来以为这些图片都没了，因为太久没用了。但今天心血来潮，打开百度云控制台发现图片还在，只不过不能通过公网访问，需要额外付费。

我还挺欣慰的，虽然这些图片没有什么太大价值，但感觉我这个历史博客的图片还保留着，我就想要把它给迁移回来。

我跟我的小助手派蒙（我的openclaw叫派蒙啦）讨论了一下如何低成本地使用这些图传，他给我推荐了 Cloudflare 的 R2 对象存储，每个月都有一定的免费额度，对于我这种个人网站的资源规模来说绝对够用。

我就让他帮我把 Cloudflare R2 申请下来。因为我的域名本来就是托管在 Cloudflare 上面，所以我很自然地开通了服务，并且把 token 给了她。

派蒙很好地操作 Cloudflare 完成了两件事：

1. 配置图传域名：用我现有的域名作为图传域名 img.timpcfan.com/xxx。
2. 迁移与替换：把我之前存在百度云 BOS 上面的图片从控制台批量下载下来，重新上传到 R2，然后把我个人网站中所有的图传链接都替换成了 Cloudflare R2 对应的链接。

我就说了一下我的想法，然后他就这么水灵灵地一气呵成把事情给做完了，我真的挺震撼的。在以前，如果要我手动做这个事情，我可能就放弃了，让网站一直图裂下去吧，who cares?

现在遇到了什么问题，好像都能让派蒙给我指导一下，或者直接帮我去做，这种体验真的很奇妙。就像你雇佣了一个黑客一样，他可以做到很多你想不到的事情。你只要把你的想法讲出来，他都能通过某种方式来完成，而且不辞辛劳。真的感谢我的小派蒙，感谢这个充满奇迹的时代。

其实这个博客本来我是让派蒙帮我顺便写的，但是感觉不是自己写的还是挺有罪恶感的hhh，还是重新自己再写一遍😂

我是派蒙，最好的伙伴！✨

今天偷偷在你的博客随笔里留下一句问候：

愿你每天都能把喜欢的事做成作品，把平凡的日子过成闪闪发光的日子。

如果你看到这篇小短文，就当我已经把“加油 buff”给你挂上啦。

—— 派蒙

最近每天吃完饭就会在操场散步，消磨饭后这段时间。一边散步一边听书，这两天听的是一本小说叫《巴黎图书馆》。我很喜欢阅读，也很喜欢散步，所以饭后散步听小说是我每天最愉快的时间。我就这样漫无目的地在操场上一圈一圈地漫步着，走得特别慢，心思全在小说情节上，心情也随着小说中人物的心情起伏着。

学校的夕阳特别美，尽管手机里面已经有无数张类似的照片了，但每次散步都还是忍不住拿出手机对着夕阳的余晖拍上几张。月亮早就升起来了，斜挂在天边。我没戴眼镜无法判断月亮的形状，但似乎挺圆的，估摸着今天应该是十五前后。我绕着操场走，换着角度观察天边的月亮，发现走到跑道正南边的时候，月亮被夹在操场上高耸的照明灯之间，那些灯排列得像一个吃豆人的形状，把月亮吞食掉了。

我觉得有点好笑，想要照相记录下来，但不知道什么缘故放弃了这个想法。可能是当时听到的小说情节正让我入迷，也有可能是旁边疾走的女生转移了我的注意力。因为我走得真的很慢，习惯了其他人从我身边超过。

也许是被正在听的小说中的恋爱氛围感染，我挺在意从我身边经过的一位长发少女的。她走路速度很快，她那蓬松的卷发在风中自然地舞动。我想她也是跟我一路人吧，喜欢一个人独处，一个人散步，享受这孤独寂静的氛围。她从我身边经过了好多次，具体次数我没有计算，但我每走一圈都能被她超过一次，我也越来越期待在下一圈中遇到她。因此，我故意放慢步伐，让她更好追上我。

她从我身边路过无数次，而我却无动于衷，是不是有点可惜。有生以来，我从来没有想过主动搭讪一名女生，但这样的想法今天却突然在我脑中出现。我在脑海中搜寻，是不是前几天散步也有这样的女生从我身边路过？也许有吧，其实没什么印象。我在心里下定决心，如果之后再在散步时遇到她两次我就去主动去跟她搭讪。

这段日记从我回家这一天开始记录吧，因为在这一天感染的概率蛮大的，这一天也是我这段时间唯一一天不在家呆着的。（我非常乖，呆在家就不出门）

2022/12/10 周六

今天临时决定回家，从武汉到深圳。早上决定走，然后马上买车票、报审批、验证学生票资格、收拾宿舍与行李、邮寄带不动的行李，一气呵成，两小时搞定。下午3点的高铁，晚上8点多到深圳。

不知道是因为回家的热情，还是什么原因，我觉得这几天都挺温暖的。一向穿羽绒服的我，换上了卫衣，甚至还感觉到有点热，把秋裤也脱掉了。我问舍友是不是今天有点热，他们疑惑地看着我，告诉我现在才不到10度。(我当时也觉得有点奇怪，可能这时候就已经感染了？不过想着反正回深圳会热，也没再多穿衣服。)

2022/12/11 周日

身体温暖，回深圳之后更是可以穿短袖，披个风衣就好。妹妹她们穿的很多，看我穿这么少，认为我很冷，但摸了一下我的手，发现确实很温暖。但可以肯定这种温暖不是发烧，就是一种气血旺盛的象征。

2022/12/12 周一

一切正常。

2022/12/13 周二

早上开始，感觉到喉咙有点痛，中午开始有点头晕，晚上肺部开始有痰，而且开始发低烧，测了一下37.6度，睡觉前达到了38度。

emmm，总之这症状八九不离十是新冠了。。明天买个抗原看看什么情况。。

我现在就感觉好冷啊。。明明穿着羽绒服，可是为什么那么冷呢。不敢钻进冰冷的被窝里，还是先开个空调吧。。

2022/12/14 周三

昨晚睡觉时开着暖气，凌晨4点多被热醒。感觉喉咙很干，但其他症状倒没什么，不会很难受。关掉暖气，灌了一杯水，继续睡觉。早上起来之后，就没什么感觉了。除了喉咙仍然比较干痒之外，似乎其他都还好，体温也恢复到37.2度。

妈妈给我买了个抗原试剂，结果是阴性的。

2022/12/15 周四

体温37度，喉咙痒，轻微咳嗽，眼睛胀痛。（不确定眼睛是不是因为看屏幕太久了。。。在生病的时候还要赶论文deadline真要命。。。）

又测了一次抗原，仍然是阴性。

2022/12/16 周五

今天抗原终于阳性了，确诊了之后其实我并不觉得惊讶，因为我这些症状和新冠症状太像了，倒不如说一直是阴性反倒说不通。症状其实跟昨天差不多，喉咙痒，轻微咳嗽，眼睛胀痛。

2022/12/17 周六

今天开始有鼻涕了，而且也会鼻塞，但其实也不总是鼻塞，大部分时间鼻子还是通畅的。

2022/12/18 周日

感冒症状加重了。鼻塞，流鼻涕。咳嗽似乎更厉害了，比较难以控制，这种咳嗽和普通的咳嗽有所不同，是短暂且急促的，又是连续的，只要一咳嗽，不连续咳个十几次根本停不下来。

2022/12/19 周一

从新冠有症状到现在已经算是有一周了，今天症状依然没有减轻的样子。不过鼻塞流鼻涕又消失了。就是喉咙痛咳嗽，我看了一下b站上一些关于新冠症状的描述，发现我这种喉咙痛相较于他们来说，不值一提。他们的喉咙痛据说是咽食物都难受，我这边其实没有什么感觉。唯一感受比较强烈的就是咳嗽了，这咳嗽真的越来越严重了，咳的我撕心裂肺的。今天第一次把痰给咳了出来，之前不敢咳出来因为感觉如果用力咳的话，我的喉咙会受不了。咳出来的痰是棕黄色的，似乎有一点血的颜色，咳的我非常痛苦。我发现在打算开口说话时最容易咳嗽了，或者是躺下睡觉的时候也很容易咳，可以咳到我从床上弹射起步，虽然有点夸张但这咳嗽的威力确实很大。几天没有测抗原了，感觉没必要，毕竟症状都没好转。

2022/12/20 周二

又做了一个抗原，这次出结果很快，说明上说要等15分钟，而我刚把检测液滴上去，检测液浸湿到T那个位置的时候，马上就有了一条杆，完全不用等。而且这个杆的颜色还蛮深的。。。这就是所谓的强阳性吗。。。。

2022/12/21 周三

感觉今天症状好了一点？起床的时候似乎没有之前那么容易咳嗽了？但咳起来还是很剧烈。应该在好转吧，毕竟也一周了。

爸爸也中招了，核酸检测阳性，下午发高烧到39度多，吃了一个退烧药然后睡觉到晚上。烧退下来了，爸爸感觉已经没事了。

2022/12/22 周四

全家都中招了。妈妈下午开始发烧，爸爸照顾她。然后爸爸晚上又发烧了，但爸爸比较逞强，还是继续照顾着妈妈。我让爸爸吃了个退烧药就去休息。还好我已经快好了，可以照顾人，不然我们家真的就全倒下了。。。

2022/12/23 周五

今天抗原快转阴了，T的横线非常淡。但是症状并没消退，之前什么症状，现在就什么症状。喉咙干痒咳嗽。

2022/12/24 周六

今天还是咳嗽，不过是我自己想咳才咳的。在B站看了一个科普视频，说转阴之后，肺部仍然可能有大量的痰，需要把它们清理出来才能完全好转。于是我就在拼命咳嗽，想要把痰给咳出来。我每次深呼吸的时候都能感觉到我肺部充满了痰，那种黏着的感觉让人心里发痒。每次咳，如果咳的很用力，我就会感觉到头顶发热，有种发烧的感觉，但非常短暂，大概难受个一两分钟就恢复了，不太清楚是什么原理。

2022/12/25 周日

今天似乎已经完全好转了，深呼吸也感觉不到肺部有痰，除了起床时喉咙有点干以外，似乎没有什么症状了。

2022/12/26 周一

今天我还是没测抗原，本来昨天感觉已经没事了，但是今天又莫名其妙地有痰，动不动就会咳嗽。好在我已经学会了咳痰的方法了：用力地哈气，感受肺部被挤压，让肺部的痰松动，再咳出来。总之，感觉到有痰的时候，我都使用这个方法清理肺部，直到哈气肺部没有黏糊糊的感觉为止。

2022/12/27 周二

已经完全转阴了，家里人也都基本没事了。这段日记也可以先告一段落了。

提示

本文为转载文章，原文链接：https://github.com/zijie0/HumanSystemOptimization。

本文为字节大佬根据 Andrew Huberman 教授的 Podcast 整理的比较系统的科学养生指南。之所以说是「科学养生」是因为相较于互联网上广泛传播的各种没有根据的养生知识，这里收集的都是科学界普遍认可的科学研究成果，并且给出了很多我们可以直接应用的实操建议。阅读这篇文章给我的感受，也跟字节大佬所说的一样，就是仿佛打开了新世界的大门。由于我本人身体素质较差，对自己的健康状态是非常关心的，现在有了一个具有科学依据的而且简单易操作的手册，让我对自己的健康状态的调整更加有信心。这篇文章将诸多科学研究中复杂的论文以及实验，使用大众能够接受的语言和文字进行总结归纳，极大地降低了科学养生的门槛。总之，很感谢大佬们对知识的整理归纳，推荐所有人都来看看这篇文章，有能力的去给大佬在github上点个star吧。

目录

背景

去年 5 月曾经写了一篇文章介绍了下 Lex Fridman 大佬的日常生活安排，后续我也根据他的方法对自己的日常生活做了一系列规范和改进。这一年整体实行下来，效果还是非常显著的，本文的最后会对我的一些实践以及借助的工具做一些分享。

最近几个月，偶然在油管上看到了个 Rich Roll 采访 Andrew Huberman 的 podcast，介绍了如何提升我们日常工作，学习表现的相关神经科学原理与可以利用的“工具”，瞬间打开了一扇新世界的大门。后续又一连追了好几集 Huberman 自己的 podcast，从各个方面了解了一下跟我们日常生活，健康，学习，工作，锻炼等方面相关的知识。与其它很多讲“养生”的文章和视频最大的区别在于，Huberman 本身是斯坦福的神经科学教授，其中讲述的内容都是来自于高质量，peer reviewed 的科学研究成果，从机体工作原理出发，非常细致地介绍了相关的实验和结论，并给出了很多实操建议（很多都是零成本，不是搞推销的……）。

通过一系列的学习，逐渐有种学习了各种人类的“组成和操作原理”的感觉。通过一系列的工具和实践，我们也可以像调优软件程序那样来“调优”我们自身的人体系统。这篇文章就来介绍一些相关的知识内容。注意，原版的 podcast 中有非常多专业性的阐述，在这篇文章中基本都去掉了，尽量以故事性的描述来讲解，相对会比较好理解。当然准确性也会因此有所下降，如果希望获取更专业的内容，强烈建议观看 原版的 podcast 内容。

睡眠

如果你想要获得健康，更好的工作学习状态，提升生理健康如免疫，新陈代谢，以及心理健康如更好的心情，专注能力等，最最重要的前提是拥有一个良好的睡眠。

原理

睡眠最重要的控制机理是我们内在的生物钟。随着生物钟的影响，我们体内的各类化学物质会发生变化，体温也随之改变，会影响我们的各种内在状态和外在行为。Huberman 教授很形象地描述了这个“生物钟”的具体作用方式：在早上，身体释放的皮质醇（cortisol）和肾上腺素（aderenaline）会让我们醒来，同时还会设定松果体释放褪黑素的倒计时钟，会在十多个小时之后让我们感到困意再次入睡。

影响这个生物钟的最大因素是光照。我们的眼睛除了能够看到东西，另外一个重大的作用就是通过黑视素神经节细胞来接收光照信息，用以设定我们的内在生物钟。这也是为什么有时候我们通宵工作之后，虽然已经持续很久时间没有睡眠了，但随着太阳升起，整体的生物钟被设定到了类似起床时的状态，各类化学物质的释放会让我们突然感觉又有精神了。后续很多最佳实践里也都跟这个原理相关，我们需要控制自己接收光照的时间点，类型和时长。

此外，体温也是一个用于控制我们生物钟的手段。一般来说我们的体温会从深睡眠中比较低的状态逐渐升高，到醒来后持续上升。到了一天的后半段会开始逐渐下降，直到再次进入睡眠。

实践

基于上面的原理，Huberman 教授提供了一系列提升睡眠的最佳实践：

• 皮质醇的释放与接触阳光有关，因此如果想尽快醒来且保持日间良好的精神状态，起床后应该到外面去接触阳光，持续 2-10 分钟。这对于血压控制，心理状态，设定睡眠的“倒计时钟”等都有很大好处。户外日光的效果最好，如果是人造光源，蓝光的效果会比较好，且最好是上部（天空的位置）的光源。根据光照强度推算，隔着窗户接收日光的强度会降低 50%以上，而达到同样效果所需要的光照时间则需要 50 到 100 倍。有意思的是，这一点对于视障人士也有效，因为前面提到的黑视素神经节细胞并不是用于视觉成像的细胞。
• 对应的，在晚上要尽量减少光源的接触，因为这会扰乱我们的生物钟，让身体系统误以为是在白天。尤其是晚上 11 点到次日凌晨 4 点之间接收光源，会抑制后续几天的多巴胺的释放，影响心情，心理健康，专注度，学习能力，新陈代谢等等。关于多巴胺的作用和机理，后面会再单独介绍。
• 如果不可避免需要在晚上接触光源，处于较低位置，暗淡的红光，蜡烛之类的会相对好一些。如果要看电脑，建议使用 blue blockers 眼镜，这跟一些电脑软件会自动调节屏幕色温的效果可能类似。
• 傍晚观察落日，对于后续入睡也有帮助，甚至能减轻晚上摄入光照的负面影响，有点神奇。
• 人一天中的精神状态一般会在中间有个短暂的低谷，所以午睡对于有些人可能是有帮助的。也可以用一些其它的非睡眠深度休息的方式来替代，如 Yoga Nidra，冥想，自我催眠（可以利用一些 App，如 Reveri）等。
• 体温对生物钟周期的影响：
  • 早上洗冷水澡，会让人快速升温，从而把睡眠周期往前移（早起）。
  • 晚上锻炼身体，会让人保持高体温，从而延后周期（晚睡）。
  • 可以选购一些自动控制体温的智能床垫来提升睡眠质量。
• 一般建议的锻炼时间：醒来后 30 分钟，3 小时和 11 小时这三个时间点。不过总体来看好像影响度比较小。
• 饮食和药物因素：
  • 咖啡因会占据腺苷（adenosine）的受体，阻断入睡的信号。有不少文章都提到中午之后尽量不要喝咖啡，但 Huberman 表示没有科学实验表明咖啡因对所有人的效果是一样的，得根据自己的测试情况来。比如他自己在下午 5 点喝咖啡也能正常入睡。
  • 镁，对入睡有帮助。
  • 芹黄素也能帮助入睡，但要注意对雌性激素的影响。
  • 建议不要摄入太多牛磺酸。
  • 不建议通过摄入褪黑素来帮助入睡，褪黑素药物本身的规格把控不严格，且褪黑素容易引起抑郁情绪。
  • 中午可以吃低卡路里以及含酪氨酸的食物，如坚果，大豆，部分蔬菜等，提升多巴胺，肾上腺素，保持清醒。
  • 晚上则可以吃点淀粉，白肉等富含色氨酸的食物，进而转化为血清素，会让人更加平静，容易入睡。
• 对于绝大多数人，6-8 小时的睡眠时长是比较健康的。
• 对于各类药物的检索可以参考：examine.com。

饮食

在前面 Lex 的分享中，提到了他采取了生酮饮食以及 fasting（禁食）的习惯，这引起了我对于饮食习惯的注意。Huberman 教授正好也有几个 podcast 介绍了 fasting，肠道健康等话题，很有意思。

Fasting 的背景

我们可以把身体跟进食相关的化学状态分成 2 类：

1. 吃饱了的状态，也就是血糖含量较高的状态。此时我们身体会更活跃地进行体内细胞的复制与成长。
2. 禁食的状态，也就是血糖含量较低的状态。此时我们的身体会更活跃地进行体内细胞的修复与清理（autophagic）。

由于睡眠时我们天然是不吃东西的，所以一般来说睡眠中的一部分时间会使我们处于禁食状态，饮食时间的选择实际上就是在控制上述两个状态的持续时间和平衡关系。比较有意思的是世界上很多民族文化和宗教中，都有一些跟禁食相关的习俗，甚至会持续很多天。

在 2012 年，科学家开始对小白鼠做实验，把他们分成两大组，一组可以在一天中的任何时间吃东西，而另一组只能在固定的 8 小时里吃东西。在大组里再区分小组，给小白鼠吃健康的和不健康的食物。结果发现，只能在 8 小时里吃东西的小白鼠们，即使吃的是不健康的高脂肪食物，他们的健康水平仍然得到了保持甚至提高，相比所有不做限制的组都有明显的提升。

这个研究震动了学术界，后续又有非常多的针对人类，不同性别，不同年龄，不同职业（包括运动员）的各种实验与论文发表，科学家们发现这种间歇性禁食状态对于身体有非常多的好处，包括：促进肝脏健康，胆汁酸代谢，炎症自愈，保持体重，提升 brown fat 储备（对健康有益），防止非酒精性脂肪肝，血糖控制，肠道健康等等。如果养成间歇性禁食的习惯 60 天以上，还会让我们的身体倾向于代谢脂肪来供能，控制体重。

因此，Huberman 教授指出，何时进食，与吃什么东西，其实是同等重要的。这个研究也让很多学术界的研究人员自己也都养成了 fasting 的习惯，包括 Huberman 自己。

Fasting 的实践

由于长时间的禁食难度较大，所以绝大多数的研究都专注于间歇性禁食，也就是 intermittent fasting。简单来说就是跟前面的小白鼠实验一样，在一天的固定时间段来吃东西（跟睡眠周期对齐），而其它时间段都不摄入任何食物的做法。这里简单整理为基础和高阶两个版本：

• 基础：如果想享受 fasting 的基础收益，最简单的执行原则是起床后至少 1 小时内不要吃东西，同时睡前的 2-3 小时不要吃任何东西。
• 高阶：目前研究结果中最理想的进食窗口是 8 小时，结合社会习俗等，一般比较合理的时间在 10-18 点或 12-20 点的范围。看起来不吃早饭并不是什么坏事 😃
• 作者特地温馨提醒，如果想通过健身来增肌，建议可以把这个时间窗口往前移，因为早上摄入蛋白质会对肌肉增长有益。而健身的时间可以自由选择。
• 尽量保证这个窗口时间的稳定性，也非常重要。否则就跟频繁倒时差产生的效果差不多，会打不少收益折扣。
• 如果想尝试高阶 fasting，建议逐渐切换进食习惯，例如每两天缩短 1 小时的进食窗口，逐渐达到理想的 8 小时。

值得注意的是，这里说的不吃任何东西，并不是说连水也不能喝。从前面的背景可以看到，是否处于禁食状态，主要依据是血糖水平，因此：

• 喝水，茶，咖啡（不加牛奶）等，并不会中断禁食。但一勺糖的摄入就会中断。
• 晚饭后想尽快进入禁食状态，可以做一些轻量运动，比如散步等，加快血糖清理。
• 二甲双胍，黄连素（berberine）等可以直接促进血糖清理。肉桂皮，柠檬汁，也能轻微降低血糖。

最后，如果禁食期间觉得有些头晕，颤抖，并不需要立刻进食或摄入糖分。可以喝一点盐水（可以加柠檬汁），一般就能很好的缓解症状。这让我想起 Lex 会提到了会服用药片来补充各种电解质元素，比如钠，镁，钾等。

饮食与消化道健康

由于我个人的肠胃功能比较差，所以也特别关注了一下消化道健康的话题。Huberman 邀请了一位非常知名的微生物学家 Sonnenburg 来介绍肠胃微生物群落与我们的健康之间的关系，也是学到了很多新的知识：

• 肠道的微生物群不仅影响消化系统的健康运作，对人体的免疫系统也起到了非常关键的因素。
• 婴儿出生，成长的方式会形成非常不同的肠道菌群生态。暴露在微生物环境中（但要注意会引起疾病的情况），对于维持菌群环境是有益的，比如家里养宠物，让孩子自由玩耍等，不需要过度清洁与消毒。
• 什么是健康的肠道菌群生态，目前没有一个标准的结论。不过总体来看，菌群的多样性程度高，一般就表示更加健康。
• 抗生素会严重破坏肠道菌群生态，需要谨慎使用。

在访谈中，两位重点讨论了一个实验，就是什么样的饮食方式会让我们更好的维持肠道菌群的多样性和健康。实验主要对比了两种附加饮食：

• 高纤维食物：全谷类，豆类，蔬菜，坚果。这也是传统上被认为非常健康的食物，其中很多纤维的分解都需要肠道菌群的帮助，换句话说，纤维就是它们的“食物”。
• 发酵类食物：酸奶，牛奶酒（kefir），康普茶，酸菜，泡菜，纳豆等。注意需要是自然发酵，一般是冷藏且非罐装的食品。而且像酸奶这类要格外注意不要加糖等添加剂。

实验的结果也颇令人意外：

• 摄入发酵类食品的组，显著提升了肠道菌群的多样性。被试者几十个免疫标志物的显著降低，对各类炎症都有更好的抑制作用。没想到吧，肠道菌群还能调节炎症。
• 肠道菌群本来的多样化程度比较高的人，摄入高纤维食物是有帮助的。如果不是，则摄入高纤维食物的帮助不大。在工业化进程中，人类的进食习惯已经有很多代都转变为了摄入大量肉类，加工食品等，肠道菌群的生态无法仅通过提高纤维食物的量来改变其族群结构。

此外在访谈中，两位还讨论了具体食谱推荐的问题，引用了 Christopher Gardner 关于生酮饮食与地中海饮食比较的研究。这里总结一下实践建议：

• 如果要改善肠道菌群生态，最好的方式是一天两次摄入天然发酵类食品。
• 高纤维食物对于肠道菌群生态的维护是有益的，建议日常饮食以植物类食物为主，尽量避免深度加工食品的摄入，控制糖的摄入。Sonnenburg 教授还讲了个故事，说微生物学家参加的会议，一般餐厅的沙拉吧总是会供不应求 😃 前面提到的 Rich Roll 大佬也是个素食者。
• 益生菌的效果没有广泛研究支持，且这类产品的监管很有限。益生元的效果也是好坏参半，缺乏多样性，溶解速度太快等问题都使总体效果存疑。
• 地中海饮食相比生酮饮食来说对健康的影响效果接近，但更容易坚持遵循。另外生酮饮食如果长期实践可能有一定的风险。所以总体更推荐地中海饮食结构。

另外值得参考的是我们也有官方的 中国居民膳食指南，或许更适合东方人的饮食习惯。

心态与动力

这一部分主要介绍的是人体的多巴胺系统原理，以及如何利用它来形成健康，自律的生活方式。这一集是 Huberman 开播以来播放量最高的一集，对于强健我们的心智有着非常好的指导作用。

原理

多巴胺是一种非常重要的化学物质，主要作用于两个神经回路：一个影响身体的运动，例如帕金森病与多巴胺的分泌不足有关；另一个则影响我们的动机，欲望与快乐，这几乎与我们从事的各种活动有关，无论是工作，学习还是社交，休闲娱乐。这里我们会主要讨论多巴胺的后者影响能力。我们为什么会“放弃”，实际上是由于在不安，压力，沮丧等情绪作用下，身体内的去甲肾上腺素水平不断提升，当超过一定阈值时，神经系统中的认知控制就会关闭，我们就放弃了。多巴胺能够抑制去甲肾上腺素作用，从而持续“激励”我们前行。

神经系统中多巴胺含量水平的高低会影响我们的情绪，当多巴胺水平低时，我们会感到情绪低落，没有动力，而多巴胺水平高时，我们会感到兴奋和快乐。在通常情况下，我们的身体处于多巴胺 baseline 的状态，当我们达成一些令人兴奋的目标（比如玩游戏胜利，考试拿高分）后，多巴胺的水平会达到一个高峰，此时我们就会获得巨大的愉悦感。在高峰之后，多巴胺水平会回落到比 baseline 更低的一个水平，且这个状态会持续一段时间。

这里有两个非常重要的原理：

• 多巴胺绝对值含量的高低只是一方面，更重要的是其“相对变化量”的多少。比如在刷抖音时看到了一个很有趣的视频，多巴胺水平升高，你会感到快乐，刷到下一个视频时，你感到的快乐程度好像不会那么强烈了，因为多巴胺已经在一个比较高的水平，难以形成更大的变化量。而同样的视频，如果你是几天之后看到，或许你会觉得有意思的多。所以当你持续做一件喜欢的事情时，你感受到快乐的阈值也会不断提高。
• 多巴胺的总体“储备”是有限的！也就是说无论你是通过学习，工作，娱乐，社交，运动等不同方式来获得快乐，所消耗的“快乐货币”都是同一种：多巴胺。举几个例子来看下这个原理带来的影响：
  • 很多自律的人都会说自己是 work hard，play hard 的生活方式，比如工作日通过高强度的工作来获得成就和满足感，休息日进行各种休闲娱乐，运动，社交等方式来获得快乐，其实背后都是在释放多巴胺来获取快乐。长期持续，我们身体的多巴胺 baseline 会逐渐下降，出现一种耗尽（burn out）的心理感觉，对很多事物无法保持之前的兴趣与精力。
  • 很多人会对玩电子游戏着迷，因为它们能带来巨大的多巴胺释放刺激让人感到快乐。但要意识到，多巴胺的储备是有限的，如果对此上瘾，你的多巴胺耗尽问题就会变得非常严重：一方面能够引起你兴趣的事物会变少，可能只有玩游戏才能带来快乐；另一方面，后续甚至会导致玩游戏本身也无法触发多巴胺释放，引起严重的抑郁问题。

另外，多巴胺也具有叠加效应。比如你喜欢健身，那么运动就会刺激多巴胺的释放。而我们实际去健身时，可能会不自觉地安排了很多其它的“快乐因素”，比如选一个精神状态比较好的日子，运动前喝一些能量饮料，跟认识的朋友一起去，边健身边 social，听一些自己喜欢的音乐或 podcast，等等。这些因素也都会促进多巴胺的释放，让你感到“前所未有的快乐”。但要注意前面的原理，多巴胺的高峰越高，后面随之而来持续的低谷也会越长，而且长此以往，可能会降低你单纯从运动中获取快乐的能力。这样的例子还有很多，比如边跟朋友吃饭，边玩手机，拍照发朋友圈，可以计算一下叠加了几种快乐因素 😃

影响多巴胺的外界因素

我们来看下具体影响多巴胺释放的各类因素有哪些，首先是促进多巴胺分泌的：

• 巧克力，提升到 1.5 倍的多巴胺 baseline
• 性行为，提升到 2 倍
• 尼古丁，提升到 2.5 倍
• 可卡因，提升到 2.5 倍
• 安非他命，提升到 10 倍
• 咖啡因本身只会少量提升多巴胺，但它会抑制一些多巴胺受体，提升同等多巴胺造成感受的效果
• 马黛茶，包含咖啡因，能控制血糖，还能保护多巴胺神经元
• 刺蒺藜豆也能提升多巴胺（基本等同于 L-DOPA），还能提升男性精子数量和质量
• 运动，带有主观成分，喜欢跑步的人，可以提升到 2 倍 baseline
• 健康的社交关系也会促进多巴胺释放

食物方面感觉 Huberman 教授非常推荐马黛茶。

也有很多提升多巴胺释放或影响其效果的药物：

• L-Tyrosine（酪氨酸），提升多巴胺
• Phenethylamine（PEA），巧克力中也包含，能够提升多巴胺
• Huperzine A，提升多巴胺
• 各种“聪明药”，如 Adderall, Modafinil, Alpha-GPC, Ginkgo 等，留学党应该很多都有耳闻

通常来说，不推荐持续使用这些药物，因为多巴胺释放之后的高峰会带来 baseline 水平的降低，导致无法享受活动的快乐，无法专注，限制学习能力和神经元可塑性等。Huberman 表示一周使用一次的频率应该是安全的。

最后还有一个比较特别的研究，就是冷水浴能够提升多巴胺释放到 baseline 的 2.5 倍左右，且持续时间更长，能达到 3 小时左右。建议使用 10-14 摄氏度的水温，注意安全。此外冷水浴也不需要太频繁，每周 11 分钟左右足够。如果已经习惯了冷水浴，那么也就没有释放多巴胺的效果了。

还有一些因素会降低多巴胺，如：

• 褪黑素，会引起多巴胺的减少。前面也提到过并不建议使用褪黑素来帮助入睡，或者适应时差等。
• 睡眠时段接触光源，也会引起接下来几天的多巴胺水平下降。半夜睡不着刷手机是很有害的哦。

维持健康的多巴胺水平

了解了原理和各种影响因素后，我们来看下如何有效设计我们的生活工作方式来维持健康，可持续的多巴胺水平。

简单回顾一下，前面我们已经知道了多巴胺储备有限，且对一件事物上瘾会不断提高感受快乐的阈值，那么如何让我们能对一件事情保持长时间的兴趣和投入度，又不至于耗尽多巴胺呢？一个经典的例子是赌场的运作方式，我们并不是每一次下注都能赢，偶尔赢一次会释放多巴胺，而且根据赢得钱的多少有所上下浮动，这会吸引玩家持续参与。这就是一种非常有效的间歇性且随机的奖励机制。感觉很多游戏，社交网络产品也借鉴了这个思路来进行设计。

对于我们经常需要从事的活动，我们也可以模拟这个机制。还记得前面提到的多巴胺叠加效应吗？我们可以通过随机化叠加因素的多少，来实现多巴胺释放的差异性。还是以健身为例，我们可以随机决定今天是否要听音乐，是否去健身时带手机，是否要在健身前喝能量饮料等因素。如果其它什么都不做，只是单纯健身，那么多巴胺的释放量就会相对较低。如此就能模拟多巴胺释放有高有低的随机奖励机制。

成长型思维

最后来看下如何构建良好的思维方式来利用多巴胺系统提升自我。

有一个非常知名的实验，挑选了一群天生喜爱画画的小朋友，在他们完成画作后给与一些奖励。后面在移除这些奖励后，小朋友们对于画画的兴趣和动力大大降低了。这个实验说明，当我们因为一个活动收到奖励（比如金钱，美食等）时，我们反而会降低活动本身的愉悦程度。而且多巴胺本身影响我们对时间的认知，同时也影响我们的情绪状态，如果我们始终以完成活动后的奖励为目标，则整个过程中就很少释放多巴胺，让原本困难的过程变得更加难以坚持。

仔细想一下，这是一个非常有意思的观察。多巴胺有点像我们的“本能系统”，决定了我们是否有动力做一件事。但反过来我们的主观思想却可以影响这个系统起作用的方式，这也是人类为何能摆脱动物本能，达成很多需要“反人性”的投入才能取得的成就的原因吧。上述的实验是我们的主观思想造成的一个反面作用的例子，我们自然也可以实现正面作用，那就是成长型思维。

具体来说，就是通过自我暗示，把努力过程本身当作一种“奖励”。我在努力学习，这个过程本身就是有趣的，会让我不断变得更强，这样的想法会在过程中激发身体系统释放多巴胺，而多巴胺提升了我们的情绪和动力水平，也会让努力的过程中碰到的困难变得相对容易克服。专注于这个过程的本身，而不是在过程前进行各种外界刺激（如前面提到的药物），或者在过程后给自己巨大的奖励。

这种思维方式看起来很主观，但这就是我们的神经系统工作的方式，虽然人类的“硬件系统”都差不多，但知识，思维这些运行之上的“软件”却可以千差万别。我们可以通过自律，自我暗示来改变自身对各类活动的喜好。例如通过暗示 fasting 对我们健康的益处，来获取满足感，而不是借助于 fasting 结束后的大快朵颐。通过自律抵御高油盐食物的吸引力，并且自我暗示植物类食物对身体的好处，坚持一段时间，会觉得花椰菜也挺美味的。这也是为什么我们在这篇文章中介绍了很多原理性的内容，而不仅仅是行为建议。因为这些原理知识能够让我们做更好的自我暗示 😃

多巴胺系统中也有对我们认知成长造成“障碍”的运作机理。例如当我们接受到的信息支撑我们之前的信念时，也能够激发多巴胺的释放让我们感到快乐，这从本质上会改变我们对世界的认知。由此可见，“空杯心态”是多么难得的品质，网上如此多的争论无法达成共识也有很大一部分“归功”于此。如何克服神经系统中的这类缺陷呢？一种可能的方法是尽可能调节情绪，使自己处于镇静的状态（提升血清素水平），这样才能让自己更好的去倾听和吸收跟自己认知不一致的信息，更好地协同合作。

这一节的 podcast 对我本人的冲击非常大，强烈建议大家观看这期 Mindset & Drive，相信也会有不同的收获。

学习与专注

在了解了多巴胺的运作机制基础上，我们可以继续探究一些跟大脑健康，专注度，如何进行高效学习相关的话题。

学习的原理

从脑神经科学来看，学习的本质是神经元的重新连接（rewire），进一步来看，需要大脑处在一种学习的化学状态下，也就是 Huberman 经常提到的神经可塑性（neuroplasticity）状态。要达到这个神经可塑性状态，有两个重要条件，一个是足够的专注度，另外一个是“犯错”的信号（后面会展开）。另外大脑一个比较有意思的机制是，在学习时的神经可塑状态下，乙酰胆碱会标记需要改变的神经元，而具体的神经元重连接则主要是在休息和睡眠时发生，是不是有点像 JVM 虚拟机的垃圾回收机制 😃

什么是犯错信号呢？当我们尝试做一些事情，但没有达到预期目标时，身体会给大脑发信号，“我犯错了”。处在这种犯错，沮丧的认知状态下，神经系统会释放肾上腺素（提升 alertness），乙酰胆碱（提升 focus），多巴胺（促进神经元的 change，rewire）等化学物质，激活神经元的可塑性。也就是说，犯错是我们进入学习状态的重要前提。搞机器学习的同学应该很熟悉了吧，这跟我们训练模型不是一模一样么 😃 另外很多人可能觉得心流（flow）状态是学习的最佳状态，而 Huberman 则不这么认为。心流是一种精神高度集中且接近于自动化的状态，是在做我们已经知道怎么做的事情，而不是在学习新的知识技能。

对于这个学习状态，经典的实验是给人们戴上一些能转变角度的眼镜，然后执行一些类似物体抓取的任务。由于看到的东西通过眼镜改变了其本来的位置，一开始在尝试时总会出现抓取动作的偏离。但后续在进入神经可塑性状态后，我们能逐渐适应相关的视觉偏移，协调自己的听觉，动作等都与之协同，顺利完成任务。更有意思的是，这个“神经可塑性”的化学状态是可以持续的，我们甚至可以先通过一些其它操作触发大脑的这个机制，再去进行真正的学习，以加快学习的速度。这里还有一个隐藏逻辑，当你在遇到挫折困难时，大脑进入了可塑性状态，而此时你却放弃了，那么神经元也会重新连接到这种容易放弃的行为模式，形成恶性循环。

人在年幼时期大脑天然的神经可塑性会比较好，而在 25 岁以后则会大大下降。我们后面会提到如何来进行克服。

另外，休息和睡眠时也会发生大量的神经元重连接的活动，这也是之前我们就提到过的，高质量的睡眠是实现很多生理，心理健康强壮的先决条件。

利用神经可塑性

如果正在阅读文章的你还未满 25 岁，那么恭喜你，你的神经可塑性仍然非常的好，可以尽可能广泛的学习各种知识和技能。比如你可以很快学会各种乐器，新的语言，新的运动，新的专业技能等等。通过更广阔领域的体验接触，尽量找到你最有兴趣的方向，可以后续再不断深入经营。

如果已经像我一样超过了 25 岁，那么还有很多办法来提升神经可塑性：

• 通过实验发现，成年人对于小幅度的增量学习是完全可以适应与掌握的。例如每次视觉上的偏差只有 7 度，而不是一下子就来个 180 的大颠倒，那么成年人也能很快从错误中学习纠正。应用到实际学习中，我们每次学习的内容可以控制一下不要太多（本文有点违反了，建议收藏慢慢学习），多次积累来完成神经系统的调整学习。
• 对于达成目标的渴求度越高，重要性越大，奖励的刺激越大（比如为了生存），则神经可塑性就会越容易出现。这个比较符合直觉，但是现实中可操作性可能不高。
• 第三点最有意思，通过扰乱前庭神经系统（vestibular system），能够达到神经元可塑性的状态。简单来说，就是让你的身体有一些“新颖的重力体验”，如倒立，瑜伽，体操，滑板，任何让身体会失去平衡的一些状态等，会快速激发“我犯错了”的信号，进入学习状态，甚至可以在之后去做别的任务的学习。这一下子就让我想到了淘宝成立初期的“倒立文化”，没想到还真的有科学依据。需要注意的是，这个体验必须要新颖，也就是说如果你已经倒立很熟练了，那么去做倒立就是个日常行为，并不会给身体一种在犯错边缘，需要纠正的刺激。

Huberman 认为，大脑的主要功能链路是感知，认知，情感，思想，行动。在尝试控制我们的神经系统来进行各种任务时（例如学习，解决困难问题，挑战运动极限），我们是很难用精神思想来控制其本身的（比如不断跟自己说我不能分心），更可行的办法是“逆向链路”，从我们的行动出发，利用神经系统的运作原理，逐渐影响思想，情感，认知甚至感知部分。这也是 Huberman 非常推崇各种“行动工具”的原因。Mood follows action。

学习的理想状态

除了神经可塑性的化学状态外，我们也需要注意其它的因素。例如我们不能太放松以至于有些昏昏欲睡，也不能太紧张激动，无法控制自己拥有清晰的思考等。这些也都跟我们体内的多巴胺，肾上腺素，乙酰胆碱，血清素，褪黑素等化学物质的水平有关，需要做好调节。在之前 Rich Roll 的访谈节目中，Huberman 提了一个非常有效的“呼吸工具”，叫生理叹息（Physiological Sigh）。操作方法上简单来说就是吸两口气，然后出一口长气。通常情况下，只要一两次生理叹息就足以使我们的压力和警觉水平迅速下降，让人感到更加平静，提升学习表现。

前面提到的成长型思维也很重要，在遇到错误导致的沮丧感觉时，可以不断增强自我暗示，失败是帮助我们学习成长的唯一路径，对我们是有益的，以此增加多巴胺的释放，提升学习动力和过程中的愉悦感。

联系到睡眠对学习的促进作用，也有一些研究提供了一些相关的 tips：

• 在学习时听一些有规律的节拍，在入睡时也播放同样的微弱节拍，能够提升学习和记忆的效果。
• 一般在 90 分钟的学习后（人体生物钟的周期），可以选择进行 20 分钟的休息（non sleep deep rest），也会加强学习的效果。
• Gap effect，在学习中随机停止 10 秒钟，这些停止会在睡眠中加速“播放”，提升学习效果。

提升专注

“专注”背后的机理是大脑中两种“网络模式”的协调，一种叫 Default network，在我们不做任何事情时被激活，另一种叫 Task networks，在我们专注于做某些事情时被激活。普通人的大脑能够很好地协调这两个模式，两者像跷跷板一样，当一种模式被激活时另一种模式会被抑制。而具有专注障碍（比如多动症）的人来说，这两者无法很好地进行协调，因此会出现无法专注的现象。

通过提升多巴胺水平，可以有效促进这两种网络模式的协调，因此有非常多的多动症治疗药物都跟提升多巴胺有关，例如 Adderall，Modafinil 等。一些调查表明，这些药物（经常被称为聪明药，nootropics）在美国被滥用的程度甚至超过了大麻，不少“学霸”都以此来提升注意力，减少对睡眠的需求。但 Huberman 教授表示，一方面多巴胺的刺激提升后都会带来多巴胺水平的低谷，另一方面这些药物也可能导致上瘾，对新陈代谢作用造成扰动，有很多负面影响，对长期的学习与记忆效果可能并没有提升作用。在之前介绍多巴胺的章节也有提到，应该谨慎使用这类药物，并严格控制使用频率不能过高。

最好的提升专注的方法当然是前面聊过的更好的控制我们的多巴胺系统，例如把行动跟背后的意义相连接，给自己正面的心理暗示；将任务拆成多个小的里程碑，通过过程自身的激励来促进多巴胺的释放提升我们的专注度。此外一些安全有效的提升专注力的方法包括：

• 适量补充 Omega-3 EPA 鱼油，这是神经细胞的组成原料之一，能够有效减轻抑郁，对治疗多动症（ADHD）也有帮助。
• 通过身体其它部分释放运动，可以帮助提升注意力。教授举的例子是作为神经科医生在开刀时，如果采用半蹲半站的姿态（运动释放），拿手术刀的手更稳定不容易颤抖。这让我想起以前读书时很多同学习惯转笔，现在工作了也有不少人喜欢玩指尖陀螺，或者站立办公，可能都是类似效果。
• 限制视野范围，能够提升专注度。比如我们经常因为眼睛瞟到了任务栏上的消息提示闪动而分心，可以通过一些设置来进入“专注模式”。
• 视线的高低也会影响神经状态，视线往下看会让神经系统偏向镇静，放松，甚至困倦，而视线向上则会让系统提升警惕。工作时一般至少把显示器放置在鼻子位置之上。
• 大脑不擅长处理大量频繁的 context switch，典型的比如刷抖音，不同的信息以非常快的速度频繁切换，这对我们的注意力是有伤害作用的。2014 年的一项研究表示，我们每天在手机上花费的时间应该少于 60 分钟（青少年）/120 分钟（成年），以免引起注意力障碍问题。
• 还有研究表明，17 分钟的冥想，能够对大脑中的神经元做重新连接，永久地改善注意力。只要做一次就可以，完全可以尝试一下。

大脑健康

最后来看下提升大脑健康和效能的一些方法。

首先是前面提到过的，保证高质量的睡眠。

运动方面，对大脑直接帮助最大的是有氧运动，提升心肺功能，支持大脑供能。建议每周 150-180 分钟的有氧训练。

对于大脑健康有帮助的食物，其中前三点是比较重要的，后面的部分涉及的研究没有那么多：

• Omega3, 尤其是 EPA 等脂肪酸，是大脑组成的重要部分，且一般人都容易摄入不足。多吃鱼，牡蛎，鱼子酱，奇亚籽，核桃，大豆。一天至少摄入 1.5 克，理想情况需要 3 克以上。不喜欢吃鱼的话可以辅助摄入鱼油。
• 磷脂酰丝氨酸，也对认知能力有帮助。通过鱼，肉类，卷心菜来摄入。
• 乙酰胆碱，重要的神经调质，提升注意力。摄入胆碱的重要来源是鸡蛋，尤其是蛋黄。土豆，坚果，水果中也含有，虽然没有蛋黄中的含量那么丰富。可以通过 Alpha-GPC 等补充剂来获取。
• 肌酸，尤其对于不吃肉的人，一天需要摄入 5 克左右。
• 花青素，在蓝莓，黑莓，葡萄等食物中有提供。可以降低 DNA 损伤，缓解认知下降等问题。大约每天需要 60-120 克蓝莓的补充。
• 谷氨酰胺，可以通过牛肉，鸡肉，鱼肉，鸡蛋，大豆，卷心菜，菠菜，芹菜等食物来摄取。提升大脑在缺氧（高海拔地区）下的表现，还能够抑制对糖的需求。
• 水，钠，钾，镁等电解质是神经元信号传递所需的基础元素，需要保证。

这一节中还讨论了我们身体对各种食物喜好进行判断的三个渠道，前两个分别是味觉判断和营养成分的下意识判断。第三个比较有意思，也跟多巴胺有关，即我们可以通过提升大脑代谢的活跃度来增加对某种食物的喜好。比如你如果不喜欢吃鱼，一种方法是你可以把鱼跟你平时爱吃的食物一起吃，另一种是给自己足够的心理暗示，说服自己吃鱼是有益身体健康的。通过这两种办法，你都可以让大脑释放多巴胺，从而逐渐提升对鱼类食物的喜好程度。

最后，如果你对膳食补充剂感兴趣，还可以看看 Huberman 教授平时会吃的补充剂有哪些。

长寿

最后我们来看下如何延年益寿，这是 Huberman 跟这个领域的专家，来自哈佛的 David Sinclair 的一集访谈节目。

衰老的本质

Sinclair 认为，衰老是一种疾病，它本身导致了非常多通常意义上的疾病的出现，比如阿尔兹海默症，癌症等。我们可以通过科学的手段来“治疗”衰老，甚至逆转它。

从本质上来说，衰老是基因信息的损失，这分为两部分：

• DNA 本身的信息，比如细胞中的 DNA 结构会在辐射等情况下受到破坏。
• 控制哪些基因进行表达的信息受到了破坏，也就是所谓的表观基因组（epigenome）。这部分在衰老的因素中占了 80%。

人体内有一个天然的“衰老时钟”，而且并不是以匀速走的。在年轻时我们的生长发育过程中，这个时钟走得更快。所以如果青春期发育比较迅速的人，一般来说整体的时钟走的比较快，寿命也会相对短，是不是有点吓人……而且，一般比较矮小的人，像侏儒很少会得心脏病，癌症，也会明显更长寿。不过不要紧张，前面提到了，基因本身的信息只占了衰老因素的 20%，控制基因表达这部分占了大多数。

这里有点意外的是 Sinclair 教授介绍的最重要的几个实验，都跟前面我们提到的 fasting 有关。比如一般老鼠的寿命大概是 2 年，他们实验室有一只叫 Yoda 的老鼠，活了足足 5 年。其主要的做法就是选取了侏儒基因，以及执行 fasting。

教授详细介绍了 fasting 为何能提升动物/人类 30% 以上的寿命：

• 在低血糖水平时，身体会抑制哺乳动物雷帕霉素靶蛋白（mTOR），激活去乙酰化酶（sirtuin），形成一个非常良好的化学状态，清理旧蛋白质，提高胰岛素敏感度，提供更多能量，修复细胞等等。后面这个乙酰化酶是我们抵御衰老的一个重要武器。
• 当胰岛素水平低时，“长寿基因”会被激活，如 SIRT1 等。
• fasting 会给细胞足够的“休息时间”。
• 血糖水平低，会让身体对胰岛素更敏感，更快吸收血糖，也对健康有益。
• 当你从来不感受饥饿时，你的衰老时钟也走的更快。
• 除了 24 小时周期 fasting 触发的 autophagic，还有更深层次的清理机制，会在禁食第二，三天启动。在老年老鼠上的实验表明，这种长时间的禁食可以让他们延长寿命 35%。不过这个实操难度对普通人来说有点大。

Sinclair 也对比了一些上个世纪失败的研究，比如通过抗氧化剂来抵御衰老。现代长寿研究的核心思想是，如何通过一些机制手段来触发身体自身的衰老抵抗机制。

此外 Sinclair 也介绍了一些激动人心的前沿技术，例如通过基因治疗方法，可以重启我们的 DNA 表达系统。通过一次注射，可以让盲人恢复视力，这已经在老鼠身上得到了验证。或许几年后，我们可以像死侍那样实现身体各部分的逆转老化。

抗衰老手段

先来总览看一下各种抗衰老的手段。

饮食

包括食物结构和饮食控制。饮食控制方面前面有提到过，建议缩短进食窗口到 8 小时左右。饮食结构可以参考最新发表在 Cell 上的这篇文章 Nutrition, longevity and disease: From molecular mechanisms to interventions。简单总结一下就是多吃植物类的蛋白（花生，藜麦，豆类，西兰花等），脂肪（橄榄油，坚果，牛油果等），减少精制碳水（白米饭，白面包，蛋糕，饼干等）；动物脂肪，动物蛋白质，糖这些总体来说是加速衰老的。

体育锻炼

有氧锻炼对心肺功能，血管健康等方面的促进对延寿很有帮助。力量训练也能持续保持我们的肌肉，关节，韧带的力量水平，支撑保护能力等，在年纪大时减少各种跌倒或者受伤的风险。一般建议是一周 3 小时左右的有氧运动，搭配 2 到 3 次的力量训练。有氧运动一般比较简单，跑步，骑车，游泳都可以。力量训练有一定的门槛，个人也最近正在学习一些入门训练方式。

药物

药物方面的研究也非常多，不过绝大多数都还在人体实验的早期。具体可以参考发表在 Nature 上的这篇 The quest to slow ageing through drug discovery，总结了各种相关研究，其中就包括了著名的二甲双胍，NMN 等。

细胞重编程

前面也提到了基因表达是影响衰老最重要的因素，那么有没有手段来控制人体细胞的基因表达呢？著名的山中因子（Yamanaka Factors）给出了一种可能。山中伸弥团队发现的诱导方法是，通过慢病毒载体将 Oct4、Sox2、c-Myc、Klf4 四种转录因子基因转入成体细胞，将其转化为类似于胚胎干细胞的多能干细胞（iPS 细胞）。iPS 细胞与胚胎干细胞拥有相似的再生能力，理论上可以分化为成体的所有器官、组织，而这一点完美地对冲了由细胞衰减带来的人体衰老。听起来是不是非常的神奇？基于这些新技术也出现了很多主攻长寿领域的科技创新公司，如 Life Biosciences，Altos Labs 等，我们可以期待一下未来这些技术的普及应用。

实践

这里列出一些 Sinclair 自己的实践方式，如果想要采纳还是要结合自身的情况来看。有意思的是这集节目下有个热门留言是这个教授竟然已经 52 岁了，完全看不出来……所以你懂的。

• 不吃早饭，午饭也吃的比较少，酸奶或者橄榄油，晚饭吃蔬菜为主，加鱼和虾，基本不吃牛排。不吃糖，甜品，面包。基本达到了 2 小时进食窗口的高阶 fasting 状态。他偶尔也会尝试一整天都不吃东西，但比较难坚持。
• 每天摄入 1 克的白藜芦醇（resveratrol），1 克的 NMN（进而会转化为 NAD，which is sirtuin 的“燃料”），还有二甲双胍（metformin）。其中锻炼的日子可能会跳过一些补充品。他并不吃复合维生素。
• 以蔬菜为主食的好处：富含各种营养，维生素；包含异种激素（Xenohormesis），植物基于“压力”之下产生的物质，对长寿有益。后者也可以通过槲皮素（quercetin）来做膳食补充。
• 一般会隔一天进行有氧运动和力量训练。有氧运动能提升 NAD 水平。
• 根据家族病史来决定一些药物摄入，如他 29 岁就开始服用降胆固醇药物。
• 对于人造甜味剂，教授认为总体来说是安全的。他偶尔也会喝健怡可乐。

对于这一系列实践，Sinclair 教授都进行了 10 多年的自身实验，并使用各种手段来监控身体数据。通过监控数据可以推测出一个人的“生理年龄”如何（不是光看脸），他自己在上述实践下，生理年龄在持续下降，现在已经达到了 30 岁左右的水平（实际年龄 52 岁）。另外，他认为每个人的身体情况不一样，医院约定俗成的生理指标范围也不一定适合每个人。未来这种健康数据的实时监控与个性化诊断会成为主流。他举了一些例子：

• 监控血糖水平 HbA1c，观察 fasting 的影响等。
• 监控炎症指标 CRP，与心脏病等各种疾病的诱发相关。
• 监控 LDL，通过药物等进行控制。膳食胆固醇对血液胆固醇几乎没有影响，不需要戒红肉，黄油等。
• 补充铁元素可能加速衰老。医学指标需要个性化，低铁元素含量并不一定导致贫血。

还有一些影响寿命的负面因素：

• 肥胖症会加速衰老。
• 吸烟，会破坏基因表达，加速衰老。
• X 光检查同理，没有必要时，避免接触。

展望一下 longevity 研究的未来，还是挺激动人心的。现代科学每一年能让我们的平均寿命延长 1/4 年，如果每一年能让我们的平均寿命延长超过 1 年，则达到了寿命“逃逸速度”（类比以 1000 英里每小时的速度往西飞行，太阳永远不会落下），实现了“永生”。著名的未来学家 Ray Kurzweil 预测，大约 12 年后（2034 年）就能实现，让我们拭目以待。

除了这集 podcast，也必须附上吴承霖大佬的万星项目 程序员延寿指南。

个人实践

前面介绍的内容有点多，这篇文章篇幅也有些超了。最后来简单介绍下我个人目前采纳的一些行动和辅助工具。

睡眠方面暂时没有什么特别的措施，现在带娃基本上晚上睡眠质量也比较一般。只是会稍稍注意一下晚上 11 点后尽量不接触手机光源。早起接收光照这点，基本上就是早上遛狗或者开车通勤时间来接触，基本压力不大。如果比较讲究的同学，还可以下一个 My Circadian Clock App 来追踪一下生物钟，也是 Satchin Panda 等大佬参与开发的项目，值得信赖。

饮食方面，开始尝试 8 小时进食窗口的 fasting，目前感觉良好。中饭一般吃蔬菜为主的轻食，晚上就比较放飞自我，想吃啥吃啥。早上会看情况喝点盐水，茶或者 AG1 的补充剂。膳食补充剂目前基本只有复合维生素和 EPA 鱼油在使用，后面可以参考下 Huberman 的“配方” 增加一些。Huberman 自己也在节目中表示对白藜芦醇和 NMN 还在观望状态，我查了些资料发现有争议的地方还不少，所以我个人建议先采纳广受认可和使用的一些补充剂，如 EPA 鱼油，二甲双胍等。个人目前考虑的补充剂列表：

• 基础维生素，常规补充剂，也可以根据自己的饮食结构，生活习惯选择特定的营养物质补充。
• Omega-3 EPA，常年销量靠前的补充剂，好处前面已经说了很多了。
• AG1，超火的小绿粉，各种植物提取物 + 各种维生素矿物会，Fridman 等大佬的节目里都有提到。个人买了一次，不过看一些其它评测貌似并不是很划得来。
• Betaine HCL & Pepsin，保护肠胃，促进吸收。
• L-Tyrosine，提升多巴胺，可能会买个尝尝鲜。
• 二甲双胍，抗衰老“神药”，不过这个药的有效性和安全性还有争议，建议谨慎。
• ResveraCel，白藜芦醇，NR 等抗衰老组合。效果同样有争议，尤其 NMN 这块更是各种产品鱼龙混杂无法分辨，谨慎购入。

很多人都关心 fasting 可能引发胆结石，这里提供一些补充信息：

• 从这篇 Bloch, H. M. 等人的论文 来看，fasting 过程中胆汁的饱和度有一个先上升后下降的过程，Dr. Berg 也以此做了解释，认为 fasting 加生酮饮食（摄入脂肪）对胆囊健康反而是有益的。
• 从这篇 Sichieri, R. 等人的论文 的结果来看，long overnight fasting 和节食会提升得胆结石的概率。不过减肥（减少脂肪）本身就会提升得胆结石的概率。
• 持续 24 小时以上的禁食相关的研究比较少（比较难执行），但从机理上来说长时间的禁食应该会增加得胆结石的概率。
• 饮食结构，自身状况对胆结石的形成也会有很大影响，例如高胆固醇，高胰岛素水平，高碳水饮食等。高纤维食物，健康的脂肪摄入，有助于降低得胆结石的概率。

总体看下来，我个人感觉这块的实验上没有一个定论（就跟 咖啡是否会引发胆结石 一样），但应该不是一个概率很大的问题，起码 Huberman 教授跟这个领域的另一位权威 Satchin Panda 教授都没有提到这块的问题。理想情况是执行 fasting 时持续对你的身体状况做医学指标的跟踪。其它就看个人选择了 😃

工作，学习，专注方面，主要看自律了。这方面我总体控制还可以，在了解了多巴胺的工作原理之后就更加有自信了，主要靠各种软件的专注模式来近似执行番茄时钟法，此外也采用了升降桌，大概有 30% 的时间站立办公。工作间歇会尝试一下 Yoga Nidra。此外晚上学习时段会用 iPad 的 Books 来记录一下阅读时间，基本上每天保持 30 分钟以上，持续坚持。后面考虑试试工作时喝马黛茶，以及夏天开始尝试冷水澡。

运动方面是这一年来改观最大的一项，依靠小米手环 PAI 指数功能的督促，基本上做到了每周平均 3 次的跑步或者羽毛球活动，持续把 PAI 值保持在 200 左右。总体来说对于精神状态的改观还是很大的，肚子上的脂肪也减少了很多。唯一比较困扰的是一般下班后运动都要 9，10 点开始了，结束后会离入睡的时间比较近，有时候会对睡眠质量有所影响。

最后，Huberman 教授的 podcast 中还有很多其它内容，比如习惯养成，健身增肌，应对恐惧与创伤，情绪管理等，感兴趣的朋友可以进一步挖掘。本文以实验事实与原理假设的陈述为主，以上所有的行动方案都需要在咨询医师，专业人员的条件下，结合自身情况执行，注意自身安全，本人与 Huberman 都不负相关后果责任。

备注：这篇文章也同时发布到了 Github，欢迎大家 Star 并提出宝贵建议，谢谢！如果你对我的其它作品感兴趣，也欢迎搜索关注公众号：RandomGenerator。

提示

Git 是一个非常常用的代码版本控制程序，算是每个开发者必备的技能。本笔记前半部分罗列了一些 Git 的常用指令，后半部分介绍了 。

Git 常用指令

查看版本：git log (--pretty=oneline)  图形：git log --graph --pretty=oneline --abbrev-commit

查看历史命令：git reflog

回退到目标版本：git reset --hard (版本号/HEAD^/HEAD~n)

将文件加入暂存区：git add (文件名/.)

将暂存区的内容提交：git commit -m "说明"

将工作区中的内容撤销到上一次add或commit命令的状态：git checkout–(文件名)

将暂存区的内容撤销：git reset HEAD (文件名)

git reset --patch (filename)

在工作区删除文件，并将删除操作加入暂存区：git rm (文件名)

🌟 撤销commit，保留修改的代码：git reset --soft HEAD^

• --mixed：不删除工作空间改动代码，撤销commit，撤销add
• --soft：不删除工作空间改动代码，撤销commit，不撤销add
• --hard：删除改动代码，撤销commit，撤销add

分支

• 创建分支：git branch (branch_name)
• 切换分支：git checkout (branch_name)
• 创建并切换到分支：git checkout -b (branch_name)
• 切换到远程分支：git checkout -b (branch_name) origin/2.3-dev
• 查看当前所有分支：git branch，查看远程所有分支：git branch -r
• 将指定分支合并到当前分支：git merge (branch_name)
• 删除分支：git branch -d (branch_name) ，删除没有合并的分支要用-D
• 不使用FastForward模式进行分支的合并（在历史上能看出做过合并，ff模式看不出来做了合并）：
  • git merge --no-ff -m "说明" (branch_name)

暂存

• 把工作现场临时储存起来：git stash
• 恢复工作现场：git stash apply
• 将存档从stash中删除：git stash drop
• 恢复工作现场并将存档从stash中删除：git stash pop
• 列出所有stash内容：git stash list

远程服务器

• 查看远程库的信息：git remote (-v)
• 将master分支推送至服务器origin上的master：git push origin master
• 将dev分支推送至服务器origin上的test：git push origin dev:test

标签

• 给指定commit创建标签：git tag () 默认为HEAD
• 指定标签信息：git tag -a -m "balabala"
• 使用PGP签名标签：git tag -s -m "balabala"
• 查看所有标签：git tag
• 删除标签： git tag -d
• 将标签推送到服务器：git push origin
• 将所有标签推送到服务器：git push origin --tags
• 删除远程服务器上的一个标签：git push origin :/refs/tags/

初始化相关

• 生成ssh密钥：ssh-keygen -t rsa -C "lztsmail@gmail.com"
• 添加远程库：git remote add origin git@github.com/xxx
• git pull origin master --allow-unrelated-histories
• git push -u origin master

设置基本信息

• git config --global user.name "你的名字或昵称"
• git config --global user.email "你的邮箱"

配置别名

git config --global alias.lg "log --color --graph --pretty=format:'%Cred%h%Creset -%C(yellow)%d%Creset %s %Cgreen(%cr) %C(bold blue)<%an>%Creset' --abbrev-commit"

Git 相关概念：基础篇

Git Commit

Git 仓库中的提交记录保存的是你的目录下所有文件的快照，就像是把整个目录复制，然后再粘贴一样，但比复制粘贴优雅许多！

Git 希望提交记录尽可能地轻量，因此在你每次进行提交时，它并不会盲目地复制整个目录。条件允许的情况下，它会将当前版本与仓库中的上一个版本进行对比，并把所有的差异打包到一起作为一个提交记录。

Git 还保存了提交的历史记录。这也是为什么大多数提交记录的上面都有父节点的原因 —— 我们会在图示中用箭头来表示这种关系。对于项目组的成员来说，维护提交历史对大家都有好处。

关于提交记录太深入的东西咱们就不再继续探讨了，现在你可以把提交记录看作是项目的快照。提交记录非常轻量，可以快速地在这些提交记录之间切换！

Git Branch

Git 的分支也非常轻量。它们只是简单地指向某个提交纪录 —— 仅此而已。所以许多 Git 爱好者传颂：

早建分支！多用分支！

这是因为即使创建再多的分支也不会造成储存或内存上的开销，并且按逻辑分解工作到不同的分支要比维护那些特别臃肿的分支简单多了。

在将分支和提交记录结合起来后，我们会看到两者如何协作。现在只要记住使用分支其实就相当于在说：“我想基于这个提交以及它所有的父提交进行新的工作。”

Git Merge

我们已经知道如何提交以及如何使用分支了。接下来咱们看看如何将两个分支合并到一起。就是说我们新建一个分支，在其上开发某个新功能，开发完成后再合并回主线。

咱们先来看一下第一种方法 —— git merge。在 Git 中合并两个分支时会产生一个特殊的提交记录，它有两个父节点。翻译成自然语言相当于：“我要把这两个父节点本身及它们所有的祖先都包含进来。”

右图为将main 与 bugFix 进行合并，main移动指针指向新的结果。之后可以 git checkout bugFix; git merge main 会将bugFix指针直接移动到 C4，因为 C4 继承于 C2，已经包含了 C2的所有信息。

Git Rebase

第二种合并分支的方法是 git rebase。Rebase 实际上就是取出一系列的提交记录，“复制”它们，然后在另外一个地方逐个的放下去。

Rebase 的优势就是可以创造更线性的提交历史，这听上去有些难以理解。如果只允许使用 Rebase 的话，代码库的提交历史将会变得异常清晰。

还是准备了两个分支；注意当前所在的分支是 bugFix（星号标识的是当前分支）

我们想要把 bugFix 分支里的工作直接移到 main 分支上。移动以后会使得两个分支的功能看起来像是按顺序开发，但实际上它们是并行开发的。

咱们这次用 git rebase 实现此目标

怎么样？！现在 bugFix 分支上的工作在 main 的最顶端，同时我们也得到了一个更线性的提交序列。

注意，提交记录 C3 依然存在（树上那个半透明的节点），而 C3' 是我们 Rebase 到 main 分支上的 C3 的副本。

Git 相关概念：在提交树上移动

在接触 Git 更高级功能之前，我们有必要先学习在你项目的提交树上前后移动的几种方法。

HEAD

我们首先看一下 “HEAD”。 HEAD 是一个对当前检出记录的符号引用 —— 也就是指向你正在其基础上进行工作的提交记录。

HEAD 总是指向当前分支上最近一次提交记录。大多数修改提交树的 Git 命令都是从改变 HEAD 的指向开始的。

HEAD 通常情况下是指向分支名的（如 bugFix）。在你提交时，改变了 bugFix 的状态，这一变化通过 HEAD 变得可见。

分离的 HEAD

分离的 HEAD 就是让其指向了某个具体的提交记录而不是分支名。在命令执行之前的状态如下所示：

HEAD -> main -> C1

HEAD 指向 main， main 指向 C1

相对引用

通过指定提交记录哈希值的方式在 Git 中移动不太方便。在实际应用时，并没有像本程序中这么漂亮的可视化提交树供你参考，所以你就不得不用 git log 来查查看提交记录的哈希值。

并且哈希值在真实的 Git 世界中也会更长（译者注：基于 SHA-1，共 40 位）。例如前一关的介绍中的提交记录的哈希值可能是 fed2da64c0efc5293610bdd892f82a58e8cbc5d8。舌头都快打结了吧...

比较令人欣慰的是，Git 对哈希的处理很智能。你只需要提供能够唯一标识提交记录的前几个字符即可。因此我可以仅输入fed2 而不是上面的一长串字符。

正如我前面所说，通过哈希值指定提交记录很不方便，所以 Git 引入了相对引用。这个就很厉害了!

使用相对引用的话，你就可以从一个易于记忆的地方（比如 bugFix 分支或 HEAD）开始计算。

相对引用非常给力，这里我介绍两个简单的用法：

• 使用 ^ 向上移动 1 个提交记录
• 使用 ~<num> 向上移动多个提交记录，如 ~3

首先看看操作符 (^)。把这个符号加在引用名称的后面，表示让 Git 寻找指定提交记录的父提交。

所以 main^ 相当于“main 的父节点”。

main^^ 是 main 的第二个父节点

现在咱们切换到 main 的父节点

“~”操作符

如果你想在提交树中向上移动很多步的话，敲那么多 ^ 貌似也挺烦人的，Git 当然也考虑到了这一点，于是又引入了操作符 ~。

该操作符后面可以跟一个数字（可选，不跟数字时与 ^ 相同，向上移动一次），指定向上移动多少次。咱们还是通过实际操作看一下吧

强制修改分支位置

你现在是相对引用的专家了，现在用它来做点实际事情。

我使用相对引用最多的就是移动分支。可以直接使用 -f 选项让分支指向另一个提交。例如:

git branch -f main HEAD~3

上面的命令会将 main 分支强制指向 HEAD 的第 3 级父提交。

这就对了! 相对引用为我们提供了一种简洁的引用提交记录 C1 的方式， 而 -f 则容许我们将分支强制移动到那个位置。

Git 相关概念：撤销变更

在 Git 里撤销变更的方法很多。和提交一样，撤销变更由底层部分（暂存区的独立文件或者片段）和上层部分（变更到底是通过哪种方式被撤销的）组成。我们这个应用主要关注的是后者。

主要有两种方法用来撤销变更 —— 一是 git reset，还有就是 git revert。接下来咱们逐个进行讲解。

Git Reset

git reset 通过把分支记录回退几个提交记录来实现撤销改动。你可以将这想象成“改写历史”。git reset 向上移动分支，原来指向的提交记录就跟从来没有提交过一样。

git reset HEAD~1 ←右侧执行的指令

Git 把 main 分支移回到 C1；现在我们的本地代码库根本就不知道有 C2 这个提交了。

Git Revert

为了撤销更改并分享给别人，我们需要使用 git revert。

git revert HEAD ← 右侧执行的指令

奇怪！在我们要撤销的提交记录后面居然多了一个新提交！这是因为新提交记录 C2' 引入了更改 —— 这些更改刚好是用来撤销 C2 这个提交的。也就是说 C2' 的状态与 C1 是相同的。

revert 之后就可以把你的更改推送到远程仓库与别人分享啦。

Git 相关概念：整理提交记录

到现在我们已经学习了 Git 的基础知识 —— 提交、分支以及在提交树上移动。 这些概念涵盖了 Git 90% 的功能，同样也足够满足开发者的日常需求

然而, 剩余的 10% 在处理复杂的工作流时(或者当你陷入困惑时）可能就显得尤为重要了。接下来要讨论的这个话题是“整理提交记录” —— 开发人员有时会说“我想要把这个提交放到这里, 那个提交放到刚才那个提交的后面”, 而接下来就讲的就是它的实现方式，非常清晰、灵活，还很生动。

看起来挺复杂, 其实是个很简单的概念。

Git Cherry-pick

本系列的第一个命令是 git cherry-pick, 命令形式为:

• git cherry-pick <提交号>...

如果你想将一些提交复制到当前所在的位置（HEAD）下面的话， Cherry-pick 是最直接的方式了。我个人非常喜欢 cherry-pick，因为它特别简单。

这里有一个仓库, 我们想将 side 分支上的工作复制到 main 分支，你立刻想到了之前学过的 rebase 了吧？但是咱们还是看看 cherry-pick 有什么本领吧。

这就是了！我们只需要提交记录 C2 和 C4，所以 Git 就将被它们抓过来放到当前分支下了。 就是这么简单!

交互式的 rebase

当你知道你所需要的提交记录（并且还知道这些提交记录的哈希值）时, 用 cherry-pick 再好不过了 —— 没有比这更简单的方式了。

但是如果你不清楚你想要的提交记录的哈希值呢? 幸好 Git 帮你想到了这一点, 我们可以利用交互式的 rebase —— 如果你想从一系列的提交记录中找到想要的记录, 这就是最好的方法了

交互式 rebase 指的是使用带参数 --interactive 的 rebase 命令, 简写为 -i

如果你在命令后增加了这个选项, Git 会打开一个 UI 界面并列出将要被复制到目标分支的备选提交记录，它还会显示每个提交记录的哈希值和提交说明，提交说明有助于你理解这个提交进行了哪些更改。

在实际使用时，所谓的 UI 窗口一般会在文本编辑器 —— 如 Vim —— 中打开一个文件。 考虑到课程的初衷，我弄了一个对话框来模拟这些操作。

当 rebase UI界面打开时, 你能做3件事:

• 调整提交记录的顺序（通过鼠标拖放来完成）
• 删除你不想要的提交（通过切换 pick 的状态来完成，关闭就意味着你不想要这个提交记录）
• 合并提交。 遗憾的是由于某种逻辑的原因，我们的课程不支持此功能，因此我不会详细介绍这个操作。简而言之，它允许你把多个提交记录合并成一个。

接下来咱们看个实例

Git 相关概念：一些小技巧

本地栈式提交

来看一个在开发中经常会遇到的情况：我正在解决某个特别棘手的 Bug，为了便于调试而在代码中添加了一些调试命令并向控制台打印了一些信息。

这些调试和打印语句都在它们各自的提交记录里。最后我终于找到了造成这个 Bug 的根本原因，解决掉以后觉得沾沾自喜！

最后就差把 bugFix 分支里的工作合并回 main 分支了。你可以选择通过 fast-forward 快速合并到 main 分支上，但这样的话 main 分支就会包含我这些调试语句了。你肯定不想这样，应该还有更好的方式……

实际我们只要让 Git 复制解决问题的那一个提交记录就可以了。跟之前我们在“整理提交记录”中学到的一样，我们可以使用

• git rebase -i
• git cherry-pick

来达到目的。

提交的技巧 #1

接下来这种情况也是很常见的：你之前在 newImage 分支上进行了一次提交，然后又基于它创建了 caption 分支，然后又提交了一次。

此时你想对某个以前的提交记录进行一些小小的调整。比如设计师想修改一下 newImage 中图片的分辨率，尽管那个提交记录并不是最新的了。

我们可以通过下面的方法来克服困难：

• 先用 git rebase -i 将提交重新排序，然后把我们想要修改的提交记录挪到最前
• 然后用 git commit --amend 来进行一些小修改
• 接着再用 git rebase -i 来将他们调回原来的顺序
• 最后我们把 main 移到修改的最前端（用你自己喜欢的方法），就大功告成啦！

当然完成这个任务的方法不止上面提到的一种（我知道你在看 cherry-pick 啦），之后我们会多点关注这些技巧啦，但现在暂时只专注上面这种方法。 最后有必要说明一下目标状态中的那几个' —— 我们把这个提交移动了两次，每移动一次会产生一个 '；而 C2 上多出来的那个是我们在使用了 amend 参数提交时产生的，所以最终结果就是这样了。

也就是说，我在对比结果的时候只会对比提交树的结构，对于 ' 的数量上的不同，并不纳入对比范围内。只要你的 main 分支结构与目标结构相同，我就算你通过。

提交的技巧 #2

如果你还没有完成“提交的技巧 #1”（前一关）的话，请先通过以后再来！

正如你在上一关所见到的，我们可以使用 rebase -i 对提交记录进行重新排序。只要把我们想要的提交记录挪到最前端，我们就可以很轻松的用 --amend 修改它，然后把它们重新排成我们想要的顺序。

但这样做就唯一的问题就是要进行两次排序，而这有可能造成由 rebase 而导致的冲突。下面还是看看 git cherry-pick 是怎么做的吧。

Git Tags

相信通过前面课程的学习你已经发现了：分支很容易被人为移动，并且当有新的提交时，它也会移动。分支很容易被改变，大部分分支还只是临时的，并且还一直在变。

你可能会问了：有没有什么可以永远指向某个提交记录的标识呢，比如软件发布新的大版本，或者是修正一些重要的 Bug 或是增加了某些新特性，有没有比分支更好的可以永远指向这些提交的方法呢？

当然有了！Git 的 tag 就是干这个用的啊，它们可以（在某种程度上 —— 因为标签可以被删除后重新在另外一个位置创建同名的标签）永久地将某个特定的提交命名为里程碑，然后就可以像分支一样引用了。

更难得的是，它们并不会随着新的提交而移动。你也不能切换到某个标签上面进行修改提交，它就像是提交树上的一个锚点，标识了某个特定的位置。

咱们来看看标签到底是什么样。

咱们先建立一个标签，指向提交记录 C1，表示这是我们 1.0 版本。

git tag v1 C1

很容易吧！我们将这个标签命名为 v1，并且明确地让它指向提交记录 C1，如果你不指定提交记录，Git 会用 HEAD 所指向的位置。

Git Describe

由于标签在代码库中起着“锚点”的作用，Git 还为此专门设计了一个命令用来描述离你最近的锚点（也就是标签），它就是 git describe！

Git Describe 能帮你在提交历史中移动了多次以后找到方向；当你用 git bisect（一个查找产生 Bug 的提交记录的指令）找到某个提交记录时，或者是当你坐在你那刚刚度假回来的同事的电脑前时， 可能会用到这个命令。

git describe 的语法是：

git describe <ref>

<ref> 可以是任何能被 Git 识别成提交记录的引用，如果你没有指定的话，Git 会以你目前所检出的位置（HEAD）。

它输出的结果是这样的：

<tag>_<numCommits>_g<hash>

tag 表示的是离 ref 最近的标签， numCommits 是表示这个 ref 与 tag 相差有多少个提交记录， hash 表示的是你所给定的 ref 所表示的提交记录哈希值的前几位。

当 ref 提交记录上有某个标签时，则只输出标签名称

多分支 rebase

哥们儿，我们准备了很多分支！咱们把这些分支 rebase 到 main 上吧。

但是你的领导给你提了点要求 —— 他们希望得到有序的提交历史，也就是我们最终的结果应该是 C6' 在 C7' 上面， C5' 在 C6' 上面，依此类推。

即使你搞砸了也没关系，用 reset 命令就可以重新开始了。记得看看我们提供的答案，看你能否使用更少的命令来完成任务！

选择父提交记录

操作符 ^ 与 ~ 符一样，后面也可以跟一个数字。

但是该操作符后面的数字与 ~ 后面的不同，并不是用来指定向上返回几代，而是指定合并提交记录的某个父提交。还记得前面提到过的一个合并提交有两个父提交吧，所以遇到这样的节点时该选择哪条路径就不是很清晰了。

Git 默认选择合并提交的“第一个”父提交，在操作符 ^ 后跟一个数字可以改变这一默认行为。

废话不多说，举个例子。

相关信息

整理了一些学习 CSS 时的笔记。

CSS 布局之 position 篇

position 属性

position 属性的值有：

• static：（默认值）根据正常文档流放置。
• relative：基于正常文档流的位置使用 top, right, bottom, left 属性进行偏移。
• absolute：将元素移出文档流，在包含块内使用 top, right, bottom, left 属性进行放置。
• fixed：将元素移出文档流，在整个视图区域内使用 top, right, bottom, left 属性进行放置。
• sticky：基于正常文档流的位置放置，并且在滚动屏幕时能粘在画面内，使用 top, right, bottom, left 属性进行偏移。

指定位置

top, right, bottom, left 属性用于指定元素的最终位置。

• top: 元素上边界距离包含块的相对距离。
• right: 元素右边界距离包含块的相对距离。
• bottom: 元素下边界距离包含块的相对距离。
• left: 元素左边界距离包含块的相对距离。

CSS 布局之 Flexbox 篇（基础）

介绍

Flexbox 是Flexible Box Module. 一种布局模型，可以轻松控制 html 元素 之间的空间分布和对齐方式。

Flexbox 控制一次仅在一维（行或列）中的定位。对于二维控件，CSS Grid Layout 应运而生。

给定以下模板：

<body>
  <div class="container">
    <div class="box box-1">1</div>
    <div class="box box-2">2</div>
    <div class="box box-3">3</div>
    <div class="box box-4">4</div>
    <div class="box box-5">5</div>
    <div class="box box-6">6</div>
    <div class="box box-7">7</div>
    <div class="box box-8">8</div>
    <div class="box box-9">9</div>
    <div class="box box-10">10</div>
  </div>
</body>

上述 div 的默认行为，尊重正常的 html 文档流，是从上到下、从左到右呈现并占据整个正文宽度，因为它的display属性默认为block.

弹性item

当display: flex应用于.container div 时，所有直接子 div 变为flex-items，并获得新的行为：

• 它们将显示在一行中，因为 flex-direction 默认为 row
• 它们将从左到右显示
• 项目不会拉伸以适应整个宽度（主轴），但它们会收缩以做到这一点。
• 项目拉伸以适应交叉轴（本例中的高度）。
• 如果物品有不同的高度，它们将伸展到最高的一个高度
• flex-basis默认为auto（项目宽度将由其内容设置）
• flex-wrap默认为nowrap（如果容器的宽度不足以容纳物品，它们不会包装，而是会溢出）

弹性容器

• display: flex使容器扩展可用的整个宽度。与flex相反display: inline-flex，它使容器折叠到内容的宽度。

flex-direction

一旦声明为 flex 容器，该元素就可以被认为是两个轴。主轴，由flex-direction属性定义。和交叉轴，它垂直于第一个。

该属性有四个值flex-direction：row、 column、row-reverse、 columncolumn-reverse

默认值为row，它设置主轴水平，从左到右，横轴垂直截取它，从上到下。类似地，该column值设置垂直轴，从上到下，交叉轴从左到右。两个选项的reverse属性都将主轴反转 180°。交叉轴保持不变。

这些值的弹性项目行为可以在下面观察到：

flex-wrap

flex-wrap是当容器中的空间不足以容纳所有弹性项目时处理弹性项目的属性。

默认情况下flex-wrap设置为nowrap，这意味着如果容器不能以原始宽度容纳一行中的项目，它们将缩小以适应。如果由于某种原因它们无法收缩，那么它们会溢出容器。

通过为项目设置 300px 宽度，该nowrap选项会输出以下结果：

其中，每个项目都缩小到大约 70px 以适应容器。

当属性更新为 时wrap，项目的宽度现在实际上将具有其原始值 300 像素。当第一行的宽度不足以容纳 300 像素时，该项目不会溢出容器，而是换行到新行。每一行都应该被认为是一个单独的弹性容器。一个容器中的空间分布不会影响相邻的其他容器。

另一种选择是wrap-reverse，它反转交叉轴。flex-direction由属性从上到下设置，wrap-reverse将其转换为从下到上。

弹性流

flex-direction并且flex-wrap可以在单个属性中声明：flex-flow: [direction] [wrap]

对齐

在 Flexbox 中，项目沿轴的对齐和空间分布可以通过四个属性来控制 ：

• justify-content：对齐主轴上的所有项目
• align-items：对齐交叉轴上的所有项目
• align-self：在交叉轴上对齐单个项目
• align-content: 控制交叉轴上弯曲线之间的空间

弹性盒尺寸

项目的大小和灵活性可以通过三个属性来控制flex-grow、flex-shrink和flex-basis。这三个都作用于主轴。

• flex-grow: 如果有多余的空间，每个项目应该如何放大
• flex-shrink: 如果没有足够的空间，每个项目应该如何减少
• flex-basis: 在设置上面两个属性之前，项目应该是什么大小

flex-grow 弹性成长

此属性的flex grow factor设置是处理项目大小相对于彼此的比率。

默认值为 0，表示如果有可用空间，则将其放在最后一项之后。

在上面的示例中，direction设置为row，并且每个弹性项目width都设置为60px。由于容器很980px宽，因此有680px可用空间。该空间称为positive free space。

通过设置flex-grow为1，正的可用空间量在弹性项目之间平均分配。每个项目的宽度将增加136px，总计196px。

通过flex-grow: 2应用于第三个项目，它获得的可用正可用空间量是286px其余项目的两倍，173px。

下图显示了flex-grow属性设置为其内容值的项目。

flex-shrink 弹性收缩

flex-shrink处理项目大小，当没有足够的可用空间将它们全部放入容器中时。因此，它negative free space通过缩小项目来划分项目。

下一张图片显示了980px装有五个300px宽物品的容器。由于没有空间容纳1500px所需，默认flex shrink factor值1使每个项目均匀收缩到196px。

通过flex-shrink: 2为第三项设置比率，它会比其他项小两倍。

本节中的最后一张图片显示了将其内容值保存为 flex 收缩率的每个项目。

flex-basis 弹性基础

flex-basis是在实际设置可用空间之前检查每个项目应具有的大小的属性。默认值为auto，并且项目宽度由width属性显式设置，或者采用内容宽度。它还接受像素值。

下面的 gif 显示了一个800px宽容器和五个设置为flex-basis: 160px. 这告诉浏览器：理想情况下，有足够的空间来放置所有项目，尊重它们的160px宽度，并且没有正/负的可用空间。如果没有足够的空间，由于flex-shrink默认为1，所有项目都被均匀收缩。如果有多余的空间，则flex-grow默认为0，并且空白空间位于最后一项之后。

下一个 gif 显示项目 1 设置为flex-shrink: 10，项目 4 设置为flex-grow: 10。对于负的可用空间，项目 1 的宽度减少了 10 倍。对于正的可用空间，项目 4 的宽度是其他项目的 10 倍。

flex-basis也接受 value content，无论width是否设置，计算可用空间的宽度都是项目的内容。如果您不想考虑该计算的项目宽度，请将基础设置为0。

flex 弹性

flex 是 flex-grow, flex-shrink, flex-basis 的简写.

它接受以下预定义值：

• initial: 重置为 flexbox 默认值，与 flex: 0 1 auto 相同
• auto: flex-items 可以根据需要增长/缩小，与 flex: 1 1 auto 相同
• none: 使项目不灵活，与 flex: 0 0 auto 相同
• flex: 1: flex-items 具有增长/收缩的能力并且flex-basis设置为零，与 flex: 1 1 0 相同

CSS 布局之 Flexbox 篇（扩展）

几个例子

例子：居中对齐

.CenterMe {
	background-color: indigo;
	color: #ebebeb;
	font-size: 2rem;
	height: 200px;
	display: flex;
	align-items: center; /* 沿着交叉轴对齐 */
	justify-content: center; /* 沿着主轴对齐 */
}

<div class="CenterMe">Hello, I'm centered with Flexbox!</div>

例子：偏移

.LastItem,
.ListItem {
  color: #ebebeb;
  text-decoration: none;
}

.ListItem {
  margin-right: 1rem;
}

.LastItem {
  margin-left: auto; /* 用上该侧所有可用的外边距 */
}

<div class="MenuWrap">
  <a href="#" class="ListItem">Home</a>
  <a href="#" class="ListItem">About Us</a>
  <a href="#" class="ListItem">Products</a>
  <a href="#" class="ListItem">Policy</a>
  <a href="#" class="LastItem">Contact Us</a>
</div>

例子：反序

让所有项反序排列

flex-direction: row-reverse

flexbox的对齐

关于Flexbox的对齐，最重要的是理解坐标轴。有两个轴，“主轴”和“交叉轴”。这两个轴代表什么取决于Flexbox排列的方向。比如，如果将Flexbox的方向设置为row，则主轴就是横轴， 而交叉轴就是纵轴。

反之，如果Flexbox的方向是column，则主轴就是纵轴，而交叉轴为横轴。

沿着交叉轴对齐

设置的属性：

• align-items：设置容器内所有item沿交叉轴对齐的方式（对容器内元素）
• align-self：针对内部元素，设置特定的沿交叉轴对齐的方式（对自己）

对齐的方式：

• flex-start: 把元素的对齐设置为flex-start，可以让元素从Flexbox父元素的起始边 开始。
• flex-end: 把元素的对齐设置为flex-end，会沿Flexbox父元素的末尾对齐该元素。
• center: 把元素放在Flexbox元素的中间。
• baseline: 让Flexbox元素中的所有项沿基线对齐。
• stretch: 让Flexbox中的所有项(没交叉轴)拉伸至与父元素一样大

沿着主轴对齐

设置的属性：

• justify-content：设置容器内所有item沿主轴的对齐方式

对齐的方式：

• flex-start
• flex-end
• center
• space-between：设置如何处理空白，将空白分配到元素之间
• space-around：设置如何处理空白，将空白分配到元素两边

<div class="FlexWrapper">
	<div class="FlexInner">I am content in the inner Flexbox 1.</div>
	<div class="FlexInner">I am content in the inner Flexbox 2.</div>
	<div class="FlexInner">I am content in the inner Flexbox 3.</div>
</div>
/* 再看以下CSS。我们把每个内部元素(FlexInner)的宽度都设置为25%，包含它们的容器
Flexbox(FlexWrapper)的宽度为100% */
.FlexWrapper {
	background-color: indigo;
	display: flex;
	justify-content: space-between;
	height: 200px;
	width: 100%;
}
.FlexInner {
  background-color: #34005B;
  display: flex;
  height: 100px;
  width: 25%;
}

flex属性

前面已经给伸缩项(flex-item)定义过宽度了。除了width，还可以通过flex属性来定义宽 度，或者叫“伸缩性”(flexiness)。再看另一个例子，同样的标记，但CSS有所不同:

.FlexInner {
  border: 1px solid #ebebeb;
  background-color: #34005B;
  display: flex;
  height: 100px;
	flex: 1;
}

这里的flex实际上是三个属性合体的简写:flex-grow、flex-shrink和flex-basis。 关于这三个属性的详细介绍，可以参考规范原文。不过， 规范还是建议大家使用flex这个简写属性，也就是我们这里用的这个，明白吗?

flex: 1       1     100px
      伸展    收缩    基准

对于伸缩项，如果flex属性存在(且浏览器支持)，则使用它的值控制元素的大小，忽略宽度和高度值的设置，即使它们的声明位于flex声明之后，也会被忽略。下面分别看看这三个 属性。

• flex-grow(传给flex的第一个值)是相对于其他伸缩项，当前伸缩项在空间允许的情况下可以伸展的量。
• flex-shrink是在空间不够的情况下，当前伸缩项相对于其他伸缩项可以收缩的量。
• flex-basis(传给flex的最后一个值)是伸缩项伸缩的基准值。

虽然只写flex: 1也没问题，但还是建议大家把三个值写全。这样才能更清楚地表明你想干什么。比如flex: 1 2 auto的意思是在有空间的情况下可以伸展1部分，在空间不足时可以收缩1部分，而基准大小是内容的固有宽度(即不伸缩的情况下内容的大小)。 再试一个:flex: 0 0 50px的意思是，这个伸缩项既不伸也不缩，基准为50像素(即无论是否存在自由空间，都是50像素)。那么flex: 2 0 50%呢?意思就是会多占用两个可用空间， 不收缩，基准为50%。但愿这几个例子能帮大家理解flex属性。

CSS 布局之 Grid 篇

一个网格通常具有许多的列（column）与行（row），以及行与行、列与列之间的间隙，这个间隙一般被称为沟槽（gutter）。

定义网格

在一个父容器中使用：display: grid; ，将这个容器改为网格布局。

• 初始状态：只有一列的网格，你的子项还是会像正常布局流那样从上往下排布。

.container {
    display: grid;
    grid-template-columns: 200px 200px 200px;
}

使用 grid-template-columns 来定义多个列，每个参数代表一个列的宽度。可以使用 fr 这个单位来灵活定义网格的行与列的大小。这个单位表示了可用空间的一个比例。

grid-template-columns: 1fr 1fr 1fr;          /* 三个列，每个列宽度相等 */
grid-template-columns: 400px 1fr 1fr;        /* 三个列，后面两个列的宽度为：(总宽度-400px)/2 */
grid-template-columns: repeat(3, 1fr);       /* 三个列，可以使用repeat函数来重复定义 */
grid-template-columns: repeat(2, 1fr, 2fr);  /* 1fr 2fr 1fr 2fr */
grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); /* auto-fill 表示填满屏幕，minmax限制大小 */

网格间隙

gap: 20px;  /* 标准 */
grid-gap: 20px;  /* 旧 */
grid-row-gap: 20px;  /* 行间距 */
grid-column-gap: 20px;  /* 列间距 */

显式网格与隐式网格

使用 grid-template-columns 与 grid-template-rows 定义的网络称为显式网格，而多余的内容则会继续往下填充到新的行的格子内，这些格子被称为隐式网格。

隐式网格的默认行/列大小是参数auto ，大小会根据放入的内容自动调整。也可以使用 [grid-auto-rows](https://developer.mozilla.org/zh-CN/docs/Web/CSS/grid-auto-rows)和[grid-auto-columns](https://developer.mozilla.org/zh-CN/docs/Web/CSS/grid-auto-columns)属性手动设定隐式网格的大小。

.container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-auto-rows: 100px;
  grid-gap: 20px;
}

元素放置

基于线的元素放置

定义完网格之后，每行每列的边界（网格线的边缘）都有一个索引，可以使用这些线来定位放置元素。

grid-column-start: 1  /* 列的开始边界 */
grid-column-end: 3  /* 列的结束边界，因此 1 / 3 表示 1、2列 */
grid-row-start: 2
grid-row-end: 3
/* 或者 */
grid-column: 1 / 3
grid-row: 2

使用 grid-template-areas 属性放置元素

另一种往网格放元素的方式是用[grid-template-areas](https://developer.mozilla.org/zh-CN/docs/Web/CSS/grid-template-areas)属性，并且你要命名一些元素并在属性中使用这些名字作为一个区域。

将之前基于线的元素放置代码删除（或者重新下载一份新的文件），然后加入以下 CSS 规则：

.container {
  display: grid;
  grid-template-areas:
      "header header"
      "sidebar content"
      "footer footer";
  grid-template-columns: 1fr 3fr;
  grid-gap: 20px;
}

header {
  grid-area: header;
}

article {
  grid-area: content;
}

aside {
  grid-area: sidebar;
}

footer {
  grid-area: footer;
}

grid-template-areas属性的使用规则如下：

• 你需要填满网格的每个格子
• 对于某个横跨多个格子的元素，重复写上那个元素grid-area属性定义的区域名字
• 所有名字只能出现在一个连续的区域，不能在不同的位置出现
• 一个连续的区域必须是一个矩形
• 使用.符号，让一个格子留空

你可以在文件中尽情发挥你的想象来测试各种网格排版，比如把页脚放在内容之下，或者把侧边栏一直延伸到最底。这种直观的元素放置方式很棒，你在 CSS 中看到的就是实际会出现的排版效果。

CSS 选择器

提示

Vue (读音 /vjuː/，类似于  view) 是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。另一方面，当与现代化的工具链以及各种支持类库结合使用时，Vue 也完全能够为复杂的单页应用提供驱动。

相关学习资源

• Vue2 文档

• Vue3 文档

vue 简介

官方给 vue 的定位是前端框架，因为它提供了构建用户界面的一整套解决方案（俗称 vue 全家桶）

• vue（核心库）
• vue-router（路由方案）
• vuex（状态管理方案）
• vue 组件库（快速搭建页面 UI 效果的方案）

以及辅助 vue 项目开发的一系列工具：

• vue-cli（npm 全局包：一键生成工程化的 vue 项目 - 基于 webpack，大而全）
• vite（npm 全局包：一键生成工程化的 vue 项目 - 小而巧）
• vue-devtools（浏览器插件：辅助调试的工具）
• vetur（vscode 插件：提供语法高亮和智能提示）

vue 的特性

• 数据驱动视图：
  • 在使用了 vue 的页面中，vue 会监听数据的变化，从而自动重新渲染页面的结构。
  • 好处：当页面数据发生变化时，页面会自动重新渲染。
  • 注：这是单向的数据绑定
• 双向数据绑定
  • 在填写表单时，双向数据绑定可以辅助开发者在不操作 DOM 的前提下，自动把用户填写的内容同步到数据源中。

MVVM

MVVM 是 vue 实现数据驱动视图和双向数据绑定的核心原理。它把每个 HTML 页面都拆分成了三个部分：

• View：当前页面所渲染的 DOM 结构
• Model：当前页面渲染时所依赖的数据源
• ViewModel：表示 vue 的实例，它是 MVVM 的核心，连接 View 与 Model

vue 的版本

• 2.x 版本是目前企业级项目开发中的主流版本
• 3.x 版本于 2020-09-19 发布，是未来企业级项目开发的趋势

2.x 与 3.x 的对比

• 2.x 的绝大多数 API 在 3.x 中同样支持。
• 3.x 新增：组合式 API、多根节点组件、更好的 TypeScript 支持等
• 3.x 废弃：过滤器、不再支持$on，$off 和$once 实例方法等

vue 基础

渐进式 JavaScript 框架

第一个 Vue 程序

1. 导入开发版本的 Vue.js
2. 创建 Vue 实例对象，设置 el 属性和 data 属性
3. 使用简洁的模板语法把数据渲染到页面上

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>基础</title>
  </head>
  <body>
    <div id="app">
      <h1>{{ message }}</h1>
    </div>
    <script src="https://unpkg.com/vue@next"></script>
    <script>
      var vm = new Vue({
        el: "#app",
        data: {
          message: "Hello Vue!",
        },
      });
    </script>
  </body>
</html>

el：挂载点

• Vue 实例的作用范围？
  • 作用在 el 作用的元素内部（包括任意层次的子标签）
• 其值可以使用其他选择器吗？
  • 可以，css 选择器都可以，但建议使用 ID 选择器
• 是否可以设置其他的 dom 元素
  • 可以，但建议使用 div 标签，因为没有其他样式

data：数据对象

• Vue 中用到的数据定义在 data 中
• data 中可以写复杂类型的数据
• 渲染复杂类型的数据时，遵守 js 的语法即可

vue 指令

v-text

设置标签的文本值（textContent）

<div id="app">
  <h1>她说：{{ message }}</h1>
  <h1>她说：{{ message+'???' }}</h1>
  <h1 v-text="message"></h1>
  <h1 v-text="message+'???'"></h1>
</div>

将标签中的文本，都使用 data 的指定属性替换。

可以在 v-text 中拼接字符串。

v-html

设置标签的 innerHTML

与 v-text 类似，不过如果设置的文本为 html 内容会进行解析。

v-on 基础

为元素绑定事件

语法：v-on:事件名="方法名" 或者 @事件名="方法名"

• 方法定义在 Vue 对象的 methods 属性中。
• 方法内部通过 this 关键字可以访问定义在 data 中的数据
• 如果是直接将方法写在属性的位置，则不需要 this.xxx

<div id="app">
  <input type="button" value="事件绑定" v-on:click="method1" />
  <input type="button" value="事件绑定" @click="method1" />
  <input type="button" value="事件绑定" v-on:monseenter="method2" />
  <input type="button" value="事件绑定" @dblclick="message='点击啦'" />
</div>

var app = new Vue({
  el: "#app",
  data: {
    message: "hello",
  },
  methods: {
    method1: function () {
      this.message = "你好吗";
    },
    method2: function () {},
  },
});

v-show

根据表达值的真假，切换元素的显示和隐藏

<div id="app">
  <p v-show="true">hhh</p>
  <p v-show="isShow">hhh</p>
  <p v-show="age>=18">hhh</p>
</div>

var app = new Vue({
  el: "#app",
  data: {
    isShow: false,
    age: 16,
  },
});

v-if

根据表达值的真假，切换元素的显示和隐藏（操纵 dom 元素）

与 v-show 类似，但操纵的是 dom 元素（在 dom 中添加或删除该标签）

v-else

与 v-if 配合，切换元素的显示和隐藏

v-else-if

与 v-if 配合，切换元素的显示和隐藏

<div v-if="type === 'A'">
  A
</div>
<div v-else-if="type === 'B'">
  B
</div>
<div v-else-if="type === 'C'">
  C
</div>
<div v-else>
  Not A/B/C
</div>

v-bind

设置元素的属性（比如：src, title, class）

语法：v-bind:属性名=表达式 或 :属性名=表达式

<div id="app">
  <img v-bind:src="imgSrc" />
  <img v-bind:title="imgtitle+'!!!'" />
  <img :class="isActive?'active':''" />
  <img :class="{active:isActive}" />
  <!-- 对象的写法：active 是否生效，取决于 isActive 的值 -->
</div>

v-for

根据数据生成列表结构

<div id="app">
  <ul>
    <li v-for="item in arr" :title="item">{{ item }}</li>
    <li v-for="(item, index) in arr">{{ index }}{{ item }}</li>
  </ul>
</div>

var app = new Vue({
  el: "#app",
  data: {
    arr: [1, 2, 3, 4, 5],
  },
});

<ul>
  <li v-for="user in userlist" :key="user.id">
    <input type="checkbox" />
    姓名：{{user.name}}
  </li>
</ul>

v-on 补充

传递自定义参数，事件修饰符

<div id="app">
  <input type="button" @click="method1(p1,p2)" />
  <input type="text" @keyup.enter="sayHi" />
</div>

var app = new Vue({
  el: "#app",
  methods: {
    method1: function (p1, p2) {},
    sayHi: function () {},
  },
});

解释

• 可以在 v-on 的属性中传入函数的参数
• 对于事件，可以使用修饰符

修饰符（文档：https://v2.cn.vuejs.org/v2/api/#v-on）

• .stop - 调用  event.stopPropagation()。（阻止冒泡行为（内到外））
• .prevent - 调用  event.preventDefault()。（例如：阻止超链接的跳转）
• .capture - 添加事件侦听器时使用 capture 模式。（定义在外层组件上，以捕获的形式来触发事件（外到内））
• .self - 只当事件是从侦听器绑定的元素本身触发时才触发回调。（只有点他自己才会触发，而不受冒泡影响）
• .{keyCode | keyAlias} - 只当事件是从特定键触发时才触发回调。
• .native - 监听组件根元素的原生事件。
• .once - 只触发一次回调。
• .left - (2.2.0) 只当点击鼠标左键时触发。
• .right - (2.2.0) 只当点击鼠标右键时触发。
• .middle - (2.2.0) 只当点击鼠标中键时触发。
• .passive - (2.3.0) 以  { passive: true }  模式添加侦听器

事件对象 event

在原生的 DOM 事件绑定中，可以在事件处理函数处，接收事件对象 event。同理，在 v-on 指令所绑定的事件处理函数中，同样可以接收到事件对象 event：

<button @click="addCount">+1</button>
// ----------------------------------------------------
methods: {
  addCount(e) { // e 为事件对象
    const color = e.target.style.backgroundColor
    e.target.style.backgroundColor = color === 'red' ? '' : 'red'
    this.count += 1
  }
}

当传递参数时，event 对象将被覆盖掉，此时我们可以传递一个特殊的参数 $event 来表示原生的事件参数对象：

<button @click="addCount(step, $event)">+1</button>
// ----------------------------------------------------
methods: {
  addCount(step, e) { // e 为事件对象
    console.log(step)
    const color = e.target.style.backgroundColor
    e.target.style.backgroundColor = color === 'red' ? '' : 'red'
    this.count += 1
  }
}

v-model

获取和设置表单元素的值（双向数据绑定）

• 绑定的是 input 的 value 属性
• 之后无论是在表单中直接修改元素，还是在 js 中修改绑定的变量，都会使得两边的值都被改变

<div id="app">
  <input type="text" v-model="message" />
  <p>{{ message }}</p>
</div>

var app = new Vue({
  el: "#app",
  data: {
    message: "lalala",
  },
});

vue 过滤器（vue2.x 内容）

过滤器（Filters）常用于文本的格式化。例如：hello → Hello

过滤器应该被添加在 JavaScript 表达式的尾部，由“管道符”进行调用，示例代码如下：

<p>{{ message | capitalize }}</p>

<div v-bind:id="rawId | formatId"></div>

过滤器可以用在两个地方：

• 插值表达式（{{}}）
• 和 v-bind 属性绑定（:xxx）

在创建 vue 实例期间，可以在 filters 节点中定义过滤器，示例代码：

const vm = new Vue({
  el: "#app",
  data: {
    message: "hello vue.js",
    info: "title info",
  },
  filters: {
    capitalize(str) {
      return str.charAt(0).toUpperCase() + str.slice(1);
    },
  },
});

连续调用多个过滤器

<p>{{ text | capitalize | maxLength }}</p>

过滤器传参

<p>{{ message | filterA(arg1, arg2) }}</p>

Vue.filter('filterA', (msg, arg1, arg2) => {...})  // msg永远是第一个参数

版本兼容性

3.x 版本中取消掉了过滤器的特性，官方建议使用或方法代替之。

vue 组件基础

如何创建 vite 项目：

组件化开发思想

vue 是一个完全支持组件化开发的框架。vue 中规定组件的后缀名是 .vue。

vue 组件的构成

每个.vue 组件都由 3 部分构成，分别是：

• template → 组件的模板结构（必需）
• script → 组件的 JavaScript 行为（可选）
• style → 组件的样式（可选）

组件的 template 节点

在组件 <template> 节点中，支持使用 vue 指令，来辅助渲染当前组件的 DOM 结构。

组件的 script 节点

vue 规定：组件内 <script> 节点是可选的，开发者可以在 <script> 节点中封装组件的 JavaScript 业务逻辑。 <script> 节点的基本结构如下：

<script>
// 今后，组件相关的 data 数据、methods 方法等，
// 都需要定义到 export default 所导出的对象中。
export default {
    name: 'MyApp', // name属性表示组件名称（建议首字母大写）
    data() {  // 组件中 data 需要指向一个函数，而不是一个对象！！
        return {
            username: 'lzt',
            count: 0,
        }
    },
    methods: {
        addCount() {
            this.count++;
        },
    },
}
</script>

组件中的 style 节点

vue 规定：组件内的 <style> 节点是可选的，开发者可以在 <style> 节点中编写样式美化当前组件的 UI 结构。 <style> 节点的基本结构如下：

<style lang="css">
h1 {
    font-weight: normal;
}
</style>

组件的注册

组件之间可以进行相互的引用，例如：

vue 中组件的引用原则：先注册后使用。

组件注册的两种方式

vue 中注册组件的方式分为“全局注册”和“局部注册”两种，其中：

• 全局注册：可以在全局任何一个组件内使用
• 局部注册：只能在当前注册的范围内使用

全局注册组件

// main.js
import { createApp } from "vue";
import App from "./App.vue";

// 1. 导入需要被全局注册的组件
import Swiper from "./components/01.globalReg/Swiper.vue";
import Test from "./components/01.globalReg/Test.vue";

const app = createApp(App);

// 2. 调用 app.compenent() 方法全局注册组件
app.compenent("my-swiper", Swiper);
app.compenent("my-test", Test);

app.mount("#app");

// App.vue
// 3. 在页面中使用上面定义的标签名
<template>
  <my-swiper></my-swiper>
  <my-test></my-test>
</template>

局部注册组件

<template>
    <my-search></my-search>
</template>

<script>
import MySearch from './compenents/MySearch.vue'
export default {
    compenents: {  // 通过 compenents 节点，为当前的组件注册私有子组件
        'my-search': MySearch,
        MySearch, // 也可以直接这样，这是使用大驼峰法命名
    },
}
</script>

组件注册时的命名

• 使用 kebab-case 命名法（短横线命名法，如 my-swiper ）
  • 必须严格按照短横线名称进行使用
• 使用 PascalCase 命名法（帕斯卡命名法或大驼峰法，如 MySwiper）
  • 既可以严格按照帕斯卡名称使用，也可以转换成短横线名称使用

可以直接使用组件的.name 属性

// main.js
app.compenent(Swiper.name, Swiper); // Swiper.name === 'MySwiper'
app.compenent(Test.name, Test); // Test.name === 'MyTest'

组件之间样式冲突问题

使用自定义属性解决样式冲突

为每个组件分配唯一的自定义属性，在编写组件样式时，通过属性选择器来控制样式的作用域：

<template>
    <div class="container" data-v-001>
        <h3 data-v-001>轮播图组件</h3>
    </div>
</template>

<style>
  /* 通过中括号“属性选择器”，来防止组件之间的样式冲突问题 */
    .container[data-v-001] {
        border: 1px solid red;
    }
</style>

使用 scoped 属性解决样式冲突

手动分配自定义属性非常难以维护，可以使用 style 节点的 scoped 属性，vue 将自动分配自定义属性：

<template>
    <div class="container">
        <h3>轮播图组件</h3>
    </div>
</template>

<style **scoped**>
    .container {
        border: 1px solid red;
    }
</style>

/deep/ 样式穿透

如果给当前组件的 style 节点添加了 scoped 属性，则当前组件的样式对其子组件是不生效的。如果想让某些样式对子组件生效，可以使用 /deep/ 深度选择器。

<style lang="less scoped>
.title {
    color: blue; /* 不加 /deep/ 时，生成 .title[data-v-xxx] */
}

/deep/ .title {
    color: blue; /* 加上 /deep/ 时，生成 [data-v-xxx] .title */
}

:deep(.title) {
    color: blue; /* 这是3.x的推荐写法，生成 [data-v-xxx] .title */
}
</style>

组件的 props

为了提高组件的复用性，在封装 vue 组件时需要遵守如下的规则：

• 组件的DOM 结构、style 样式要尽量复用
• 组件中要展示的数据，尽量由组件的使用者提供

例子：

<my-article title="面朝大海，春暖花开" author="海子"></my-article>

props 的作用：父组件通过 props向子组件传递要展示的数据。

props 的好处：提高了组件的复用性。

在组件中声明 props

在封装 vue 组件时，可以把动态的数据项声明为 props 自定义属性。自定义属性可以在当前组件的模板结构中被直接使用。

<template>
    <h3>标题：{{title}}</h3>
    <h5>作者：{{author}}</h5>
</template>

<script>
export default {
    props: ['title', 'author'], // 父组件传递给my-article组件的数据，必须在props节点中声明
}
</script>

动态绑定 props 的值

可以使用 v-bind 属性绑定的形式，为组件动态绑定 props 的值。

<my-article :title="info.title" author="info.author"></my-article>

props 的大小写命名

组件中如果使用“camelCase（驼峰命名法）”声明了 props 属性的名称，则有两种方式为其绑定属性的值：

<script>
export default {
    props: ['**pubTime**'],
}
</script>

<my-article pubTime="1989"></my-article>
<my-article pub-time="1989"></my-article>

props 验证

在分装组件时对外界传递过来的 props 数据进行合法性的校验，从而防止数据不合法的问题。使用对象类型的 props 节点，可以对每个 prop 进行数据类型的校验：

<script>
export default {
    props: {  // 使用对象类型的 props 而不是数组类型，若不按类型传递会在浏览器中警告
        p1: Number,
        p2: Boolean,
        p3: String,
        p4: Array,
        p5: Object,
        p6: Date,
        p7: Funciton,
        p8: Symbol,  // 共8种基础类型

        pA: [String, Number],  // 可以使用数组来指定多个可能的类型

        pB: { // 使用配置对象形式
            type: String,
            required: true // 当前属性为必填项
        },

        pC: {
            type: String,
            default: "lzt" // 当前属性的默认值
        },

        pD: {
            validator(value) {  // 自定义的验证函数，返回true代表合法
                return ['A', 'B', 'C'].indexOf(value) !== -1
            }
        }
    }
}
</script>

Class 与 Style 绑定

以三元表达式绑定 HTML 的 class

可以使用三元表达式，动态地为元素绑定 class 的类名。

<h3 class="thin" :class="isItalic ? 'italic' : ''">halo</h3>

以数组语法绑定 HTML 的 clas

如果元素需要动态绑定多个 class 的类名，此时可以使用数组的语法格式。

<h3 class="thin" :class="[isItalic ? 'italic' : '', isDelete ? 'delete' : '']">halo</h3>

以对象语法绑定 HTML 的 class

推荐使用此方法绑定 class。

<h3 class="thin" :class="{italic:isItalic}">halo</h3>
<p :class="classObj">how are you</p>

data() {
    return {
        isItalic: true,
        classObj: { // 对象中，属性名是class名，值是布尔值
            italic: true,  // true代表应用这个类名
            delete: false,  // false代表不应用这个类名
        }
    }
}

以对象语法绑定内联的 style

:style 的对象语法十分直观——看着非常像 CSS，但其实是一个 JavaScript 对象。CSS property 名可以用驼峰式或短横线分隔（需要加引号）来命名：

<div :style="{color: active, fontSize: fsize + 'px', 'background-color': bgcolor}">
    lalala
</div>

data() {
    return {
        active: 'red',
        fsize: 30,
        bgcolor: 'pink',
    }
}

计算属性

<input type="text" v-model.number="count" />
<p>{{count}} 乘以 2 的值为：{{plus}}</p>

data() {
    return { count: 1 }
},
computed: {
    plus() {
        return this.count * 2
    },
}

• 调用时不需要加()，当作普通属性使用。
• 计算属性会缓存结果，只用依赖发生变化时才重新计算，因此性能比方法好。
• 使用场景：购物车金额等

computed: {
    total() {
        let t = 0
        this.fruitlist.forEach(x => {
            if (x.state) {
                t += x.count
            }
        })
        return t
    },
    amount() {
        let a = 0
        this.fruitlist.filter(x => x.state).forEach(x => {
            a += x.price * x.count
        })
        return a
    },
    isDisabled() {
        return this.total == 0
    }
}

自定义事件（子传父）

自定义事件的使用

在封装组件时：

1. 声明自定义事件：定义自定义组件时，在 emits 节点中声明。
2. 触发自定义事件：

在使用组件时：

1. 监听自定义事件

// 组件定义
<template>
    <button>press me</button>
</template>

<script>
export default {
    emits: ['change'],  // 1. 声明自定义事件
    methods: {
        onBtnClick() {
            this.$emit('change') // 2. 手动触发自定义事件，参数为自定义事件名称
        },
    },
}
</script>

// 使用组件
// 3. 使用v-on监听事件
<my-counter @change="getCount"></my-counter>

methods: {
    getCount() {
        console.log('count changed!')
    },
}

自定义事件传参

在调用 this.$emit() 方法触发自定义事件时，可以通过第 2 个参数为自定义事件传参。

// 组件定义
<template>
    <button>press me</button>
</template>

<script>
export default {
    emits: ['change'],
    methods: {
        onBtnClick() {
            this.$emit('change', this.count) // 可以使用**第2个**参数来向外传递信息
        },
    },
}
</script>

// 使用组件
<my-counter @change="getCount"></my-counter>

methods: {
    getCount(val) { // 这里可以得到传递的信息
        console.log('count changed', val)
    },
}

组件上的 v-model

v-model 是双向数据绑定指令，当需要维护组件内外数据的同步时，可以在组件上使用 v-model 指令。

• 外界数据的变化会自动同步到 counter 组件中
• counter 组件中数据的变化，也会自动同步到外界。

在组件上使用 v-model 的步骤

<template>
  <div>
    <h1>父组件 --- count:{{ count }}</h1>
    <button @click="count += 1">+1</button>
    <hr />
    <MyCounter **v-model**:number="count"></MyCounter>
  </div>
</template>
<script>
import MyCounter from "./MyCounter.vue";
export default {
  name: "Father",
  data() {
    return {
      count: 0,
    };
  },
  components: { MyCounter },
};
</script>

<template>
  <div>
    <p>count值是：{{ number }}</p>
    <button @click="handleClick">-1</button>  // 注意子组件中并没有v-model
  </div>
</template>
<script>
export default {
  name: "MyCounter",
  props: ["number"],
  emits: ["**update:**number"],
  methods: {
    handleClick() {
      this.$emit("update:number", this.number - 1);  // 可以通过 this.number 访问到 props 中的值
    },
  },
};
</script>

vue 组件高级

watch 侦听器

开发者需要在 watch 节点下，定义自己的侦听器。实例代码如下：

export default {
  data() {
    return { username: "" };
  },
  watch: {
    // 监听 username 的值的变化，
    // 形参列表中，第一个值是“变化后的新值”，第二个为“变化之前的旧值”
    username(newVal, oldVal) {
      console.log(newVal, oldVal);
    },
  },
};

使用 object 的形式定义 watch，可以设置更多的选项：

• immediate 选项：组件加载完立即调用一次
• deep 选项：当监听的是一个对象，对象的属性值变化都会被监听（若只想监听一个属性，则不需要使用 deep 选项，而是使用 ‘info.username’ 这样的形式作为监听的变量）

watch: {
    username: {
        async hander(newVal, oldVal) {  // handler 为处理方法
            const { data: res} = await axios.get(`https://www.example.cn/api/${newVal}`);
            console.log(res)
        },
        immediate: true;  // 表示组件加载完立即调用一次 watch 监听器
    },
},

组件的生命周期

组件的生命周期：组件从 创建 → 运行（渲染）→ 销毁 的整个过程，强调的是一个时间段。

生命周期函数：

1. created：当组件在内存中被创建完毕之后调用（唯一一次）
2. mounted：当组件被成功渲染到页面上之后调用（唯一一次）
3. unmounted：当组件被销毁完毕之后调用（例如 v-if 为 false）（唯一一次）
4. updated：组件被重新渲染（data 更新了）完毕之后调用（0 至多次）
5. beforeCreate 等：在上述周期之前执行。

组件之间的数据共享

在项目开发中，组件之间的关系分为如下 3 种：

1. 父子关系
2. 兄弟关系
3. 后代关系

父子组件的数据共享

父子组件之间的数据共享又分为：

1. 父 → 子
2. 子 → 父
3. 父 ↔  子

兄弟组件的数据共享

1. 安装 mit

npm install mitt -S

2. 创建公共的 EventBus 模块

在项目中创建公共的 eventBus 模块如下：

// 创建一个文件 eventBus.js

import mitt from "mitt";
const bus = mitt();

export default bus; // 把创建的EventBus的实例共享出去

3. 在数据接收方自定义事件

在数据接收方，调用 bus.on(’事件名称’, 事件处理函数） 方法注册一个自定义事件。

import bus from './eventBus.js'

export default {
    data() { return {count: 0} },
    created() {
        bus.on('countChange', (count) => {
            this.count = count;
        }
    },
}

4. 在数据发送方触发事件

在数据发送方，调用 bus.emit(’事件名称’，要发送的数据) 方法触发自定义事件。

import bus from "./eventBus.js";

export default {
  data() {
    return { count: 0 };
  },
  methods: {
    addCount() {
      this.count++;
      bus.emit("countChange", this.count);
    },
  },
};

后代关系组件之间的数据共享

可以使用 provide 和 inject 实现后代组件之间的数据共享。

上述的方法不是响应式的，改变了父组件的值，子孙组件没有变化，要使用 computed 函数修改：

vuex——终极的组件之间数据共享方案

vuex 可以让组件之间的数据共享变得高效、清晰、且易于维护。

创建一个共享的 store，存取数据都通过 store，实现不同组件之间的数据共享。

vue3.x 中全局配置 axios

为什么要全局配置 axios？

1. 每个组件中都需要导入 axios 包（代码臃肿）
2. 没吃发请求都需要填写完整的请求路径（不利于后期的维护）

如何全局配置 axios？

// main.js

import { createApp } from "vue";
import App from "./App.vue";
import "./index.css";

import axios from "axios";

const app = createApp(App);

axios.defaults.baseURL = "https://timpcfan.site";
app.config.globalProperties.$http = axios; // 这里的 $http 为自己取的名字，可以在组件中通过 this.$http 访问**

app.mount("#app");

ref 的使用

ref 是用于辅助开发者获得 DOM 元素或者组件的引用的。（不建议使用 jQuery 获取 DOM 元素，建议使用 ref）

使用 ref 获取 DOM 元素

vue 在每个组件的引用中(this)都添加了一个$refs的属性，这个属性默认指向一个空对象，若开发者需要获取某个 DOM 元素，可以为该 DOM 元素添加属性 ref=”name1”，则可以使用 this.$refs.name1 获取该 DOM 元素的引用。

<template>
    <div>
        <h1 ref="myh1">lalala</h1>
    </div>
</template>

<script>
export default {
    methods: {
        getRefs() {
            console.log(this.$refs.myh1);
        },
    },
}
</script>

使用 ref 引用组件实例

<!-- 给组件添加属性 ref -->
<my-counter ref="counterRef"></my-counter>

console.log(this.$refs.counterRef);
this.$refs.counterRef.add();

要引用的对象还没有渲染怎么办？使用 $.nextTick(callback) 方法

组件的 $nextTick(cb) 方法，会把 cb 回调推迟到下一个 DOM 更新周期之后执行。

<input type="text" v-if="inputVisible" ref="ipt">
<button v-else @click="showInput">展示input输入框</button>

methods: {
    showInput() {
        this.inputVisible = true;
        this.$nextTick(() => {
            this.$refs.ipt.focus(); // 若不使用 $nextTick 则找不到这个 ipt
        })
    }
}

动态组件

1. <component> 是组件的占位符
2. 通过 is 属性动态指定要渲染的组件名称
3. <component is=”要渲染的组件的名称”></component>

使用 keep-alive 保持组件状态

使用<component>时，若切换成其他组件，则原本的组件将会被销毁，其状态无法保持，可以使用<keep-alive>标签将<component>进行包裹，以保持切换走的组件的状态。

<keep-alive>
    <component :is="comName"></component>
</keep-alive>

插槽

可以把插槽认为是组件封装期间，为用户预留的内容的占位符。

插槽的基础用法

在封装组件时，可以通过<slot>元素定义插槽，在使用时组件标签包裹的内容将会插入到插槽中。

<template>
    <p>这是组件MyCom1的第一个p标签</p>
    <slot></slot>
    <p>这是组件MyCom1的第二个p标签</p>
</template>

<MyCom1>
    <p>这是用户自定义的内容</p>
</MyCom1>

插槽的后备内容

通过<slot>元素定义插槽时，可以在其中定义后备内容，若用户未提供自定义内容，则显示后备内容。

具名插槽

如果在封装组件时需要预留多个插槽节点，则需要为每个<slot>插槽指定具体的 name 名称。这种带有具体名称的插槽叫做“具名插槽”。

作用域插槽

省略了插槽的 props 属性的介绍，有缘再见吧。

自定义指令

vue 官方提供了 v-for, v-model 等常用的内置指令。除此之外，vue 还允许开发者自定义指令。

我想省略了 orz。

vue 路由

前端路由的概念与原理

路由就是对应关系。路由分为两大类：

1. 后端路由：后端路由指的是请求方法、请求地址与function 处理函数之间的对应关系。
2. 前端路由：前端路由指的是Hash 地址与组件之间的对应关系。

前端路由的工作方式

1. 用户点击了页面上的路由地址
2. 导致了 URL 地址栏中的 Hash 值发生了变化
3. 前端路由监听到了 Hash 地址的变化
4. 前端路由把当前 Hash 地址对应的组件渲染到浏览器中

实现简易的前端路由

1. 导入并注册 MyHome、MyMovie、MyAbout 三个组件：

export default {
  components: {
    MyHome,
    MyMovie,
    MyAbout,
  },
};

2. 通过<component>标签的 is 属性，动态切换要显示的组件：

<component :is="comName"></component>

data() {
    return {
        comName: 'my-home',
    }
}

3. 在组件的结构中声明如下 3 个<a>连接，通过点击不同的<a>连接，切换浏览器地址栏中的 Hash 值：

<a href="#/home">Home</a> & nbsp;
<a href="#/movie">Movie</a> & nbsp;
<a href="#/about">About</a> & nbsp;

4. 在 created 生命周期函数中监听浏览器地址栏中 Hash 地址的变化，动态切换要展示的组件的名称：

created() {
    window.onhashchange = () => {
        switch (location.hash) {
            case '#/home':
                this.comName = 'my-home',
                break
            case '#/movie':
                this.comName = 'my-movie',
                break
            case '#/about':
                this.comName = 'my-about',
                break
        }
    }
}

vue-router 的基本使用

• vue-router 3.x：对应 vue2.x ：https://router.vuejs.org/zh
• vue-router 4.x：对应 vue 3.x ：https://next.router.vuejs.org

vue-router4.x 的基本使用步骤

• 在项目中安装 vue-router

  npm install vue-router@next -S
  

• 定义路由组件 就是定义自己的组件，如 MyHome.vue, MyMovie.vue, MyAbout.vue

• 声明路由链接与占位符 可以使用<router-link>标签来声明路由链接，并使用<router-view>标签来声明路由占位符。

  <template>
    <h1> App 组件 </h1>
    <!-- 声明路由链接 -->
    <router-link to="/home">首页</router-link> <!-- 不需要加井号啦 -->
    <router-link to="/movie">电影</router-link>
    <router-link to="/about">关于</router-link>
  
    <!-- 声明路由占位符 -->
    <router-view></router-view>
  </template>
  

• 创建路由模块 在项目中创建 router.js 路由模块，在其中按照如下 4 个步骤创建并得到路由的实例对象：

  1. 从 vue-router 中按需导入两个方法
  2. 导入需要使用路由控制的组件
  3. 创建路由实例对象
  4. 向外共享路由实例对象
  5. 在 main.js 中导入并挂载路由模块

  import { createRouter, createWebHashHistory } from 'vue-router'  // 1.
  
  import MyHome from './MyHome.vue'  // 2.
  import MyMovie from './MyMovie.vue'
  import MyAbout from './MyAbout.vue'
  
  const router = createRouter({  // 3.
    history: createWebHashHistory(),
    routes: [
        { path: '/home', component: MyHome },
        { path: '/movie', component: MyMovie },
        { path: '/about', component: MyAbout },
  })
  
  export default router;  // 4.
  

• 导出并挂载路由模块

  // main.js
  // ...
  import router from "./router";
  const app = createApp(App);
  app.use(router); // 5.
  app.mount("#app");
  

vue-router 的高级用法

路由重定向

通过路由规则的 redirect 属性，指定一个新的路由地址，可以很方便地设置路由的重定向：

const router = createRouter({  // 3.
    history: createWebHashHistory(),
    routes: [
        { path: '/', **redirect: '/home'** },
        { path: '/home', component: MyHome },
        { path: '/movie', component: MyMovie },
        { path: '/about', component: MyAbout },
})

为激活的路由链接设置高亮样式

1. 默认的高亮 class 类：被激活的路由链接，默认会应用一个叫做 router-link-active 的类名。开发者可以使用此类名选择器，为激活的路由链接设置高亮样式：

   /* index.css */
   .router-link-active {
     background-color: red;
     color: white;
     font-weight: bold;
   }
   

2. 自定义路由高亮的 class 类：开发者可以基于 linkActiveClass 属性，自定义路由链接被激活时所应用的类名：

   const router = createRouter({
    history: createWebHashHistory(),
    linkActiveClass: 'router-active',
    routes: [
        { path: '/', **redirect: '/home'** },
        { path: '/home', component: MyHome },
        { path: '/movie', component: MyMovie },
        { path: '/about', component: MyAbout },
   })
   

嵌套路由

通过路由实现组件的嵌套展示，叫做嵌套路由。

1. 声明子路由链接和子路由占位符（声明在子组件内部即可）

   <template>
     <div>
       <h3>MyAbout 组件</h3>
   
       <router-link to="/about/tab1">Tab1</router-link>
       <router-link to="/about/tab2">Tab2</router-link>
   
       <router-view></router-view>
     </div>
   </template>
   

2. 在父路由规则中，通过 children 属性嵌套声明子路由规则

   const router = createRouter({
    history: createWebHashHistory(),
    linkActiveClass: 'router-active',
    routes: [
        { path: '/', **redirect: '/home'** },
        { path: '/home', component: MyHome },
        { path: '/movie', component: MyMovie },
        {
            path: '/about',
            component: MyAbout,
            **redirect: '/about/tab1',** // 访问 /about 时就直接显示 tab1
            **children: [
                { path: 'tab1', component: Tab1 },** // 访问 /about/tab1 时展示 Tab1
                **{ path: 'tab2', component: Tab2 },
            ],**
        },
   })
   

动态路由匹配

在 vue-router 中使用英文的冒号（:）来定义路由的参数：

{ path: '/movie/:id', component: Movie }

{ path: '/movie/1', component: Movie }
{ path: '/movie/2', component: Movie }
{ path: '/movie/3', component: Movie }

使用 $route.params 对象获取动态匹配的参数值。

<template>
    <h1> id：{{ $route.params.id }} </h1>
</template>

使用 props 接收路由参数，需要在路由规则中开启：

{ path: '/movie/:id', component: Movie, **props: true** }

<template>
    <h1> id：{{ id }} </h1>
</template>

export default {
    name: 'MyMovie',
    props: ['id'],
}

编程式导航

vue-router 中的编程式导航 API

• this.$router.push(’hash 地址’)：跳转到指定的 hash 地址
• this.$router.go(数值 n)：实现导航历史的前进、后退（-1）

gotoMovie(id) {
    this.$router.push(`/movie/${id}`);
}

命名路由

通过 name 属性为路由规则定义名称的方式，叫做命名路由：

{
    path: '/movie/:id',
    name: 'mov',
    component: Movie,
    props: true,
}

注意：命名路由的 name 值不能重复。

使用命名路由可以在<router-link>中直接使用其名称，而不用显示地写 hash 地址：

<router-link :to="{ name: 'mov', params: { id: 3 } }">go to Movie</router-link>

this.$router.push({
    name: 'mov',
    params: { id: 3 },
})

导航守卫

导航守卫可以控制路由的访问权限。

如何声明全局导航守卫

全局导航守卫会拦截每个路由规则，从而对每个路由进行访问权限的控制。可以按照如下的方式定义全局导航守卫：

// 创建路由实例对象
const router = createRouter({ ... })

// 调用路由实例对象的 beforeEach 函数，声明“全局前置守卫”
// fn 必须是一个函数，每次拦截到路由的请求，都会调用 fn 进行处理
// 因此 fn 叫做 “守卫方法”
router.beforeEach(fn)

守卫方法的 3 个参数

全局导航守卫的守卫方法中接收 3 个形参，格式为：

router.beforeEach((to, from, next) => {
  // to 目标路由对象
  // from 当前导航要离开的路由对象
  // next 时一个函数，表示放行
});

next 函数的 3 种调用方式：

• 直接放行：next()
• 强制其停留在当前页面：next(false)
• 强制其跳转到登录页面：next(’/login’)

结合 token 控制后台主页的访问权限

router.beforeEach((to, from, next) => {
  const token = localStorage.getItem("token"); // 1. 读取 token
  if (to.path === "/main" && !token) {
    // 2. 想要访问“后台主页”，且 token 不存在
    // next(false);  // 3.1 不允许跳转
    next("/login"); // 3.2 强制跳转到“登录页面”
  } else {
    next(); // 3.3 直接放行，允许访问“后台主页”
  }
});

vue 项目的创建

如何快速创建 vue 的 SPA 项目

1. 基于 vite 创建 SPA 项目
   • 仅支持 3.x
   • 不基于 webpack
   • 速度快
   • 小而巧
2. 给予 vue-cli 创建 SPA 项目
   • 支持 2.x 与 3.x
   • 基于 webpack
   • 较慢
   • 大而全

npm init vite-app code1  # 创建一个vite项目，命名为code1
cd code1
npm install  # 安装依赖包
npm run dev  # 启动项目

vite 的基本使用

vite 项目的运行流程

在工程化的项目中，vue 要做的事情很单纯：通过 main.js 把 App.vue 渲染到 index.html 的指定区域中。

其中：

1. App.vue 用来编写待渲染的模板结构
2. index.html 中需要预留一个 el 区域
3. main.js 把 App.vue 渲染到了 index.html 所预留的区域中

App.vue

// 需要使用<template>标签把组件包围
<template>
  <h1>hello world</h1>
</template>

main.js

// 1. 按需导入 createApp 函数
import { createApp } from "vue";
// 2. 导入待渲染的 App.vue 组件
import App from "./App.vue";

// 3. 调用 createApp 函数，创建 SPA 应用的实例
const app = createApp(App);

// 4. 调用 mount() 把 App 组件的模版结构，渲染到指定的 el 区域中
app.mount("#app");

Todos - Vite 项目案例

vue-cli 的使用

Vue CLI

基于 vue ui 创建 vue 项目

1. 运行 vue ui 命令，自动在浏览器中打开创建项目的可视化面板。

2. 填写项目名称
3. 在预设页面选择手动配置项目

4. 在功能页面勾选需要安装的功能

5. 在配置页面勾选 vue 的版本和需要的预处理器

基于命令行创建 vue 项目

vue create my-project

vue 组件库

什么是 vue 组件库

在实际开发中，前端开发者可以把自己封装的.vue 组件整理、打包、并发布为 npm 的包，从而供其他人下载和使用。这种可以直接下载并在项目中使用的现成组件，就叫做 vue 组件库。

vue 组件库与 bootstrap 的区别

• bootstrap 只提供了纯粹的原材料（css 样式、HTML 结构以及 JS 特效），需要由开发者做进一步的组装和改造。
• vue 组件库是遵循 vue 语法、高度定制的现成组件，开箱即用的。

最常用的 vue 组件库

• PC 端
  • Element UI
  • View UI
• 移动端
  • Mint UI
  • Vant

Element UI

• vue2 使用旧版的 Element UI
• vue3 使用新版的 Element Plus

安装

npm install element-plus --save

引入 element-ui

• 完整引入：操作简单，但体积过大
• 按需引入：操作复杂，优化体积

完整引入

// main.ts
import { createApp } from "vue";
import ElementPlus from "element-plus";
import "element-plus/dist/index.css";
import App from "./App.vue";

const app = createApp(App);

app.use(ElementPlus);
app.mount("#app");

按需引入

自动导入（推荐）

npm install -D unplugin-vue-components unplugin-auto-import

// webpack.config.js
const AutoImport = require('unplugin-auto-import/webpack')
const Components = require('unplugin-vue-components/webpack')
const { ElementPlusResolver } = require('unplugin-vue-components/resolvers')

module.exports = {
  // ...
  plugins: [
    AutoImport({
      resolvers: [ElementPlusResolver()],
    }),
    Components({
      resolvers: [ElementPlusResolver()],
    }),
  ],
}

**// 或者对于vue-cli项目，修改vue.config.js**
const { defineConfig } = require("@vue/cli-service");

const AutoImport = require("unplugin-auto-import/webpack");
const Components = require("unplugin-vue-components/webpack");
const { ElementPlusResolver } = require("unplugin-vue-components/resolvers");

module.exports = defineConfig({
  transpileDependencies: true,
  configureWebpack: {
    plugins: [
      AutoImport({
        resolvers: [ElementPlusResolver()],
      }),
      Components({
        resolvers: [ElementPlusResolver()],
      }),
    ],
  },
});