上周六，我家七岁的乐乐蹲在书桌前，盯着我电脑屏幕上一段标着render()的代码看了五分钟，突然抬头问：‘爸爸，这个return是不是像我们搭乐高时，把零件按顺序拼好，最后推给小火车运走？’
框架不是黑盒子，是可拆解的积木
很多家长一听到‘框架核心源码解读’就皱眉——这不应该是程序员才啃的硬骨头吗？其实不然。所谓‘框架’，比如React、Vue这些，本质就是一套帮人省力写网页的‘工具包’。就像孩子学骑自行车，辅助轮不是终点，而是过渡；框架源码也不是用来背的，而是用来‘认脸’‘摸结构’的。
举个例子，Vue 3 的响应式核心里有段关键逻辑：
function reactive(target) {
return new Proxy(target, {
get(obj, key) {
track(obj, key); // 记录谁在看这个属性
return obj[key];
},
set(obj, key, value) {
obj[key] = value;
trigger(obj, key); // 通知所有关注者：它变了！
return true;
}
});
}这段代码，完全可以转化成亲子对话：
‘你看，这个get就像你翻相册找妈妈照片——一翻到那页，相册就悄悄记下：‘乐乐刚看了妈妈’；set就像你给照片贴了个新贴纸，相册马上喊：‘快看！妈妈的照片更新啦！’——所有正在看这张照片的人，都会立刻收到消息。’
亲子共读源码，重在‘看见逻辑’，不在‘运行成功’
不需要装Node、不用跑项目。打开GitHub，搜vue-next/packages/reactivity/src/reactive.ts，拉到最上面，读第一行注释：// Reactive API: create a reactive proxy for an object
就带着孩子一起念：‘创建一个会自己动的镜子，照啥变啥。’
再往下，看到const rawToReactive = new WeakMap()，可以比划着说：‘这是个小本子，专门记下：哪个旧盒子（raw）对应哪个会动的镜子（reactive）。就像你记得：蓝色铅笔盒里装的是蜡笔，红色铁盒里装的是磁力片。’
从‘抄一行’开始，比‘讲十分钟原理’更有效
上周末，我和乐乐一起做了件小事：把Vue源码里track()函数的简化版手抄到纸上，然后用不同颜色笔圈出‘谁在看’（target）、‘看什么’（key）、‘记在哪’（dep）。抄完，他指着dep说：‘这不就是我的观察员小组嘛？我当组长，小熊、小鸭子是组员，它们都得听我指挥！’
那一刻，他没记住WeakMap，但记住了‘有人盯梢、有人广播、有人响应’这个三层关系——而这，正是框架最朴实的核心骨架。
教育不是填满容器，是点燃火种。孩子未必将来写代码，但他若能在十岁就理解‘变化如何被追踪’‘指令如何被分发’，那他未来面对任何系统——家庭规则、学校流程、甚至社区公约——都会多一分拆解的耐心和重建的底气。