过去两年，关于 AI Coding 的讨论，几乎每隔几个月就会换一个重心。

最开始，大家讨论的是：AI 到底能不能写代码。后来，大家开始关心：它能不能真正参与开发。再后来，问题变成了：它能不能独立完成一个模块、一个项目，甚至一段完整的交付流程。

到了今天，这个问题其实已经有了阶段性答案。AI 不仅能写代码，而且已经能够在很多场景中写得很快、写得像样，甚至能把原型、骨架、测试和一些基础功能一并做出来。真正的分水岭，已经不再是“它会不会写”，而是“它写出来的东西，能不能被人和组织真正接住”。

这背后，意味着 AI Coding 正在进入一个新的阶段：竞争的重点，开始从生成能力，转向治理能力；从单点能力，转向系统能力；从“做出来”，转向“做得稳、接得住、放得进生产”。

这不仅是一个技术问题，也是一个组织问题，甚至还是一个个人问题。 作者Fisher

一、AI Coding 的真正难点，不在生成端，而在接收端

在试点阶段，AI Coding 往往给人一种很强的兴奋感。

它写代码很快，搭架子很快，补测试也很快。很多过去需要半天、一天才能看到雏形的事情，现在半小时就能起出一个像样的原型。于是团队会自然得出一个判断：AI Coding 已经可用了。

但真正的问题，通常不是在这里暴露的。

问题往往出现在推广阶段。有人把 AI 生成的代码直接提交，跳过评审；有人发现 AI 改了不该改的接口，但变更已经合进去了；还有人虽然也用了 AI，但最后还是不得不手动重写一遍，因为 AI 的输出和团队的工程习惯、边界约束、交付要求对不上。

这时候大家才会意识到，试点阶段验证的，往往只是“AI 能不能写代码”；而没有验证的是，“AI 写出来的代码，如何被工程体系接纳”。

这两者不是一回事。

AI Coding 的瓶颈，从来不只在模型这一端。真正决定它能不能进入生产的，是代码生成之后的一整套问题：它是不是在边界内生成的？有没有跑偏？改动面是不是可控？结果是否经过验证？最后能不能通过评审、检查和放行体系？

这些问题，模型自己回答不了，只能由工程系统来回答。

所以，AI Coding 的下一阶段，不是继续追问“怎样让 AI 写更多代码”，而是要回答另一个更关键的问题：怎样让 AI 在工程体系中稳定完成交付。

二、从 Rule、Spec、Loop 到 Harness，本质上是在建设控制面

如果把 AI Coding 的演进过程拆开来看，可以发现它并不是一个单点突破的问题，而是一条逐层收紧的建设路径。

先是 Rule，再是 Spec，然后是 Loop，最后才是 Harness。

这四层看似是四个模块，实际上是一条递进关系。每一层都不是孤立存在的，而是在为下一层提供约束条件。它们共同解决的，不是“AI 怎么更聪明”，而是“AI 怎么不乱来、怎么不跑偏、怎么持续收敛、最后怎么被组织信任”。 作者Fisher

Rule：先把“不要乱来”写成机器边界

很多团队一开始最关心的，是 AI 能做什么。但在真实项目里，最昂贵的错误，往往不是写得不漂亮，而是越过边界、误改契约、扩散变更面，或者在不该结束的时候宣布任务完成。

所以 Rule 必须排在第一层。

Rule 不是为了让 AI 更有背景知识，而是为了让它先学会不越界。它首先要写清楚的，不是“建议怎么做”，而是“绝对不要做什么”。先写 NEVER，再写 DO NOT；先约束高代价错误，再去讨论更优雅的实现。

更重要的是，规则文件不是装饰品。它如果只是上下文的一部分，那它就只是提醒；真正的护栏，必须由测试、lint、build、schema check、review policy 这些外部信号来接管。也就是说，Rule 的价值不在于“告诉 AI”，而在于“让系统有办法拦住 AI”。

Rule 解决的是一个最基础的问题：先别乱来。

Spec：再把“想做什么”压缩成一次可执行的变更

只有 Rule 还不够。因为边界清楚，不等于目标清楚。

很多 AI Coding 失控，不是模型没理解需求，而是需求本身没有被整理成一个范围明确、结果可验证、边界可审查的交付对象。于是 AI 很自然地扩写任务：修一个提示，顺手重构流程；补一个状态，顺手改掉契约；写一个 happy path，顺手把整个模块“整理”一遍。

这时候需要的就是 Spec。

Spec 不是更长的 prompt，也不是把背景写得更厚，而是把一次模糊的意图，收敛成一次可执行、可审查、可验证的变更。它至少要回答几件事：这次要解决什么，这次不解决什么，允许改哪些 surface，哪些 contract 不能动，怎样才算完成。

它真正的价值，是把范围钉住，把完成条件前置，把“顺手改一下”的冲动提前消灭掉。

如果说 Rule 解决的是“别乱来”，那么 Spec 解决的就是“别跑偏”。

Loop：把一次性生成，改造成可收敛的执行闭环

有了边界和目标，还不够。因为执行过程本身依然会出错。

真正决定 AI 能不能持续参与工程工作的，不是它某一次回答得多漂亮，而是有没有一个 Loop，把“读取上下文—做最小改动—运行外部验证—记录状态—进入下一轮”变成系统动作。

这一步非常关键，因为它改变了 AI Coding 的工作形态。它不再是一锤子买卖，而是一个持续逼近验收条件的过程。它要求每一轮改动足够小，小到能被验证器快速裁决；它要求状态外置到文件、日志、Git 历史、计划文档里，而不是寄希望于模型“记得住”；它也要求一旦检查失败，就必须停下来修，而不是带着失败继续往前滚。

没有 Loop，AI 就更像一次性生成器；有了 Loop，它才开始接近一个可持续协作的执行体。

Loop 优化的，不是生成质量，而是收敛效率。

Harness：最后把 AI 放回组织治理，而不是直接推向生产

当 Rule、Spec、Loop 三层建立起来之后，AI 已经不只是“会写代码”，而是在一个受控环境里推进任务了。但要真正进入企业生产环境，还差最后一层：Harness。

Harness 不是某一个具体工具，而是一整套把 AI 产出纳入验证、提交、评审、放行与追责体系的工程外骨骼。它负责守住共享边界，承接前面三层的约束结果，并把这些结果交给组织级的质量系统去裁决。

从这个意义上说，Harness 的核心任务，从来不是让 AI 更自由，而是让组织更放心。它要回答的，不是“AI 能不能写出代码”，而是“这次变更为什么值得被信任”。

所以，Harness Engineering 的价值，不在于增强 AI 的能力，而在于让 AI 的能力在企业环境中变得可控、可验证、可回滚、可审计、可接纳。

这也解释了为什么 AI Coding 的竞争，最终不会只是模型之争，而会逐渐变成工程体系之争。真正的壁垒，不在于谁能更快生成一段代码，而在于谁能更早把一套完整的交付系统建出来。

三、AI 改变的不只是工程系统，也在改变人本身

如果说前面的讨论更多是组织视角，那么 AI 的另一面，其实是个体体验的剧烈变化。

很多人最初想象 AI 时，带着一种很朴素的期待：它帮我做事，我就轻松了。它替我干活，我就有时间喝茶、散步、发呆，或者去做那些真正重要的事情。

但现实并不完全是这样。

AI 让开始一个项目的门槛变得极低。过去半天才能搭出来的原型，现在半小时就有雏形；过去觉得“先别做，太费劲了”的想法，现在会因为“反正 AI 很快”而被迅速启动。于是，人很容易进入一种新的状态：不舍得放弃任何一个想法，不断开新项目，不断并行推进，在多个窗口和多个任务之间来回切换。

AI 并没有自动带来自由，反而把人的欲望和执行冲动一起放大了。

这也是为什么，很多人在拥有 AI 之后，并没有更轻松，反而更快、更忙、更停不下来。问题不在 AI 本身，而在于当手里有了“锤子”，人就会拼命去找“钉子”。效率的提升，并不会自动带来秩序；如果没有新的节奏感和取舍能力，它甚至会把一个人拖进更深的碎片化和焦虑里。

从这个角度看，AI 不只是要求组织建立 Harness，也在要求个人建立某种属于自己的“内在 Harness”——也就是边界、节奏、取舍和完成意识。

因为 AI 降低的是“开始”的门槛，但没有降低“做完、做好、做成”的难度。真正困难的部分，往往还在后面：细节逻辑的补全、体验的打磨、产品的传播、用户的接受、市场的验证。这些事情，不会因为 AI 会写代码，就自动迎刃而解。

所以，AI 时代真正稀缺的能力，开始发生转移。仅仅会写代码已经不够了，甚至仅仅会调用 AI 也不够了。更重要的是：你能不能判断什么值得做，能不能控制节奏，能不能把一个想法推进到真正成立，能不能在无限可能性里保住自己的主线。

四、当“有用”越来越容易被生产，人的价值会重新回到表达

AI 的另一个重要影响，是它正在改变“表达”的结构。

过去，人们写博客、做播客、写公众号，很多时候强调的是“输出干货”“提供价值”“讲明白一个知识点”。但今天，AI 在生产“有用内容”这件事上，已经越来越专业、越来越全面、越来越结构化。它可以快速生成一篇逻辑完整、框架清晰、信息密度很高的文章。

这反而会逼着人重新思考：当“有用”越来越容易被机器生产，人还要表达什么？

答案也许恰恰是：表达自己。

不是为了博流量，不是为了证明自己很懂，不是为了拼谁的内容更完整，而是为了留下一个具体的人在具体时刻的感受、观察、挣扎和判断。那种带着个人气味的表达，那种“我是谁、我正在经历什么、我为什么会这样想”的表达，反而会在 AI 时代变得更珍贵。

同样的变化，也发生在内容媒介上。AIGC 不只是一个生产工具，它更像是一种新的表达媒介。它让普通人可以更低门槛地进入影像、漫剧、短片、叙事性创作，让很多过去只能停留在脑海里的东西，有机会被更完整地表达出来。

从这个意义上说，AI 不只是改变了软件的生产方式，也在改变创作的形式、表达的入口以及内容被看见的方式。旧的表达形式不会立刻消失，但新的表达形式，正在进入主流视野。对个人来说，这不只是一个工具升级的问题，而是一个“如何在新媒介中继续表达自己”的问题。

五、AI 时代的真正分水岭，不是谁更会用工具，而是谁更早建立秩序

把组织和个人这两条线放在一起看，会发现一个很有意思的结论。

AI 的核心问题，已经不再只是能力问题，而是秩序问题。

对组织来说，这个秩序体现在工程系统里。它表现为 Rule、Spec、Loop、Harness，表现为上下文工程、架构约束、检查点、人工介入、审计与回滚。它要解决的是：AI 如何在组织中被约束、被验证、被信任、被放行。

对个人来说，这个秩序体现在自我管理里。它表现为取舍、节奏、边界、表达和长期主线。它要解决的是：AI 如何不把人拖进无穷无尽的并行和焦虑，而是成为真正放大价值的工具。

所以，AI Coding 的下一阶段，拼的不会只是模型能力，也不会只是提示词技巧。真正拉开差距的，最终会是谁更早把经验转成系统，把约束变成默认，把流程变成闭环，把输出纳入治理，把高效率放回可控秩序里。

这就是为什么，未来的竞争重点，不会只是“谁的 Agent 更聪明”，而更可能是“谁的 Harness 更成熟”；不会只是“谁会让 AI 写代码”，而是“谁能让 AI 稳定完成交付”；不会只是“谁启动得更快”，而是“谁在快的同时没有失去方向”。

作者Fisher

结语

过去两年，AI 让很多曾经听起来像幻想的事情，迅速变成了现实。它让代码生成、产品原型、内容创作、跨领域尝试，都出现了前所未有的加速度。可也正因为如此，真正困难的问题才终于浮出水面。

我们真正要建设的，不是一个更会写代码的助手，而是一套能在边界内稳定工作的交付系统；我们真正要解决的，也不只是技术问题，而是人与组织如何在高智能、高速度的环境中重新建立秩序的问题。

从 Rule 到 Spec，从 Loop 到 Harness，这是一条工程系统逐步成熟的路径。 从兴奋到焦虑，从并行到取舍，从“输出有用”到“表达自我”，这是一条个人在 AI 时代重新认识自己的路径。

AI 不会替我们完成这一切。 但它正在逼着我们，更认真地回答这些问题。

作者Fisher

而这，也许正是 AI Coding 下一阶段真正的开始。

面向 JavaScript 开发人员的 Python

JavaScript 是我的面包和黄油，但我一点也不讨厌其他编程语言。我一直很喜欢 Python，多年来我一直使用它，从脚本到 Flask 和 Django 的 API 应用程序。

在这篇文章中，我将引导您对这两种语言进行 10,000 英尺的比较。

要继续学习，您至少需要对 JavaScript 及其怪癖有基本的了解。

您可以在浏览器控制台或 Node.js REPL 中尝试 JavaScript 代码示例。对于 Python，您可以使用 Python REPL。代码示例里出现 >>> 即表示 REPL。

享受阅读的乐趣！

Python 和 JavaScript 中的算术运算符

让我们从算术开始吧！

Python 和 JavaScript 或多或少共享相同的算术运算符。除了（无双关语）除法运算符之外，Python 还有一个整除运算符。

底除法返回两个数字相除的整数商。考虑以下 Python 示例：

>>> 89 / 4

# 输出：22.25

要获得整数而不是浮点数，我们可以使用向下除法（// 在 JavaScript 中是注释）：

>>> 89 // 4

# 输出：22

在 JavaScript 中可用 Math.floor 得到同样结果：

Math.floor(89 / 4)

// 输出：22

Python 的算术运算符不仅仅对数字进行运算。例如，您可以使用字符串乘法来重复模式：

>>> "a" * 9

# 输出：'aaaaaaaaa'

或者加法也可以连接简单的字符串：

>>> "a" + "aa"

# 输出：'aaa'

对于其他一切，Python 都会引发 TypeError。这意味着你不能将数字和字符串相加：

>>> "a" + 9

# 类型错误：只能将 str （不是“int”）连接到 str

也不划分它们（除了没有意义之外）：

>>> "a" / 9

# 类型错误：/ 不支持的操作数类型：“str”和“int”

在这方面，由于臭名昭著的类型强制，JavaScript 在外部观察者眼中完全是一团糟。不仅JavaScript的算术运算符可以自由地将数字转换为字符串：

"a" + 9

// 输出：“a9”

它们在无效算术运算的情况下不会引发任何错误：

"a" / 9

// 输出：NaN

相反，我们得到 NaN——由无效算术运算产生的特殊 JavaScript 值，难以处理，直到 ECMAScript 2015 Number.isNaN。

Python 和 JavaScript 中的自增和自减运算符

JavaScript 有一个递增和一个递减运算符。两者都可以使用前缀（在数字之前）：

var a = 34;

++a

或 后缀（在数字之后）：

var a = 34;

一个++

在第一种情况（前缀）中，运算符递增数字并返回新数字：

var a = 34;

++a

// 返回 35

在第二种情况（后缀）中，运算符递增数字，但返回原始数字：

var a = 34;

一个++

// 返回 34

// 增加到 35

同样的规则也适用于减运算符。

相反，Python 中不存在递减/递增运算符这样的东西。相反，您必须使用赋值运算符。这是 Python 中的增量赋值：

>>> a = 34

>> a += 1

# a 现在 35

这是一个减量赋值：

>>> a = 35

>> a -= 2

# a 现在是 33

JavaScript 也有赋值运算符。

Python 和 JavaScript 中的比较运算符

JavaScript 和 Python 具有相同的比较运算符，除了 三等号，它象征着 JavaScript 奇怪的强制规则。

关于这个主题有大量文献，我不会过多打扰您。以下是并列的 Python 和 JavaScript 比较运算符：

准确地说，Python 还有 is 运算符（此处未讨论），对我来说，它更多地属于身份运算符家族。

这里重要的是 Python 在比较值时是可预测的：

>>> 9 == "9"

# 输出：假

另一方面，每次涉及抽象比较运算符时，JavaScript 都会执行一次转换：

9 == "9"

// 输出：真

这里第一个运算符 9 在比较之前被转换为字符串。为了避免转换，您必须使用“严格比较运算符”，也称为三等于：

9 === "9"

// 输出：假

Python 和 JavaScript 中的逻辑运算符

现在我们讨论了算术和比较运算符，让我们看看它们的同伴：逻辑运算符。哦，我的朋友，我还记得高中时的布尔代数。你？

以下是 Python 和 JavaScript 中最常见的逻辑运算符：

当您想要根据表达式的结果在代码中执行（或不执行）某些操作时，逻辑运算符非常有用。假设我们只想在 2019 年大于 1900 时打印“I am Cool”。以下是在 Python 中使用 逻辑运算符 and 执行此操作的方法：

>>> 2019 > 1900 and print("I am cool")

# 输出：“我很酷”

和表示：仅当左侧的内容为true时才执行右侧的内容。 JavaScript 中的相同逻辑映射为：

2019 > 1900 && console.log("I am cool")

或逻辑运算符的工作方式相反。 或表示：仅当左侧的内容为假时才执行右侧的内容。下面是一个 Python 示例：

>>> 2019 > 1900 or print("I am cool")

# 输出：真

结果是True

因为2019年大于1900所以评估就到此为止。 JavaScript 中的逻辑如下：

2019 > 1900 || console.log("I am cool")

最后但并非最不重要的一点是逻辑否定，当您想要翻转表达式的结果时很有用。例如，即使左侧给定的表达式为 false，我们也可以打印“I am Cool”。如何？使用 Python 中的 not 运算符：

>>> not 2019 > 151900 and print("I am cool")

# 输出：“我很酷”

2019 显然小于 151900，但 逻辑非 翻转了结果，因此仍然评估正确的表达式。下面的例子应该更容易理解：

>>> not False and print("I am cool")

# 输出：“我很酷”

JavaScript 中的逻辑否定使用感叹号：

!false && console.log("I am cool")

Python 和 JavaScript 中的基本数据类型

在计算机编程中，数据类型是您可以处理的“形状”。 大多数编程语言都有一组基本数据类型，如字符串、数字和布尔值。

Python 和 JavaScript 也不例外。以下概述了两种语言中可用的最重要的基本数据类型（n/a 代表不适用）。

JavaScript 有八种类型，其中七种称为原语（对象本身就是一种类型）。从表中您可以注意到，Python 和 JavaScript 基本类型都是不可变的。例如，在 Python 中，我们将字符串称为 unicode 字符的不可变序列。

与大多数基本类型一样，Python 字符串也有常见操作的方法：

>>> name = "caty"

>> name.capitalize()

>> name.center(40)

>> name.count("t")

还有更多！

由于字符串是不可变的，因此字符串操作的结果始终是一个新字符串。

现在数字。在 JavaScript 中，整数和浮点数没有区别，它们只是一个 Number 数据类型。在 Python 中，有整数和浮点数。

JavaScript 最近获得了 BigInt，用于表示非常大的数字的原始类型。相反，Python 似乎使用单个 int 类型来处理小整数和大整数。

如果不提及典型的 boolean 那就太失职了，在 Python 中它可以假设 False 或 True。

关于特殊值的重要说明。Python 用 None 表示空值；JavaScript 中对应的是 null。

同样在 Python 中也没有 undefined 的概念；也没有与 JavaScript 的 Symbol 相当的类型（相当深奥的原语）。

Python 和 JavaScript 中的正则表达式

正则表达式是针对文本进行模式匹配的强大工具。为了在 Python 中使用正则表达式，我们使用 re 模块。

要创建新模式，我们可以使用 re.compile 编译正则表达式：

import re

regex = re.compile(r"\d\d\d\d")

re.compile 对于复杂的正则表达式特别有用，因为它可以加快速度。

有了正则表达式后，可用 .search() 在一段文本上匹配：

import re

regex = re.compile(r"\d\d\d\d")

text = "Your id is 4933"

match = regex.search(text)

这里我们用 \d\d\d\d 搜索文本中的四个连续数字。若匹配成功，结果是一个 match 对象，带有 .start() 和 .end() 两个方法。

这些方法分别返回已找到模式的文本部分的开始和结束索引：

import re

regex = re.compile(r"\d\d\d\d")

text = "Your id is 4933"

match = regex.search(text)

start, end = match.start(), match.end()

# 开始是 11，结束是 15

有了这些索引，我们现在可以提取匹配项：

import re

regex = re.compile(r"\d\d\d\d")

text = "Your id is 4933"

match = regex.search(text)

start, end = match.start(), match.end()

found = text[start:end] # 4933

在 JavaScript 中可用字面量或 RegExp 构造函数达到同样效果：

const regex = new RegExp(/\d\d\d\d/);

我们还可以将标志传递给构造函数。这里我们构建一个全局正则表达式：

const regex = new RegExp(/\d\d\d\d/, "g");

现在给定要匹配的文本，可用 .exec() 与 lastIndex 在字符串中多次匹配，或更好的是使用新的 String.prototype.matchAll()，返回 迭代器：

const regex = new RegExp(/\d\d\d\d/, "g");

const text = "Your 7795 id is 4933";

const match = text.matchAll(regex);

const found = [...match].map((el) => el[0]);

// ['7795'，'4933']

Python 数据类型和 JavaScript：不变性和变量

您可能从上表中注意到，大多数基本 Python 数据类型都是不可变的。 JavaScript在实践中似乎更轻松。在浏览器控制台或 Node.js REPL 中尝试以下示例。数字？ 看起来可变：

var a = 34;

++a

// 返回 35

布尔值？ 看起来也是可变的：

var x = false;

x++;

// 返回 0 并且 x 变为 1

无效的？再次，似乎是可变的：

var x = null;

x++;

// 返回 0 并且 x 变为 1

别被愚弄了。这里改变的不是底层原语，而是分配给变量的值。

最后两个带有 boolean 和 null 的示例是类型强制的情况。引擎将这两个值转换为相应的数字表示，并且变量被分配新值。

参见 this example on MDN for more。

Python 和 JavaScript 中的复杂数据类型

复杂数据类型是一种更复杂的形状，与字符串和数字等简单基元相反。在Python中，我们可以命名列表、字典、集合和元组。

相反，在 JavaScript 中，区别稍微不太明显，因为 Object

是最顶层的复杂类型和其他子类型，例如 Array

和Set

是其“祖先”的特殊版本（Function

也是一个对象）。

以下是 Python 和 JavaScript 中复杂数据类型的细分：

正如你所看到的 JavaScript 中的数组和对象总是可变的，所以 Object

。除非使用外部库，否则无法真正保护对象（Object.freeze

是浅的）。不过，未来有计划将 immutable types 添加到 JavaScript 中。

另一方面，Python 是一种不可变的复杂类型，称为元组（而列表、字典和集合是可变的）。让我们更详细地了解 Python 复杂类型。

Python 数据类型：列表和元组

Python 中的列表是元素的集合，就像 JavaScript 数组一样。这是一个 Python 列表：

>>> my_list = ["vale", 98, "caty", None]

列表操作总是会改变原始列表：

>>> my_list = ["a", None, 44, True, "f"]

>> my_list.append(44)

>> my_list.remove('f')

>> print(my_list)

# 输出：[“a”，无，44，真，44]

相反，元组是不可变的，实际上它只有两个只读操作（索引和计数）：

>>> my_tuple = ("vale", "Italy", 105)

>> my_tuple.count("Italy") # 1

>> my_tuple.index(105) # 2

请注意，元组包含在圆括号中。

我真的很喜欢 Python 如何使用加法运算符将两个列表连接在一起：

>>> my_list = ["a", None, 44, True, "f"]

>> another_list = ["b", None, 89, False, "x"]

>> my_list + another_list

# 输出：[“a”，无，44，True，44，“b”，无，89，False，“x”]

但是不敢用 JavaScript 尝试这个技巧，你会感到惊讶：

var my_list = ["a", null, 44, true, "f"]

var another_list = ["b", null, 89, false, "x"]

result = my_list + another_list

// 结果是：“a,,44,true,fb,,89,false,x”

与 JavaScript spec goes 一样，当操作数都是非字符串时（如本示例所示），加法运算符会将其操作数转换为字符串。注意，Python 列表和元组不能连接在一起：

>>> my_tuple = ("vale", "Italy", 105)

>> my_list = ["a", None, 44, True, "f"]

>> my_tuple + my_list

# 输出类型错误：只能将元组（不是“列表”）连接到元组

Python 数据类型：字典和 JavaScript 对象

JavaScript 的对象是键/值对的容器，也是其他专用对象的支柱：

var obj = {

姓名：“约翰”，

年龄：33

};

“JavaScript 中几乎所有东西都是对象”不仅仅是一种说法。这是事实。数组、函数、集​​合等等都只是 JavaScript 对象。

Python 有类似的东西，称为字典（或简称 dict），但它只是一个容器，而不是基本构建块：

>>> my_dict = {

“姓名”：“约翰”，

“城市”：“罗马”，

“年龄”：44

}

字典中的值可以通过它们的键访问或更改：

>>> my_dict = {

“姓名”：“约翰”，

“城市”：“罗马”，

“年龄”：44

}

>> my_dict["name"]

>> my_dict["city"] = "Florence"

Python 引发 KeyError

当您访问不存在的密钥时：

>>> my_dict = {

“姓名”：“约翰”，

“城市”：“罗马”，

“年龄”：44

}

>> my_dict["not_here"]

# 输出：KeyError：'not_here'

.get()

方法是直接键访问的更安全的替代方法，因为它不会引发，并且让我们为不存在的键指定默认值：

>>> my_dict = {

“姓名”：“约翰”，

“城市”：“罗马”，

“年龄”：44

}

>> my_dict.get("not_here", "not found")

# 输出：“未找到”

其他只读操作为.items()

，或 .keys()

:

>>> my_dict = {

“姓名”：“约翰”，

“城市”：“罗马”，

“年龄”：44

}

>> my_dict.keys() # ['name', 'city', 'age']

您还可以使用 .clear() 从字典中删除元素或完全清除它

:

>>> my_dict = {

“姓名”：“约翰”，

“城市”：“罗马”，

“年龄”：44

}

>> my_dict.pop("name") # returns 'John' and removes it

>> my_dict.clear() # my_dict is empty now

列表、元组、字典和集合是集合或序列，因为它们保存一定数量的元素，并公开与它们交互的通用操作。

没有开关，没有派对

“Python 中没有开关？我应该怎么做”……几年前你就可以听到我的声音。你没看错没有 switch

在Python中。 Java 程序员喜欢它，JavaScript 开发人员也喜欢它。

switch

语句是 JavaScript 中的常见习惯用法。考虑以下示例：

function getUrlConf(host) {

switch (host) {

案例“www.example-a.dev”：

return "firstApp.urls";

案例“www-example-b.dev”：

return "secondApp.urls";

案例“www.example-c.dev”：

return "thirdApp.urls";

默认：

return "Sorry, no match";

}

}

getUrlConf("www-example-b.dev");

函数必须检查主机字符串以根据主机值返回相应的配置。配switch

我们比较值switch (host)

在 case 中

条款case "www.example-a.dev":

。对于每个 case

我们返回一个值。 default

子句确保在没有匹配项的情况下返回默认值。

Python 中没有 switch

：使用字典可以得到相同的结果：

def get_url_conf(host):

mapping = {

"www.example-a.dev": "firstApp.urls",

"www-example-b.dev": "secondApp.urls",

"www.example-c.dev": "thirdApp.urls"

}

return mapping.get(host, "Sorry, no match")

如果你问我的话，就干净多了。如果您更喜欢的话，还有 same pattern works for JavaScript。

JavaScript 对象传播/合并，Python 字典传播/合并

ECMAScript 2018 添加了“分解”JavaScript 对象的功能，也称为 “传播”。此语法对于保持对象不变（或克隆它们）特别方便：

const initial = {

不要触摸：“我的布雷尔”

};

const next = { ...initial, dontTouch: "just a copy" };

// initial.dontTouch 是“我的 breil”

// next.dontTouch 是“只是一个副本”

或者将它们合并在一起：

const a = {

姓名：“朱莉安娜”，

年龄：33

};

const b = {

姓氏：“克莱恩”，

城市：“旧金山”

};

const movie = {

书名：《高堡里的男人》

};

const all = { ...a, ...b, ...movie };

console.log(all);

/*

输出：

{

名称：“朱莉安娜”，

年龄：33，

姓氏：“克莱恩”，

城市：“旧金山”，

书名：《高堡里的人》

}

*/

在对象传播之前，使用 Object.assign 实现了相同的结果

:

const initial = {

不要触摸：“我的布雷尔”

};

const next = Object.assign({}, initial, { dontTouch: "just a copy" });

有几种方法可以在 Python 中获得相同的结果：一种方法涉及遍历 dict.update()

我不会在这里介绍。

字典解包看起来更像是 JavaScript 的对象传播，我更喜欢它。这是第一个例子：

initial = {"dont_touch": "my breil"}

next = {**initial, "dont_touch": "just a copy"}

这里是initial

被传播到 next

，“dont_touch”的值会覆盖原始值，同时保留 initial

。要合并两个或多个字典，我们可以这样做：

a = {"name": "Juliana", "age": 33}

b = {"surname": "Crain", "city": "San Francisco"}

movie = {"title": "The man in the high castle"}

all = {a, b, **movie}

不幸的是，字典解包有一些限制，导致 Python 添加字典的联合运算符。所以从 Python 3.9 开始你可以做 union：

a = {"name": "Juliana", "age": 33}

b = {"surname": "Crain", "city": "San Francisco"}

movie = {"title": "The man in the high castle"}

all = a | b | movie # Dict union!

print(all)

”“”

输出

{'name': 'Juliana', 'age': 33, 'surname': 'Crain', 'city': 'San Francisco', 'title': 'The man in the high castle'}

”“”

整洁的！更多info here。

Python 数据类型：Set 和 JavaScript Set

JavaScript 的 Set 是一种方便的数据结构，可用于存储唯一值。 Set 可以包含原始类型（甚至为 null 和未定义）或对对象的引用：

const mySet = new Set();

mySet.add( "aString" )

mySet.add( null )

mySet.add( NaN )

mySet.add(1)

mySet.add(1)

// Output: Set { 'aString', null, NaN, 1 }

除了添加元素、检查它们是否存在或循环遍历之外，您对 JavaScript Set 没有什么可以做的。 Set 有以下方法：

• .添加
• .清除
• .删除
• .条目
• .forEach
• .有
• .keys
• .尺寸
• .values

Python 的 Set 的工作原理大致相同。您可以在其中添加独特元素或也检查它们：

>>> my_set = set()

>> my_set.add( "aString" )

>> my_set.add( None )

>> my_set.add( 1 )

>> my_set.add( 2 )

>> my_set.add( 1 )

>> my_set

# Output: {None, 2, 'aString', 1}

然而，与 JavaScript 的主要区别在于 Python 有更多有用的数学集合运算方法，如“差”、“交”、“issubset”、“issuperset”、“union”等。

在 Python 中声明 Set 也有文字形式：

>>> my_set = { None, "caty", "venice", 84}

>> another_set = { "and", "mouse", 44, "a" }

正如您可能已经猜到的那样，两种语言中的设置对于删除重复项确实很有用。在Python中可以做一些不错的事情，比如union：

>>> my_set | another_set

# Output: {'and', 'mouse', None, 'venice', 'caty', 44, 84, 'a'}

或交叉点：

>>> my_set = { None, "caty", "venice", 84, "common_element" }

>> another_set = { "and", "mouse", 44, "a", "common_element" }

>> my_set & another_set

# Output: {'common_element'}

值得一提的是，集合在 JavaScript 和 Python 中都是可变的，但集合内的单个元素仍然是不可变的。

Python 和 JavaScript 中的成员资格运算符

“这个元素是否存在于另一个元素内部”？ 会员运营商知道答案。 Python 和 JavaScript 都有一个名为 in 的成员运算符：

在 Python 中，您可以对几乎任何数据类型使用 in。例如，您可以检查字符是否出现在字符串中：

>>> "o" in "Florence"

# 输出：真

它也适用于列表、元组和字典：

>>> my_list = ["vale", 98, "caty", None]

>> 98 in my_list # Output: True

>> my_tuple = ("vale", "Italy", 105)

>> "italy" in my_tuple # Output: False

my_dict = {

“姓名”：“约翰”，

“城市”：“罗马”，

“年龄”：44

}

my_dict 中的“age” # 输出：True

相反，在 JavaScript 中，in 运算符无论是在字符串上还是在数组上都不能直观地工作：

"a" in ["a", "b", "c"]

// 输出：假

“佛罗伦萨”中的“o”

// 输出：类型错误：无法使用“in”运算符在佛罗伦萨搜索“o”

它对字符串没有用，并且不搜索数组中的实际元素。它寻找的是数组索引：

1 in ["a", "b", "c"]

// 输出：真

考虑到 Array 是 Object 的子类型，并且将其想象为具有以下形状的对象更正确，这是有道理的：

var myArr = {

0：“一”，

1：“b”，

2：“c”

};

回顾一下，JavaScript 中的 in 仅适用于对象键，如果给定键存在于对象中，则返回 true：

var my_obj = {"name": "John", "city": "Rome", "age": 44}

my_obj 中的“名称”

// 输出：真

实例操作符：免责声明

“谁创建了这个对象”？ 实例操作员尝试回答这个问题。现在，在你对我大喊大叫之前，让我先澄清一下。 下表只是我对一个更复杂的故事的心理表征：

正如您将看到的，在这个问题上不可能将 Python 和 JavaScript 1 对1 映射，因为 Python 是真正面向对象的，而 JavaScript 是基于原型的。

如果您了解一点 JavaScript，您就会知道“类”是一种幻觉，每次我们谈论 JavaScript 中的类时，我们都在撒谎。

但让我们用一些例子来揭开我的表格的神秘面纱。

Python 类、isinstance 和 JavaScript instanceof

考虑一个 Python 类，并由它创建一个新对象：

class Person:

def init(self, name, age):

self.name = 姓名

自我年龄 = 年龄

def print_details(self):

details = f"Name: {self.name} - Age: {self.age}"

print(details)

tom = Person("Tom", 89)

tom.print_details()

汤姆是什么？在面向对象编程中，我们说它是一个类实例，即从类蓝图构造的新对象。 Python 中的 isinstance （它是一个函数，而不是一个运算符）如果一个对象似乎是由给定的类构建的，则返回 true。所以在我们的例子中：

>>> isinstance(tom, Person)

# 输出：真

那么用 JavaScript 来代替呢？这是同一个类：

class Person {

constructor(name, age) {

这个.name = 名称

this.age = 年龄

}

printDetails() {

const details = Name: ${this.name} - Age: ${this.age}

console.log(details)

}

}

const tom = new Person("Tom", 44)

汤姆现在怎么样了？让我们来看看：

console.log(tom instanceof Person)

// 输出：真

并非严格的「实例」：tom 只是通过原型链连到 Person.prototype 的普通对象，同时也连到 Object：

console.log(tom instanceof Object)

// 输出：真

因此 JavaScript 的 instanceof 在对象「看起来」由某类构造时返回 true，并不是因为严格意义上的实例，而只是因为 tom 通过原型链连到了 Person.prototype。

我尝试比较两种语言的实例运算符，这是我能想到的最好的结果。我认为 Python 的 isinstance() 和 JavaScript instanceof 相似只是因为它们的行为，但这仍然是一个危险的比较。

如果是这样，您可能会想，为什么要引入 isinstance() 呢？这导致使用下一节......

Python 中的 type() 和 JavaScript 中的 typeof

任何时候你想检查 JavaScript 中给定值的类型，typeof 都是你的朋友：

typeof "alex" // "string"

typeof 9 //“数字”

typeof [1,2] // “对象”

当我们想要检查函数是否存在时，JavaScript 中的 typeof 很方便，例如：

if (typeof window.futureStuff === "undefined") {

window.futureStuff = function () {

// 做事

}

}

来自 JavaScript 的您可能希望在 Python 中使用类似的运算符。 type() 函数可能是您的首选，因为它似乎与 JavaScript 的 typeof 相关。但是 type() 返回不同的东西：

>>> type(tom)

# 输出：

>> type('ahh')

# 输出：<类'str'>

不太方便。 isinstance() 非常适合这里的工作，这就是我在上一节中引入它的原因。它的工作原理如下：

>>> isinstance(9, int)

# 输出：真

>> isinstance(tom, Person)

# 输出：真

>> isinstance("caty", str)

# 输出：真

当您需要根据另一个已知类型检查值时 isinstance() 很有用。然而，可能存在您需要模仿 typeof 的情况。在这种情况下，您仍然可以通过根据内置类型检查对象来使用 Python 的类型函数：

>>> type(9) is int

# 输出：真

Python中如何处理异常：什么是异常？

如果程序能一直运行良好就好了。但现实世界有点疯狂。如果一个程序可能会失败，那么它肯定会失败。

考虑一个简单的 Python 函数。这里可能会出现什么问题？

def divide(a, b):

result = a / b

return result

divide(89, 6)

divide(89, "6")

divide(89, 2)

将代码保存在文件中（我将其命名为 exceptions.py

）并运行它。你会看到很多东西，更重要的是，一个TypeError

:

TypeError: unsupported operand type(s) for /: 'int' and 'str'

它来自对divide的第二次调用，我们试图将一个数字和一个字符串相除，这在Python中是无效的（在JavaScript中也是如此）。程序停止，永远不会到达第三个函数调用。

Python 在这里所做的是引发异常，即一个异常事件会导致我们的代码崩溃。

所以异常是严重的错误，大多数时候可以停止程序。我们如何处理异常决定了失败的程序和可以自行恢复的程序之间的区别。

处理 Python 和 JavaScript 中的同步异常

如果我们处于同步世界，那么在处理异常方面，Python 和 JavaScript 非常相似。

在Python中有try/except

。 try

块应该处理代码的“快乐路径”，而 except

将拦截实际的异常。

前面的示例可以重构为：

def divide(a, b):

try:

return a / b

except TypeError:

print("Oops!")

divide(89, 6)

divide(89, "6")

divide(89, 2)

请注意，您应该指定除 TypeError 之外的错误类型

在我们的例子中。

try/except

或多或少意味着：尝试此代码，如果失败拦截错误并执行其他操作。

现在程序打印“Oops!”，但是它不再停止。所有函数调用（除了出错的函数调用）都会继续运行。

您发现了如何在 Python 中处理异常！ JavaScript 怎么样？

考虑以下示例 (JavaScript)：

function find(member, target) {

return member in target;

}

find("a", "siena");

这是对in的无效使用

运算符（仅适用于对象）。

运行代码，您应该看到：

TypeError: Cannot use 'in' operator to search for 'a' in siena

好的 JavaScript，很公平。为了处理错误，JavaScript 中有 try/catch

。 try

尝试快乐的道路，而catch

处理问题。

我们可以将代码重写为：

function find(member, target) {

try {

return member in target;

} catch (err) {

console.log("Oops!");

}

}

find("a", "siena");

var result = find("city", { name: "Jane", city: "London" });

console.log(result);

现在程序打印“哎呀！”、“true”，并且不再停止。

注意参数err

？让我们在下一节中看看如何使用它。

嘘。查看 "A mostly complete guide to error handling in JavaScript" 以获取有关错误和异常的深入指南。

如何处理异常：在 Python 和 JavaScript 中使用错误消息

处理异常固然很棒，但打印“Oops”却并非如此。最好打印错误消息。

在JavaScript中，我们可以使用catch的参数

，大多数时候叫error

或err

作为一个惯例。它包含实际的异常对象。

反过来，几乎每个异常都有一个名为 message 的属性

，与实际的文本错误。前面的 JavaScript 示例变为：

function find(member, target) {

try {

return member in target;

} catch (err) {

console.log(err.message);

}

}

find("a", "siena");

var result = find("city", { name: "Jane", city: "London" });

console.log(result);

打印：

Cannot use 'in' operator to search for 'a' in siena

真的

比“哎呀”好多了。

在Python中，你可以用as做同样的事情

:

def divide(a, b):

try:

return a / b

except TypeError as err:

print(err)

这个例子不言而喻：拦截TypeError

并创建一个名为 err 的绑定

for convenience. Then print the error.

在 Python 和 JavaScript 中引发自己的异常

与编程中的几乎任何事物一样，即使对于最简单的事物，术语也是模糊的。

以术语抛出为例。当我们开发人员需要终止程序并说“呃，这不好，让我们停止”时，在 JavaScript 中通常会说“抛出”。

错误可能是 JavaScript 引擎抛出的，也可能是开发人员在检查无效值时故意抛出的。

我们也可以说“引发”而不是抛出，并将错误称为“异常”。你为什么会提出或抛出错误？再次考虑 JavaScript 示例。我们知道in

运算符仅适用于对象。

如果我们检查参数 target，当它是字符串时，我们可以 抛出 错误。方法如下：

function find(member, target) {

if (typeof target === "string")

throw TypeError("Target must be an object, got string");

try {

return member in target;

} catch (err) {

console.log(err.message);

}

}

现在调用该函数：

find("a", "siena");

添加 throw 的最终效果是该函数的使用者将得到错误：

Error: Target must be an object, got string

这是预期的，如果目标是字符串，我们希望停止执行，因此代码永远不会到达 try

堵塞。

现在让我们回到Python。我们留下了这段代码：

def divide(a, b):

try:

return a / b

except TypeError as err:

print(err)

这里我们可以在相除之前检查两个参数是否都是数字，然后抛出错误。 throw

Python 中的对应项是 raise

:

def divide(a, b):

if isinstance(a, str) or isinstance(b, str):

raise TypeError("预期，得到对象")

try:

return a / b

except TypeError as err:

print(err)

当调用该函数时：

divide(1, "2")

你应该看到：

TypeError: Expected in, got object

注意这次使用TypeError

for creating a custom error message. If you want you can also extend Exception

创建您自己的自定义异常：

class CustomError(Exception):

pass

def divide(a, b):

if isinstance(a, str) or isinstance(b, str):

raise CustomError("预期，得到对象")

try:

return a / b

except TypeError as err:

print(err)

divide(1, "2")

作为 raise 的替代品

我们也可以使用assert

，方便开发中的调试：

def divide(a, b):

断言 isinstance(a, str), "预期 int，得到对象"

断言 isinstance(a, str), "预期 int，得到对象"

try:

return a / b

except TypeError as err:

print(err)

divide(1, "2")

使用 reStructuredText 编写 Python 代码文档

在 JavaScript 中，我们使用 JSDoc 来添加类、函数参数、函数返回值等的文档。下面是 JSDoc 带注释的函数的示例：

/**

• 将数字提高到指数

• @param {number} value - 要提高的基数

• @param {number} exponent - 指数

• @return {number} - 指数幂

*/

function poooow(value, exponent) {

return value exponent;

}

请注意参数和返回上的“number”类型。通过添加这些类型提示，您可以帮助 IDE 在您使用该函数时为您提供帮助（无双关语）。同样的概念也适用于 Python。

如何在Python中添加代码文档？实际上有很多方法，但reStructuredText是推荐的方法之一。 reStructuredText 是纯文本，可以嵌入到 Python 文档字符串中。

Docstring 只是一个恰好存在于 Python 函数或模块内部的字符串，并充当代码的文档。为了给您提供一些背景信息，这里有一个 Python 函数内的 Docstring 示例：

def string_repeat(string, count):

”“”

重复字符串 N 次

”“”

return string * count

当您决定添加参数和返回值的文档时，reStructuredText 就会发挥作用。这是我们的示例，使用 reStructuredText 进行了丰富：

def string_repeat(string, count):

”“”

重复字符串 N 次

:param string: 要重复的字符串

:param count: 重复次数

:return: 字符串重复N次

”“”

return string * count

我知道，文档可能看起来多余，但如果您决定尝试静态类型，reStructuredText 可以大放异彩。首先，有一点类型理论。

一点类型理论：动态类型与静态类型

Python 和 JavaScript 是动态语言。也就是说，它们给予程序员几乎绝对的自由。例如，在 JavaScript 中，变量可能首先包含字符串，然后更改为包含布尔值。 JavaScript 引擎不会抱怨。 （但是，您可以使用 const 防止重新分配基本类型）。

Python 也做同样的事情。考虑以下示例：

>>> name = "Caty"

>> name = True

>> print(name)

真的

变量 name 最初是字符串类型，但后来更改为布尔类型。大多数时候通过自律，你可以驯服动态打字并在晚上睡觉。在某些情况下，动态类型可能是不允许的，或者风险太大（想想金融系统）。

与动态类型相反，静态类型意味着为每个变量分配一个固定类型，因此变得更难以意外更改类型。

然而，静态类型是一种不同的野兽，学习它可能是一个痛苦的过程，特别是对于初学者来说。

幸运的是，在 JavaScript 和 Python 中，我们都可以使用文档来“逐步打字”。

让我们在下一节中了解如何在 Python 中使用 reStructuredText 添加类型。

使用 reStructuredText 在 Python 中逐步输入

借助 reStructuredText，您可以熟悉 Python 中的静态类型，而无需在代码中添加实际类型。

除了“:param”和“:return”等常见标签之外，reStructuredText还有:type和:rtype，分别用于为参数和返回值添加类型。

如果您想跟随代码进行操作，那么现在是创建并激活 Python 虚拟环境的好时机（在下一节中，我们还需要安装 mypy）：

mkdir docs_and_typings && cd $_

python3 -m venv venv

源 venv/bin/activate

为了说明该示例，请在项目文件夹中创建一个名为 my_str_utils.py 的新文件，其中包含以下函数：

def string_repeat(string, count):

”“”

重复字符串 N 次

:param string: 要重复的字符串

:param count: 重复次数

:return: 字符串重复N次

”“”

return string * count

现在让我们使用 :type 和 :rtype 在 reStructuredText 中添加 类型：

def string_repeat(string, count):

”“”

重复字符串 N 次

:param string: 要重复的字符串

：类型字符串：str

:param count: 重复次数

：类型计数：int

:return: 字符串重复N次

:r 类型：str

”“”

return string * count

这是渐进式打字：您现在拥有一个类型化函数，而没有静态类型系统的认知负担。 大多数 IDE 都能够读取 reStructuredText 类型，例如在 PyCharm 中 当参数的类型与实际参数的类型不匹配时，您会收到警告：

同样在 Pycharm 中，通过单击函数名称并按 Ctrl+Q（或 MacO 上的 F1），您可以获得实际的类型提示：

这些提示与我们将在下一节中看到的“真实类型提示”相同（大多数时候，即使没有 :rtype，PyCharm 也能够通过检查 return 语句来推断返回类型）。

在 JavaScript 中，我们可以使用 JSDoc types 获得相同的效果。

Python 和 JavaScript 中的静态类型

我之前给出的渐进打字的定义有点模糊。确实，您可以通过文档字符串中的代码文档了解静态类型。

但是渐进类型的更严格解释是：在代码中逐渐添加真实类型的过程。现在我所说的“类型”是指可以使用工具检查的类型注释。

JavaScript 有 TypeScript：JavaScript 之上的一层，您可以插入其中。 TypeScript is an actual language on its own，但可以逐渐适应任何 JavaScript 代码库。

Python 也是如此：近年来它获得了 an optional type system based on "type hints"。在这里，我们将在 30,000 英尺的高度看到 Python 类型提示。 一旦掌握了基础知识希望您将能够将类型应用到您的Python代码中。让我们采用上一节中的 string_repeat ：

def string_repeat(string, count):

”“”

重复字符串 N 次

:param string: 要重复的字符串

：类型字符串：str

:param count: 重复次数

：类型计数：int

:return: 字符串重复N次

:r 类型：str

”“”

return string * count

这次我们将去掉 reStructuredText 类型：

def string_repeat(string, count):

”“”

重复字符串 N 次

:param string: 要重复的字符串

:param count: 重复次数

:return: 字符串重复N次

”“”

return string * count

此时 IDE 将失去所有提示。但是如果您还记得上一节中的“真实”类型提示就像“参数：类型”，那么将它们添加到函数签名中应该很容易：

def string_repeat(string: str, count: int):

# 忽略

该样式与 TypeScript 使用的样式类似。您还可以使用 -> type 键入返回值：

def string_repeat(string: str, count: int) -> str:

”“”

重复字符串 N 次

:param string: 要重复的字符串

:param count: 重复次数

:return: 字符串重复N次

”“”

return string * count

对代码进行类型注释后，您可以使用名为 mypy 的工具检查其正确性，这是我们下一节的主题。

使用 mypy 检查类型

mypy 是一个 Python 类型检查器。要在测试项目中安装 mypy，请确保激活虚拟环境，然后运行：

pip install mypy

打开 my_str_utils.py 并尝试将 string_repeat 与 float 而不是 int 一起使用：

def string_repeat(string: str, count: int) -> str:

”“”

重复字符串 N 次

:param string: 要重复的字符串

:param count: 重复次数

:return: 字符串重复N次

”“”

return string * count

string_repeat('hello', 15.6)

IDE 会警告您，但您也可以对 Python 脚本使用 mypy：

mypy my_str_utils.py

mypy 也会警告你：

my_str_utils.py:11: error: Argument 2 to "string_repeat" has incompatible type "float"; expected "int"

在 1 个文件中发现 1 个错误（检查了 1 个源文件

与编译为“普通”JavaScript 的 TypeScript 不同，mypy 不会生成任何代码，它只是检查其类型。

面向 JavaScript 开发人员的 Python：更进一步

您可能感兴趣的其他文章：

感谢您的阅读并继续关注此博客！

本文详细说明本项目如何在 Vue 2（包括低于 2.6 的版本）上通过插件注入与运行时适配，提供与 Vue 3 Composition API 接近的开发体验。内容覆盖安装入口、启用机制、运行时上下文桥接、响应式与计算/侦听适配、插槽与生命周期、兼容策略、执行时序、常见问题与限制，以及关键代码索引。 阅读本文时，请配合 composition-api 源码食用 https://github.com/vuejs/composition-api

一、背景与总体思路

• 目标：在不依赖 Vue 3 内核（Proxy/Effect）的前提下，让 Vue 2 应用可以使用 setup()、ref/reactive/computed/watch 等 Composition API。
• 总体方法：通过 Vue.use(Plugin) 安装插件，在全局混入与选项合并层面“接入” Vue 2 的组件初始化流程，同时复用 Vue 2 的 Observer/Dep/Watcher 作为底层响应式机制。
• 关键桥接：构造 Vue3-like 的“当前实例上下文”（getCurrentInstance() 等），并将返回的 setup 对象或函数正确注入到 Vue 2 的渲染/实例属性中。

二、安装入口与引入即用

• 主入口导出并安装插件：
  • src/index.ts:15 导出 Plugin；src/index.ts:25 在浏览器存在 window.Vue 时自动执行 window.Vue.use(Plugin)。
  • CommonJS 入口：index.js:3-6 按 NODE_ENV 指向 dev/prod 构建文件。
• 安装对象与执行：
  • src/install.ts:80-82 定义 Plugin.install(Vue)；内部调用 install(Vue) 完成注册。
• 为什么“引入文件即可生效”：
  • 当以 CDN 或打包方式引入入口文件，若全局存在 Vue，会自动 Vue.use(Plugin)；否则在应用入口手动 Vue.use(Plugin) 即完成接入。

三、启用机制：setup 合并策略 + 全局混入

• 选项合并策略：
  • src/install.ts:64-74 为 setup 设置合并规则，支持父子组件的 setup 共存与返回对象的融合，约束执行顺序与一致性。
• 全局混入注入：
  • src/mixin.ts:30-42 通过 Vue.mixin 在 beforeCreate 阶段调用 functionApiInit，将 Composition API 接入每个组件实例。
  • 保持渲染上下文：src/mixin.ts:53-59 包装 render，在渲染时激活当前组件实例上下文。
  • 执行顺序控制：src/mixin.ts:75-85 重写 data 解析顺序，保证 setup 先于 data 执行，以避免低版本 Vue 的选项时序差异导致行为不一致。
• setup 返回值处理：
  • 返回函数：作为渲染函数使用（src/mixin.ts:106-114），直接参与 VNode 生成。
  • 返回对象：对 ref/reactive/function 等进行自动解包与保护，并挂载到实例上（src/mixin.ts:115-147）。
• 局部响应式绑定：
  • 为包含响应式子项（如数组）的对象执行局部 defineReactive，减小副作用面（src/mixin.ts:161-183）。

四、运行时上下文桥接（Vue2 → Vue3 风格）

• 当前实例管理与暴露：
  • getCurrentInstance()：src/runtimeContext.ts:232-234。
  • 激活/恢复实例：src/runtimeContext.ts:104-110,261-268，确保生命周期与渲染期间上下文一致。
• Vue3-like 实例描述：
  • 将 Vue2 vm 映射为 ComponentInternalInstance 近似结构（src/runtimeContext.ts:241-320）。
• 安装状态与多实例防护：
  • 已安装判定与重复安装警告：src/runtimeContext.ts:45-48,72-83；src/install.ts:43-49。
  • 版本校验提示：src/install.ts:52-62。

五、响应式适配：reactive/readonly/ref

• 复用 Vue2 响应式：
  • observe/defineReactive 作为响应式基石（src/reactivity/reactive.ts:231-249）。
  • 访问控制与自动解包：defineAccessControl/proxy（src/reactivity/reactive.ts:52-114），在读取时自动解包 ref，在写入只读对象时进行拦截。
  • 原始对象关联与跳过标记：通过 __ob__、SKIPFLAG/rawSet 标识（src/reactivity/reactive.ts:160-176,251-281）。

六、计算属性与侦听（computed/watch/watchEffect）

• computed 适配：
  • 有 vm：直接用 Vue2 Watcher 构建 lazy 计算，提供 evaluate/depend（src/apis/computed.ts:26-57）。
  • 无 vm/SSR：创建“宿主组件”承载 computed（src/apis/computed.ts:62-83）。
• watch / watchEffect：
  • 基于 $watch(getter, callback, { immediate, deep, sync })（src/apis/watch.ts:379-387）。
  • 补丁清理：劫持 teardown 注入副作用清理（src/apis/watch.ts:192-200,402-407），避免内存泄漏与残留订阅。

七、插槽与生命周期

• 插槽代理：
  • 将 Vue2 插槽转换为函数式访问，使其更接近 Vue3 的 slots 使用范式（src/utils/instance.ts:161-180、src/utils/helper.ts:41-55）。
• 生命周期钩子：
  • 统一包装调用并维护当前实例上下文（wrapHookCall），各 onMounted/onUpdated/... 以同样方式暴露（src/apis/lifecycle.ts:33-58）。

八、对 Vue<2.6 的兼容策略

• 不依赖 Vue3 内核：完全复用 Vue2 的 Observer/Dep/Watcher。
• 能力缺失的场景下提供回退：通过宿主组件或代理机制补足（例如无 vm 的 computed）。
• 插槽与 scopedSlots 的差异用代理函数化统一访问，屏蔽低版本差异。
• setup 专属合并与时序控制，避免低版本选项解析导致的执行顺序问题。
• 严格的安装/多实例防护，降低复杂构建/微前端场景下上下文错配的风险。

九、典型执行时序（组件创建）

1. 应用引入插件，自动或手动 Vue.use(Plugin)（src/index.ts:25）。
2. 全局混入生效，组件在 beforeCreate 进入 functionApiInit（src/mixin.ts:30-42）。
3. 包装渲染与数据解析，保证 setup 优先执行（src/mixin.ts:53-59,75-85）。
4. 构造 SetupContext 并执行 setup：
   • 返回函数 → 设为 render（src/mixin.ts:106-114）。
   • 返回对象 → 自动解包并挂载为实例属性（src/mixin.ts:115-147）。
5. 如返回值包含响应式子项，进行局部 defineReactive（src/mixin.ts:161-183）。
6. 生命周期钩子按需调用，期间激活当前实例上下文（src/apis/lifecycle.ts:33-58、src/runtimeContext.ts:104-110）。

十、常见问题与限制

• 必须先安装：未 Vue.use(Plugin) 就使用 API 会触发断言/警告（src/runtimeContext.ts:50-57）。
• 重复安装与多 Vue 构造：会给出警告，避免上下文错配（src/install.ts:43-49、src/runtimeContext.ts:72-83）。
• 行为差异：由于底层是 Vue2 的响应式系统，个别边界行为与 Vue3 可能不完全一致（例如深层 Proxy 行为、依赖收集的粒度）。
• SSR/无实例：computed/watch 会走宿主组件或降级路径，性能与时序需关注。

十一、关键代码索引（含行号）

• 入口与安装：
  • src/index.ts:15,25；index.js:3-6
  • 插件安装：src/install.ts:64-78,80-82
• 运行时上下文：
  • 安装状态与校验：src/runtimeContext.ts:45-48,72-83
  • 当前实例与映射：src/runtimeContext.ts:104-110,232-234,241-320,261-268
• 混入与 setup 注入：
  • src/mixin.ts:30-42,53-59,65-73,75-85,87-159,161-183
• 响应式适配：
  • src/reactivity/reactive.ts:52-114,160-176,231-249,251-281
• computed/watch：
  • src/apis/computed.ts:26-57,62-83
  • src/apis/watch.ts:192-200,379-387,402-407
• 插槽代理：
  • src/utils/instance.ts:161-180；src/utils/helper.ts:41-55
• 生命周期：
  • src/apis/lifecycle.ts:33-58

十二、快速使用指南

• 安装：在入口文件中执行 import Plugin from '...' ; Vue.use(Plugin)。
• 组件：
  • 使用 setup(props, ctx) 返回对象或渲染函数；对象中使用 ref/reactive/computed 等 API。
  • 在 onMounted/onUpdated/... 中编写副作用逻辑，watch/watchEffect 根据需要侦听与清理。

十三、总结

• 该插件通过安装与全局混入，将 Composition API 嵌入到 Vue 2 的组件初始化与响应式系统之中。
• 响应式与计算/侦听复用 Vue2 的 Observer/Dep/Watcher，并在缺失能力的场景下提供宿主/代理回退。
• 运行时上下文桥接保证了 getCurrentInstance、插槽、生命周期的可用与一致体验，从而实现“引入即用”的 Composition API 支持。

可是当我拿起单词表来，却发现连十分钟都不能安心的去背单词，各种破碎繁杂的思绪纷至沓来，让我想放下书本，刷一下知乎，看一下朋友圈，逗逗狗狗。

突然惊觉，努力并不是一种选择，它是一种能力，它需要心神凝聚，需要很好的执行力，需要心静，需要专注，这些都是需要在漫长的生活中一点一滴培养和固化的。

一个人长久自律的努力即是一种修行

努力的方向或许每个人是不同的，或是钱财名利或是想赢或是梦想或是平淡生活，但努力这种能力是相通的，这种修行路漫漫其修远兮，需上下而求索。

努力本身并不能带来幸福，达成了什么，赢得了什么，这些努力的成果有时候甚至和你的初衷背道而驰。但是一个幸福的人无疑在生活中拥有很好的心性和智慧，而幸福的修行和努力的能力是殊途同归的，它们的内核是相通的。

我不愿眼里的神采追逐在手机屏幕上，我还要奔跑还要去看看这世界的大好河山。

我不愿手指的灵性委顿于零食键盘间，我还要写故事要画画要抚摸夜里穿越过亿万年的星光。

努力，修行，努力修行。

若有一天我匍匐在菩提树下，愿不是因为我疲懒无力。

而是我跨越千山万水终于归于原点的虔诚。

幸而此刻并不太晚，幸而永远不会太晚。

和自己争夺自己。

Vue3提供了多种组件间通信的方式，满足不同场景的需求。

主要的组件通信方式：

1. Props向下传递：父组件通过props向子组件传递数据。

// 子组件定义props
export function defineProps<PropNames extends string = string>(
  props: PropNames[]
): Readonly<{ [key in PropNames]?: any }>

2. 事件向上传递：子组件通过事件向父组件发送消息。

// 子组件定义emits
export function defineEmits<EE extends string = string>(
  emitOptions: EE[]
): EmitFn<EE[]>

// 在setup上下文中使用emit
setup(props, { emit }) {
  emit('update', newValue)
}

3. v-model双向绑定：在父子组件间建立双向数据绑定。

4. 依赖注入：使用provide和inject在祖先和后代组件间传递数据。

export function provide<T>(key: InjectionKey<T> | string | number, value: T) {
  // ...
}

export function inject<T>(key: InjectionKey<T> | string): T | undefined

5. 事件总线：在Vue3中，可以使用外部的事件库或创建一个空的Vue实例作为事件中心。

6. Vuex/Pinia状态管理：对于复杂应用，可以使用状态管理库集中管理共享状态。

7. 组合式API：通过setup函数和组合式API，可以更灵活地组织和共享组件逻辑。

export type SetupFunction<
  Props,
  RawBindings = {},
  Emits extends EmitsOptions = {}
> = (
  this: void,
  props: Readonly<Props>,
  ctx: SetupContext<Emits>
) => RawBindings | (() => VNode | null) | void

8. Refs引用：通过ref属性获取子组件实例，直接调用其方法或访问其数据。

选择合适的通信方式取决于组件间的关系和通信的复杂度，合理使用这些方式可以构建出清晰、可维护的组件架构。

Vue3采用了多种渲染优化技术来提高性能，这些技术主要体现在虚拟DOM的实现和响应式系统中。

主要的渲染优化技术：

1. 虚拟DOM：Vue使用虚拟DOM来最小化实际DOM操作，只更新必要的部分。

2. diff算法优化：Vue3改进了diff算法，通过静态提升、事件缓存等技术减少了比对开销。

3. 响应式系统：通过精确的依赖追踪，Vue只重新渲染依赖已更改数据的组件。

4. 编译优化：Vue3的模板编译器能够识别静态内容，减少运行时的工作量。

5. 异步更新队列：Vue将DOM更新操作缓存在队列中，然后一次性执行，避免不必要的计算和渲染。

export function effect(fn: () => any, scheduler?: (cb: any) => void) {
  const watcher = new Watcher(currentInstance, fn, noop, {
    sync: true
  })
  if (scheduler) {
    watcher.update = () => {
      scheduler(() => watcher.run())
    }
  }
}

6. 计算属性缓存：计算属性只有在其依赖项变化时才会重新计算。

if (watcher.dirty) {
  watcher.evaluate()
}

7. 组件实例复用：通过key属性，Vue可以在列表渲染中复用组件实例，减少创建和销毁的开销。

这些优化技术共同作用，使Vue能够在处理复杂UI时保持高性能。

Vue3中的自定义指令允许开发者直接操作DOM元素，为框架增加了更多的灵活性。

自定义指令的核心实现：

1. 指令钩子函数：指令定义了一系列的钩子函数，对应元素的不同生命周期。

   • bind：指令第一次绑定到元素时调用
   • inserted：被绑定元素插入父节点时调用
   • update：所在组件的VNode更新时调用
   • componentUpdated：指令所在组件的VNode及其子VNode全部更新后调用
   • unbind：指令与元素解绑时调用

2. 指令注册：可以全局注册或组件内注册。

Vue.directive('my-directive', {
  bind(el, binding, vnode) {
    // 元素首次绑定指令时的逻辑
  },
  update(el, binding, vnode, oldVnode) {
    // 元素更新时的逻辑
  }
})

3. 指令参数：每个钩子函数接收以下参数：

   • el：指令所绑定的元素
   • binding：包含指令的各种属性的对象
   • vnode：Vue编译生成的虚拟节点
   • oldVnode：上一个虚拟节点（仅在update和componentUpdated钩子中可用）

4. 动态参数：Vue3支持动态指令参数，可以根据组件实例数据动态改变。

<div v-my-directive:[dynamicArg]="value"></div>

自定义指令为处理DOM操作提供了强大的工具，特别适合于需要直接操作DOM的场景，如管理焦点、滚动行为、或集成第三方库。

Vue3中组件生命周期钩子的实现位于src/v3/apiLifecycle.ts，它定义了组件从创建到销毁的各个阶段。

生命周期钩子的执行顺序：

1. 创建阶段：

   • onBeforeMount：组件挂载到DOM前调用
   • onMounted：组件挂载到DOM后调用

2. 更新阶段：

   • onBeforeUpdate：组件更新前调用
   • onUpdated：组件更新后调用

3. 销毁阶段：

   • onBeforeUnmount：组件卸载前调用
   • onUnmounted：组件卸载后调用

4. 特殊钩子：

   • onActivated：被keep-alive缓存的组件激活时调用
   • onDeactivated：被keep-alive缓存的组件停用时调用
   • onErrorCaptured：捕获后代组件错误时调用
   • onRenderTracked：跟踪虚拟DOM重新渲染时调用
   • onRenderTriggered：虚拟DOM重新渲染被触发时调用

生命周期钩子的实现机制：

function createLifeCycle<T extends (...args: any[]) => any = () => void>(
  hookName: string
) {
  return (fn: T, target: any = currentInstance) => {
    if (!target) {
      __DEV__ &&
        warn(
          `${formatName(hookName)} is called when there is no active component instance.`
        )
      return
    }
    return injectHook(target, hookName, fn)
  }
}

function injectHook(instance: Component, hookName: string, fn: () => void) {
  const options = instance.$options
  options[hookName] = mergeLifecycleHook(options[hookName], fn)
}

在父子组件嵌套的情况下，生命周期钩子的执行顺序是：

• 创建：父beforeCreate -> 父created -> 父beforeMount -> 子beforeCreate -> 子created -> 子beforeMount -> 子mounted -> 父mounted
• 更新：父beforeUpdate -> 子beforeUpdate -> 子updated -> 父updated
• 销毁：父beforeUnmount -> 子beforeUnmount -> 子unmounted -> 父unmounted

理解生命周期钩子的执行顺序对于正确管理组件状态和资源非常重要。

Vue3的响应式系统虽然强大，但也存在一些限制，这些限制主要体现在reactive.ts和相关文件中。

主要限制包括：

1. 数组索引和长度变化：虽然Vue可以检测到通过索引设置数组元素的变化，但这种操作不是响应式的最佳实践。

if (__DEV__) {
  if (isArray(target)) {
    warn(
      `Avoid using Array as root value for ${
        shallow ? `shallowReactive()` : `reactive()`
      } as it cannot be tracked in watch() or watchEffect(). Use ${
        shallow ? `shallowRef()` : `ref()`
      } instead. This is a Vue-2-only limitation.`
    )
  }
}

2. 新增属性：对于已创建的响应式对象，直接添加新属性不会触发更新，需要使用Vue.set或扩展运算符创建新对象。

3. 删除属性：同样，直接删除属性也不会触发更新，需要使用Vue.delete。

4. Map和Set：在Vue2兼容模式下，不支持Map和Set等集合类型的响应式。

if (isCollectionType(target)) {
  warn(
    `Vue 2 does not support reactive collection types such as Map or Set.`
  )
}

5. 原始值包装：原始值（如字符串、数字）需要通过ref包装才能变成响应式。

if (target == null || isPrimitive(target)) {
  warn(`value cannot be made reactive: ${String(target)}`)
}

6. 深层嵌套对象：过深的对象嵌套可能导致性能问题，因为Vue会递归地将每个嵌套对象转换为响应式。

了解这些限制有助于我们更好地使用Vue的响应式系统，避免常见的陷阱。