最近阅读 Vue 3 源码时,我从一个看似简单的构造函数开始,重新理解了 TypeScript 的参数属性。例如 constructor(public fn: () => T) 中的 public fn 不只是声明参数,还会自动创建实例属性,相当于在构造函数里执行 this.fn = fn。这让我意识到,熟悉语言特性有助于更准确地阅读框架代码。
继续追踪相关实现后,我也看到,源码通常不会在构造函数中立即执行传入的函数,而是先保存它,再根据当前的响应式作用域决定是否收集或停用副作用。看懂这一过程,需要结合类的属性、标志位和调用链一起分析,不能只盯着某一小段代码。
研究 Vue 3 源码的过程,让我对响应式系统的组织方式有了更具体的认识,也提升了阅读大型项目的能力。遇到不熟悉的实现时,我会先确认数据在哪里保存,再追踪它何时被读取、修改和调用。这样的学习方式,不仅帮助我理解 Vue,也让我更有信心分析其他开源项目。
public fn 是 TypeScript 的参数属性语法,不能直接用于 JavaScript 类构造函数参数,会报语法错误。
TypeScript 中要指定类型,例如:
class TestCon {
constructor(public fn: () => void) {}
}
如果写 JavaScript,则要手动赋值:
class TestCon {
constructor(fn) {
this.fn = fn;
}
}