他写出了 Vue,却做不对这十道 Vue 笔试题

有十道关于 Vue 的选择题,在群里引出了一众社区知名人士竞折腰,最后钓出了 Evan You 本人亲自挑战……

然后他自己也做错了(其中的某两道)。

鲁迅会做错鲁迅文选的阅读理解?有截图为证:

所以,只要答对这十道题里的九道以上,你就实打实地(在做题这个维度上)超越了尤大,比他更懂 Vue 了噢!是不是很心动?

其实要求都不用这么高,只要做对六七道,就已经可以吊打一群小有名气的社区选手了。

所以到底都是些什么问题呢?你可以点击 [原题传送门] 前往观光,但为了表示敬意,这里特地手打了一遍搬运过来:

1. Vue 实例的 data 属性,可以在哪些生命周期中获取到?
A. beforeCreate
B. created
C. beforeMount
D. mounted

2. 下列对 Vue 原理的叙述,哪些是正确的?
A. Vue 中的数组变更通知,通过拦截数组操作方法而实现
B. 编译器目标是创建渲染函数,渲染函数执行后将得到 VNode 树
C. 组件内 data 发生变化时会通知其对应 watcher,执行异步更新
D. patching 算法首先进行同层级比较,可能执行的操作是节点的增加、删除和更新

3. 对于 Vue 中响应式数据原理的说法,下列哪项是不正确的?
A. 采用数据劫持方式,即 Object.defineProperty() 劫持 data 中各属性,实现响应式数据
B. 视图中的变化会通过 watcher 更新 data 中的数据
C. 若 data 中某属性多次发生变化,watcher 仅会进入更新队列一次
D. 通过编译过程进行依赖收集

4. 下列说法不正确的是哪项?
A. key 的作用主要是为了高效地更新虚拟 DOM
B. 若指定了组件的 template 选项,render 函数不会执行
C. 使用 vm.$nextTick 可以确保获得 DOM 异步更新的结果
D. 若没有 el 选项,vm.$mount(dom) 可将 Vue 实例挂载于指定元素上

5. 下列关于 Vuex 的描述,不正确的是哪项?
A. Vuex 通过 Vue 实现响应式状态,因此只能用于 Vue
B. Vuex 是一个状态管理模式
C. Vuex 主要用于多视图间状态全局共享与管理
D. 在 Vuex 中改变状态,可以通过 mutations 和 actions

6. 关于 Vue 组件间的参数传递,下列哪项是不正确的?
A. 若子组件给父组件传值,可使用 $emit 方法
B. 祖孙组件之间可以使用 provide 和 inject 方式跨层级相互传值
C. 若子组件使用 $emit('say') 派发事件,父组件可使用 @say 监听
D. 若父组件给子组件传值,子组件可通过 props 接受数据

7. 下列关于 vue-router 的描述,不正确的是哪项?
A. vue-router 的常用模式有 hash 和 history 两种
B. 可通过 addRoutes 方法动态添加路由
C. 可通过 beforeEnter 对单个组件进行路由守卫
D. vue-router 借助 Vue 实现响应式的路由,因此只能用于 Vue

8. 下列说法不正确的是哪项?
A. 可通过 this.$parent 查找当前组件的父组件
B. 可使用 this.$refs 查找命名子组件
C. 可使用 this.$children 按顺序查找当前组件的直接子组件
D. 可使用 $root 查找根组件,并可配合 children 遍历全部组件

9. 下列关于 v-model 的说法,哪项是不正确的?
A. v-model 能实现双向绑定
B. v-model 本质上是语法糖,它负责监听用户的输入事件以更新数据
C. v-model 是内置指令,不能用在自定义组件上
D. 对 input 使用 v-model,实际上是指定其 :value 和 :input

10. 关于 Vue 的生命周期,下列哪项是不正确的?
A. DOM 渲染在 mounted 中就已经完成了
B. Vue 实例从创建到销毁的过程,就是生命周期
C. created 表示完成数据观测、属性和方法的运算和初始化事件,此时 $el 属性还未显示出来
D. 页面首次加载过程中,会依次触发 beforeCreate,created,beforeMount,mounted,beforeUpdate,updated
复制代码

明码标价,童叟无欺!做对九题即可成为前端懂王,比 Evan 懂,更比他们懂:

  • TC39 的 @贺师俊 50 分,他是不是走后门送礼进的 TC39 啊?
  • Vue Core Team 的 @胖茶 40 分,可能说明带他的 mentor 不懂 Vue?不过他第二次做就拿了 90 分……这很赘婿逆袭啊。
  • 搞 React lite 的 @工业聚 做了两次,第一次 50 分第二次 30 分。怪不得他最近这么低调,看来是越来越做不动题了。
  • 久仰的白学家程序媛 @敖天羽 第一次拿了 60 分,然后锲而不舍(没有灵魂)地刷到了 100 分。这种精益求精的态度值得赞赏。
  • 我(纯属厚脸皮凑数)60 分。

好在拜天哥所赐,我们还是刷出了「权威的」参考答案,请查收:

1. BCD
2. ABCD
3. BD
4. B
5. C // 据出题人勘误称答案应该是 D
6. B
7. C
8. C
9. C
10. D
复制代码

对照参考答案,尤大还进行了认真的复盘反省,查缺补漏:

唉,身为 Vue 的作者,居然连 Vue 的原理都没有搞清楚,实在太不应该了。应该让出题人好好教育一下他,帮他分析一下 Vue 的源码,教他怎么通过笔试面试,趁现在金九银十找份 P6 的好工作。工作以后也要记得充电,没事多关注一下掘金,学一学 Vue 3.0 的视频教程(狗头)。

所以按照今天的掘金体,本文完全可以起这么个标题:《一步登天!答对这十道 Vue 题,你就能超越尤雨溪,傲视前端群雄!》

——但这不是很荒唐吗?

如果一个人某道题没答对,就能证明他不懂 Vue 了吗?

看看这些题,它们能准确反映答题者的水平吗?使用它们作为考察依据时,这两种情况都再常见不过了:

  • 假阳性 - 只会背题库的做题家也能混到好 offer。
  • 假阴性 - 公认的资深人士无法体现出优势。

这里不会去展开讨论具体哪题应该选什么,因为这早已不是这几道题的问题,而是国内整个「造火箭、拧螺丝」式面试文化的问题了。你看身为 Redux 作者的 Dan 就很乐意告诉你:「我其实不懂很多东西,这没有什么关系」。而今天的例子里,我们则收集到了更多国内一线的业界玩家们坦诚地告诉你:「这些题我也不会,这没有什么关系」——毕竟他们的核心竞争力,可都不是做题呀。

并不是否认这些题目对初学者有一定的帮助作用。然而实际上,越是高级和资深的岗位,需要的越不是做题,而是对开放性(技术与非技术)问题的 Problem Solving 技能:

  • 应该怎样在框架设计上有所突破?
  • 应该怎样在几个性能指标间取舍平衡?
  • 应该怎样靠自己的开源项目盈利?
  • 应该怎样带领团队设定计划,完成目标?

你当然可以逃避这些「灵魂的拷问」,一直靠研究(或制造)那些已经被翻来覆去解答过无数遍的题来「磨练水平」。但无可否认的是,正是靠一群不停迎接真实世界挑战,持续解决开放问题的人们,才创造了今天业界繁荣生态的辉煌。

做题对于锻炼思维当然重要,但它终归只是个跳板,不要把应试教育的思维套用在职业生涯上。比做题更有价值的,最终一定还是去做事——

  • 去业界前沿,去落地灵感!
  • 去参与社区,去贡献代码!
  • 去解决问题,去把手弄脏!

相比之下,十道咬文嚼字的题里对了几道错了几道,又有什么关系呢?

做题不至于误国,但一定是实干才能兴邦。

文中几位参与者的分数,公开前均征求过本人同意。希望不要因此误解他们的真实水平 :D

作者:doodlewind