研究 Vue 3 源码的收获

excel2026-10-07 20:37

最近阅读 Vue 3 源码时，我从一个看似简单的构造函数开始，重新理解了 TypeScript 的参数属性。例如 constructor(public fn: () => T) 中的 public fn 不只是声明参数，还会自动创建实例属性，相当于在构造函数里执行 this.fn = fn。这让我意识到，熟悉语言特性有助于更准确地阅读框架代码。

继续追踪相关实现后，我也看到，源码通常不会在构造函数中立即执行传入的函数，而是先保存它，再根据当前的响应式作用域决定是否收集或停用副作用。看懂这一过程，需要结合类的属性、标志位和调用链一起分析，不能只盯着某一小段代码。

研究 Vue 3 源码的过程，让我对响应式系统的组织方式有了更具体的认识，也提升了阅读大型项目的能力。遇到不熟悉的实现时，我会先确认数据在哪里保存，再追踪它何时被读取、修改和调用。这样的学习方式，不仅帮助我理解 Vue，也让我更有信心分析其他开源项目。

public fn 是 TypeScript 的参数属性语法，不能直接用于 JavaScript 类构造函数参数，会报语法错误。

TypeScript 中要指定类型，例如：

typescript 复制代码

class TestCon {
  constructor(public fn: () => void) {}
}

如果写 JavaScript，则要手动赋值：

kotlin 复制代码

class TestCon {
  constructor(fn) {
    this.fn = fn;
  }
}