架构师应该手把手教吗？

[ghost]

今天发生了一件事，让我有深深的挫败感。

先说一下背景，我带了一个初级开发，女生，跟着我有10个月了吧。非本专业（测控还是啥专业，大学也学过C、汇编等编程，由UI转向前端开发），进项目组前有将近一年的开发经验。

进项目组时，由于时间紧，就没有系统的给她讲Vue基础（她之前接触过vue，所以我就放心的认为应该没问题，毕竟vue也比较简单），所以我只是介绍了主体架构，以及一些关键技术。

在开发之初，她就表现出了一些问题，比如弄不明白数据流，不知道数据从哪里来，又该传到哪里去（使用了Vuex）；代码的逻辑性很差，代码不规范，没有一点复用或者封装概念；项目中有异步发起请求，然后把返回值作为prop传递给子组件这种情形，她不知道在子组件怎么监听这个异步返回的数据，等等问题。

这些问题，在开始我都认为这不是问题，经验不够，能够理解。因此，我一个点一个点，一段代码一段代码的带着她写。跟她讲原理，讲流程，讲规范，讲实现方法。她也会认真的听，还会做笔记。

但是，给她安排的任务，她基本不能独立完成。我一天有将近一半的时间，都是在她座位上，一个组件一个组件，一个方法一个方法的教她写。终于，她能够自己做一些简单的页面了。

总算可以上路了哈。

后来，我发现她暴露出的问题越来越多。有时候要对后端返回的数据进行处理，比如一些list的结构要进行转换，她不会；在发起请求之前，要对数据进行拼接，她不会；项目中使用了Promise，她不会；甚至，怎么使用回调，怎么封装参数，她都不会。

我意识到，是她的基础太差。好吧，讲基础。我给她专题讲了数组，讲了数组常见使用方法，比如map、filter、find等等；专题讲了函数，比如函数的形式、参数、返回值、作用域、闭包，call和apply等等；再专题讲了异步处理和promise，讲了promise的一些常见用法和原理。

Vue基础也随着开发周期一并给她讲了。Vue的生命周期，rops与data，.sync与v-model，computed与watch，mixins等；Vuex的数据流以及它的辅助方法；Vue-router的用法；axios的用法；包括我在项目中封装的一些模块的实现，等等所有内容。

期间我们也沟通过一次（实际上我们很多时候下班都一起走的，这次是比较正式的沟通，具体几月份不记得了），她对我说，她很浮躁，自己什么都不会，感觉不适合做程序员。我鼓励她，“没事的，有我呢，我带着你做”，“总有一天你也会很厉害的”。

一些复杂的业务逻辑，或者一些复杂的页面，我都会帮她分析，怎么才能更好的拆分业务，怎么才能合理的划分组件，如何进行设计才能方便维护等等。

她也算学习态度比较端正，所有的东西都做了笔记。这也是我比较欣赏的点。

但是，在我把这些都讲过之后，情形并没有什么好转。需求稍微一变化，或者场景稍微变化，有些甚至一模一样的问题，她都不能自己完成；同样的用法，讲过好几次的东西，换个地方就不会写；出了问题，不知道怎么定位，不知道怎么解决。

她的脑袋是空白的。

我终于也开始变得毛躁，有一次我甚至发了脾气，你这写的什么玩意。估计我当时也火挺大的，她一个人偷偷的哭，还给我发消息说，她也想好好写，但是真的不知道怎么写。作为前端负责人，我找她谈了话，沟通了下我想要的结果，想要的状态，现在表现出来的问题，怎么解决，等等。当然，我不能放弃她，也少不了鼓励。

我分析，她是缺乏逻辑思维以及全局空间概念。作为非科班出身，本身就缺乏编程的基础思维，对于我们来说是常识性的问题，她可能就理解不了；然后缺乏逻辑思维，不够严谨，不能举一反三，也不能自己做总结；当然也不能对整个项目或者程序，建立起一个完整的空间概念，理解不了各部分是如何工作的，如何联系的。

因此，我主要从几个方面来改善这个问题。

一，完完整整的，从头开始讲一遍。先讲了前端的发展，为什么会出现vue，什么是mvvm，什么是单页面应用，vue是怎么启动的，怎么和页面互动的，什么是组件，组件怎么加载的，怎么把模板渲染到页面的，生命周期都做了哪些事，在生命周期的钩子函数中可以做哪些事，怎么解析子组件的，怎么响应路由的，如何请求后端数据，组件之间怎么传递数据。然后是项目中各部分模块的作用，这些模块是怎么协作的，一些关键模块是怎么实现的，等等。

二，基础不能丢。我给她安排了去学习红宝书基础，包括ES6，promise基础；给她出了一些练习题；给她找了一些博客文章；然后根据情况进行了一些主题讲解。

三，也是最主要的部分，让她做归纳总结，并形成分享文档。因为，只有自己决定去写文档，并把自己的思维正确的书写出来，才是真正的理解了一个问题。

四，有意识的培养她独立解决问题的能力，对于一些常见问题或者曾经出现过的问题，拒绝直接回答，而是进行引导，让她自己去寻求方法解决问题。只有自己解决的问题，经验才是自己的。

五，建立职业信心。帮助她认识前端的整体形态，生态环境，技术发展；帮助她在工作中寻找自己的成就感，比如在同事、领导面前去分享她的文档，她的成果，甚至不止一次在领导面前表示她是我们的主要成员；让她承担一些较重要模块的开发，让她能在工作中接触更多的学习机会。

这期间，我还有感而发的写了另外一篇文章《如何对待那些有点“笨”的员工》。大致也是讲述了上面的提到的一些方法，这篇文章也让我平静了一些。

我给她讲解了现有项目的架构。怎么做路由分发的，路由结构是如何组织的，权限是如何处理的，数据状态是怎么处理的，请求是怎么处理的，拦截器是怎么用的，封装的Vuex是如何工作的；以及webpack、babel、postcss、eslint等工具如何工作，怎么使用脚手架，怎么使用git仓库，前后端怎么分离开发，如何打包构建，如何进行部署等等。

另外，我还给她做了一些软实力的辅导。比如常见问题有哪些，怎么排查这类问题，怎么使用调试工具，到哪里去寻找答案，怎么有条理的清楚的描述自己的问题，在请教问题之前自己要做哪些工作；介绍了前端社区圈子，优秀的博客与文章，github的使用方法，程序员礼仪等等；介绍了技术文档的写作方法，结构规范，条理逻辑性，如何使用常用文档工具；之后也介绍了如何与后端进行沟通，怎么对待和处理需求，等等内容。

情况向着好的方向发展，她已经能够独立的完成一些功能的开发。这期间她也给我使过几次性子，可能是我太恨铁不成钢了吧，但我是把工作和生活分的分开的人，所以这些问题都很快的解决了。后来，在教师节那天，她专门给我发消息，感谢我的指导，称我是人生中重要的老师，总能在她不同的阶段，教给她不同的知识和技能。

总体来说，她是一个好员工，我经常看到她在加班，会主动的来问问题，也会自己去看官方文档，也会自己去做总结，写文档。她人缘很好，刚来公司没多久，到处都是她的伙伴，跟同事关系非常好。她自己也在做微商，偶尔会被我碰到在刷微信，但是这个都无关紧要。项目接近尾声，我们已经修改了一段时间的BUG，因此也就有了更多的时间可以自己来安排。

今天，她修改BUG遇到一个问题，关于组件之间怎么传递数据的问题。有如下的组件结构，其中D是一个表单组件，其中包括表单的字段验证等内容。C是个弹窗，在点击确定时，根据D的输入值做一些逻辑操作，然后关闭弹窗。在关闭弹窗后，B组件接下来的一些逻辑，也会使用到这个输入值。

她一开始的做法是，在A组件通过props传递一个空值，然后通过.sync来层层取得变化后的值。其实，这种方式也能实现功能，但是容易出现循环。

// A.vue
<A>
  <B></B>
  <C></C>
</A>

// C.vue
<C>
  <D></D>
</C>

这里的关键点有两个：1. D实际上不需要C传递进来的默认值，只有C在事件触发时，获得D的输入值即可；2. 可以通过A做中转，把值从C传递到B，A与C可以是.sync双向的，但A与B是单向的，不需要.sync。

给她画了一个类似上面的一个图示，然后分析了上面的关键点，告诉她在C与D之间，可以通过事件机制拿到数据，或者主动调用D的方法拿到数据。

“C与D之间，不需要`.sync`，直接使用事件机制获取数据，或者调用它的方法拿到数据”
“我只知道`.sync`和`$emit`可以传递数据，不知道啥是事件机制”
“`$eimt`不就是事件机制吗”
“`$eimt`不是更新`.sync`的值的吗？”
“...”“我记得我给你讲过吧，`.sync`只是一个语法糖，它也是基于事件机制的”
“...”
“你这个地方只需要监听一个的自定义事件就行”
“...”（一脸懵比）

然后，我隐隐感到自己要暴走了，我曾经至少讲过两遍.sync的实现原理了，而且也专门总结过props与事件机制父子组件通信的方法，项目中也有很多处用到这这种方式。

我给她找了官方文档，给她重新解释了一边自定义事件以及.sync的实现原理。实际上，她告诉我，她自己也看过很多次这段内容。

然后，我看着她，一个步骤一个步骤的终于纠正正确了。

“另外，`v-model`与`.sync`的实现方式基本一样，只不过绑定的属性是`value`，抛出的事件是`input`”
“...”又一脸懵比

我想静静。

“现在，你试试直接调用它的方法，通过方法返回数据吧。”
“怎么调用啊？”

这次，我真的快要发飙了。整整十个月，已经写了四十几个Vue页面，自己看文档也不下三遍，项目中到处都是类似的例子代码，我讲了至少不下三遍。但是，她完全没有一点概念，完全没有自己的一点理解，甚至完全没有一点印象。

我感受到深深的挫败感，整整十个月，她连Vue基础都没弄懂。

我像一个妈妈一样，手把手的教，最后她仍然跟我的预期相差甚远。

这让我再一次回想起之前的出现过的几次情况。有一次出现一个问题，弹窗在点击确定时，会发起几个请求，当请求成功之后，需要做一些业务处理，还需要弹出一个消息提示，提示的文字内容通过国际化加载，因此要调用this.$t。控制台信息在报错$t找不到，她自己排查了很久都解决不了这个问题，然后来问我。

她跑过来给我说，“你这个$t有问题”。

因为我之前，给她讲过国际化的使用方式。比如：

// test.vue
import i18n from  "./i18n";

export default {
    name: 'test',
    props: {
        name: {
            type: String,
            default: i18n.t("") // 当实例还没开始初始化时，直接使用`t`方法
        }
    },
    data() {
        return {
            label: this.$t() // 实例已经初始化之后，使用`this.$t`
        };
    }
};

当这里出现$t找不到之后，她就一直在尝试直接使用t方法，然后怎么弄都不对。实际上，我曾经给她讲过两次这个问题，第一次是介绍使用国际化方案时，介绍了直接使用t方法和使用this.$t的区别；第二次跟这个很相似，也是找不到$t，因为this不存在，但是出现的位置是在props。并且还有一次，因为弹窗被关闭，导致this找不到，从而出现过一次BUG。

但是，她只记得要么使用t，要么使用this.$t。因此，她就一直在纠结，最后跑过来给我说：“你这个$t和t方法都不好使”。呵，什么叫我的东西不好使，明明是自己没有去理解，从一开始解决问题的方向就出现了问题。

最后，我在她笔记本上找到了她之前记的笔记，就是我曾经给她讲国际化方案使用场景时的笔记。但是，她完全没有印象，她不知道这两种方式的使用区别，只知道要么使用t，要么使用this.$t，当然也就考虑不到this的问题。

还有很多次例子，这里不一一列举，综合起来其实就是，缺乏钻研精神。

她只限于我给她讲过的东西，然后只限于当时理解和记住的东西，最后就只限于许久之后还有模糊印象的东西。她不会自己去钻研，不会自己去理解，不会自己去尝试。记笔记只是一个态度，但是没起实际效果；看文档，看博客，有没有理解懂不懂都不重要，重要的是看过。

拿上面的国际化那个举例，作为一个有钻研精神的人，在我讲过用法之后，他下来之后会干什么事：首先去搜索一下i18n这个库，看看它的官方文档，看看这个库是做什么用的，它提供了哪些功能，有哪些Api，我们应该怎么使用，然后我们自己项目中是怎么去包装使用的，它与element-ui是如何配合使用的，为什么能使用this.$t，那么t方法又是干什么用的，讲过的例子自己也会去尝试敲一遍，最后再形成自己的理解。

但是，这些她都没有做过。导致，进项目组10个月，她还没有完全理清楚项目的结构，不知道发起一个请求要经过哪些步骤，不知道我们的页面与平台项目的关系，不知道项目是怎么部署的；甚至不知道vue-router有哪些守卫钩子函数，他们分别在什么时候执行，不知道权限怎么控制的，不知道菜单与导航是怎么操作的，等等等等。更别说，webpack要怎么使用，babel是干什么用的，postcss使用到了哪些插件，怎么发布和更新一个npm包。

一个有钻研精神的人，应该是什么样的状态：看到一句自己没见过的代码，我要去把它弄懂；看到使用了一个新工具，我去把它弄懂；看到引用了一个依赖库，我去把它弄懂。总体来说，要做到每一段代码，每一个流程都要心中有数。

有人会说，你应该教她方法，而不是教她死知识。我想说两点，第一，我们是成年人，这是在工作，不是在学校，工作要求的是效率，要求的是结果，要求的是质量，学校才会给你时间，慢慢的去培养习惯；第二，我真的是在教她方法，我平时给她讲问题，都是用笔在纸上，给她举例，列重点，教她怎么整理自己的思维，教她怎么把自己的思维用图、用流程来转化，教她怎么一步步的搜索排查问题，教她怎么学习、到哪里去学习，怎么才能把东西转化为自己的，怎么才能快速提高自己。

人各有异，我带的另外一个应届实习生，我只带了三个月，而且我很少管他，基本都是他自己根据我安排的去学习，他三个月时间就表现非常优秀。因为，他会思考，他会质疑。比如他曾经就问过我几个问题，“为什么我们项目的CSS不用一个单独的文件和文件夹进行管理，然后有些页面里面的样式基本一样，为什么不直接复用呢”，“通过一个props传一个对象，然后在子组件用props来初始化一个data变量，为什么要进行一次深拷贝呢”，诸如此类问题。

但是，这些问题她从来没有想过。

一份好奇，一份探索，会影响一个人最终的成就。

本文没有结尾，需要结尾的童鞋，请自己总结。