vue期末考试试题

上周三下午，末考监考老师把卷子拍在讲台上时，试试我听见后排有人倒抽一口凉气。末考那份试题的试试第三大题，直接让三个平时写代码挺溜的末考同学在草稿纸上画起了圈圈。

说实话，试试vue的末考期末考不像后端那种背概念就能过的事。卷子一共六道题，试试前两道是末考基础插值和事件绑定，送分题。试试真正拉开差距的末考是第三题——给了一段混着`v-if`和`v-for`的模板，要求指出性能问题并重写。试试这题考的末考是`v-for`优先级高于`v-if`这个官方文档里藏着的小字。我复习时恰好翻到过，试试但旁边那位仁兄明显没看，末考他写了一大段“应该用computed过滤”的废话，完全没提渲染时每个循环都会跑一次判断。

第四题更有意思。给了一个组件通信的场景：父组件要传对象给子组件，子组件内部想改这个对象的某个属性。标准答案是`props`单向数据流，得发事件让父组件改。但题目故意挖了个坑——它问“如果直接改会怎样”。这个我熟，因为之前做项目真踩过。直接改对象属性，Vue检测不到变化，视图不更新，但内存里的数据其实已经变了。这种“静默失败”最坑人，我写答案时特意强调了两遍“不会触发响应式更新”。

第五题是手写一个简单的`vue-router`配置，带懒加载和路由守卫。这题不难，但陷阱在守卫的写法。有人把`next()`写在异步请求外面，结果跳转时白屏三秒。我瞄到右边那哥们写了`beforeEach`里直接`return false`，其实那是取消导航的写法，他大概和`afterEach`搞混了。

最后一道大题考的是`keep-alive`和生命周期。给了一个列表页切详情页再返回的场景，问为什么列表滚动位置丢了，怎么用`activated`恢复。这题考的是对缓存组件的理解深度。我知道`keep-alive`会缓存组件实例，但`deactivated`和`activated`这对钩子很多人平时根本不用。有个同学写“用`localStorage`存滚动位置”，理论上能行，但显得很笨拙——直接`activated`里读`scrollTop`不就完了。

整张卷子七十分靠理解，三十分靠踩坑经验。那些只刷过视频没写过真项目的人，在第三题和第六题上基本拿不到分。我旁边那位仁兄考完抱怨说“题目太偏”，我倒觉得这卷子出得挺实在。vue这框架，光会写模板不算会，得懂它什么时候更新、什么时候不更新，为什么这样设计。

收卷时我看了眼最后那道题的答题区，有人写了半页纸的`watch`方案，但没人想到用`activated`。这大概就是理论和实战的差距——教材里不会告诉你，真正跑起来的时候，列表页滚动位置丢失有多让人抓狂。反正我写完最后一行字的时候，手心里全是汗，那种感觉比背十遍文档都来得真切。