2021年前端vue面试题大汇总（附答案）
2023-11-10 22:07:42
以下是2021年Vue.js高频面试题及答案汇总：
一、Vue响应式原理
Vue通过数据劫持（Object.defineProperty或Proxy）和发布-订阅模式实现响应式。初始化时，Vue遍历data属性，使用Object.defineProperty将其转为getter/setter，依赖收集在getter中完成，数据变化时触发setter通知所有依赖的Watcher更新视图。Vue3改用Proxy实现，支持数组变化检测和更细粒度的响应控制。
二、Vue生命周期钩子
常用钩子包括：
beforeCreate：实例初始化后，数据观测和事件配置前。
created：实例创建完成，可访问data和methods，常用于异步请求。
beforeMount：模板编译后，挂载前。
mounted：DOM挂载完成，可操作DOM或初始化第三方库。
beforeUpdate/updated：数据变化前后触发，用于响应式更新。
beforeDestroy/destroyed：销毁前后，用于清理定时器或事件监听。
三、v-if与v-show的区别
v-if通过条件渲染动态创建或销毁DOM，适合频繁切换的场景（如移动端tab页），初始渲染成本高但切换开销低。v-show通过CSS的display属性控制显示/隐藏，始终渲染DOM，适合频繁切换的场景（如按钮状态切换），初始渲染成本低但切换开销高。
四、Vue组件通信方式
props/$emit：父子组件通信，父传子用props，子传父用$emit。
$parent/$children：直接访问父/子组件实例（不推荐，耦合度高）。
provide/inject：祖先组件提供数据，后代组件注入，适合跨层级通信。
EventBus：通过全局事件总线（如空Vue实例）实现任意组件通信。
Vuex：集中式状态管理，适合复杂应用的全局状态共享。
五、Vue Router实现原理
基于前端路由的两种模式：
hash模式：通过监听hashchange事件，利用URL的hash部分（#后内容）实现页面跳转，兼容性好但URL不够美观。
history模式：利用HTML5的history API（pushState/replaceState）修改URL，需服务器配置支持，URL更简洁但刷新可能404。
六、Vue3的Composition API优势
逻辑复用：通过自定义hook（如useFetch）替代mixins，避免命名冲突。
代码组织：按功能而非组件结构组织代码，提升可读性。
TypeScript支持：更好的类型推断，适合大型项目。
性能优化：更小的打包体积和更快的渲染速度。
热门标签
