标签题目
Vue相关面试题
说说 Vue 的响应式原理吧
这题考察 Vue 响应式如何把数据读写、依赖收集和视图更新串起来，回答时要以 Vue2 的 defineProperty 为主，并能说明 Vue3 Proxy 解决了哪些边界。
手写：用 Vue 写一个登录组件，考验组件封装能力
这道题不是让你画一个账号密码框，而是考察登录表单组件的封装边界。高质量回答要说清 LoginForm 负责 UI、输入状态、校验、错误展示和提交契约，业务页面负责登录接口、token/session、路由跳转、风控和埋点。
设计一个组件需要考虑什么？
这题考察组件设计的工程判断：先定职责边界，再设计输入输出、状态归属、扩展点、可访问性、异常状态和维护成本。
Vue2 和 Vue3 都用过，有什么区别？
这题考察 Vue 版本演进理解。高质量回答要从响应式原理、组合式 API、编译运行时优化、TypeScript 支持和迁移风险展开。
列表的优化
这题考察前端性能定位和大列表治理。回答要先判断瓶颈来源，再按数据、渲染、更新、资源和交互体验分层优化。
虚拟 DOM 和 diff 算法
这题考察虚拟 DOM 的抽象目的、diff 的启发式假设、key 的节点身份作用和最终 patch 到真实 DOM 的过程。不要把虚拟 DOM 说成一定比直接操作 DOM 快。
React/Vue 列表渲染中 key 的作用是什么？
key 的核心作用是在虚拟 DOM diff 或 reconciliation 过程中，为同一父节点下的一组子节点提供稳定身份标识。它帮助框架判断哪些节点是同一个、哪些需要移动、插入、删除或重新创建，从而减少错误复用和不必要的 DOM 操作，同时影响组件实例与内部 state 的保留或重置。
如果将列表的index设置为key会有什么问题？
把列表的 index 当作 key，最大问题不是性能差一点，而是把位置误当成了数据身份。当列表发生插入、删除、排序、过滤时，同一个 index 会指向不同数据，框架会错误复用组件实例和 DOM 节点，导致本地 state、输入值、动画状态、缓存结果和副作用都可能跟真实数据错位。
vue2是怎么进行数组的方法重写的？
Vue2 对数组响应式的核心不是给每个下标都做 Object.defineProperty，而是创建一个继承自 Array.prototype 的 arrayMethods，重写 push、pop、shift、unshift、splice、sort、reverse 这 7 个会改变数组自身的方法。数组被 observe 时会挂上 __ob__，并把当前数组实例的原型指向 arrayMethods；调用被重写的方法后，Vue2 会先执行原生数组操作，再对新增元素 observeArray，最后通过 ob.dep.notify() 通知依赖更新。
Vue和React在创建组件的时候，说说最应该注意哪三点？
创建 Vue 和 React 组件时最应该注意三点：职责边界是否清晰、数据流与状态归属是否合理、副作用与性能边界是否可控。Vue 和 React 写法不同，但优秀组件都应该低耦合、可组合、可预测、易测试、易维护。