vue期末考试题及答案

上周刚监考完Vue课程的末考期末上机考试，58份卷子批下来，试题一半以上的及答学生栽在同一类题目上。不是末考语法不会写，是试题压根没读懂题目在问什么。比如这道题：

// 以下代码输出什么？及答 new Vue({  data: {  msg: 'hello' }, computed: {  reversed() {  return this.msg.split('').reverse().join('') } }, methods: {  getMsg() {  return this.msg } }, created() {  this.msg = 'world' console.log(this.reversed) console.log(this.getMsg()) } }) 

正确答案是dlrow和world。但考场上有将近四分之一的末考人写了olleh。他们忽略了一个关键点：created钩子里改了msg的试题值，而computed属性是及答响应式依赖追踪的——msg一变，reversed立刻重新计算。末考这不是试题死记硬背能答对的题，你得真正理解Vue的及答响应式原理。

再说一道高频错题。末考关于组件通信，试题我出了个场景题：父组件有个数组list，及答子组件需要展示它，并且能通过按钮删除某一项。标准做法是父组件传list给子组件，子组件$emit('delete', index)，父组件监听事件后自己修改数据。但考场上有学生直接在子组件里写了this.list.splice(index, 1)——这违反了单向数据流原则。虽然控制台不报错，甚至界面也能正常更新，但Vue官方文档明确警告：这会让数据流变得不可预测。我批卷时看到这种答案，会扣一半分，因为学生没搞懂为什么不能这么写，只是碰巧能跑通罢了。

还有一道关于v-if和v-show的辨析题，问哪个适合频繁切换。答案当然是v-show，因为它只是切换CSS的display属性，元素始终保留在DOM里。但有意思的是，有学生反问：那为什么很多UI库的弹窗组件用v-if？这问题问得好——因为弹窗的创建和销毁涉及内部状态重置，比如表单内容、滚动位置，用v-if可以保证每次打开都是全新实例。所以判断标准不是"频繁与否"，而是"是否需要保留内部状态"。这种题目考的就是活学活用，死记结论的人必然吃亏。

最后一道大题是写一个简单的待办事项应用，要求包含输入框、列表渲染、删除和全选功能。多数学生能完成基本功能，但代码质量天差地别。有人用index作为:key，这在删除中间项时会导致复用错误——比如删掉第二项后，第三项会顶上来，但它的key从2变成了1，Vue会误以为这是原来的第二项，导致DOM复用混乱。正确做法是用唯一ID。这题我给了附加分，能做对的人寥寥无几。

考完有个学生来找我，说他平时看视频教程都能看懂，一写就废。我翻了翻他的代码，发现他所有方法都写在methods里，连计算属性都当方法用——computed和methods的区别他压根没体会过。其实这俩最直观的差异是：computed有缓存，依赖不变就不会重新执行；methods每次调用都重新跑一遍。比如一个遍历一万条数据的过滤操作，用computed只在数据变化时算一次，用methods每次渲染都要重算。性能差距在真实项目里是肉眼可见的。

说到底，Vue期末考试考的不是API背诵，而是你有没有建立正确的组件思维和数据流意识。那些平时自己动手写过小项目、踩过坑的学生，基本都能拿高分。光刷题不看原理的，碰到稍微绕一点的场景就露馅了。