Vue 高频 JS 面试题及详细实战答案

Vue高频JS面试题及详细实战答案一、Vue基础JS核心面试题1、Vue中data为什么必须是一个函数？答案：这个问题核心是避免组件实例之间的数据污染。如果是根组件，data可以写成对象，因为根组件只实例化一次。但自定义组件中，data必须是函数，组件在页面中可以被多次复用，每一次复用都会创建一个全新的组件实例。如果data是对象，所有组件实例会共用同一个堆内存地址，修改一个组件的数据，其他复用组件的数据也会跟着改变，造成数据混乱。如果是函数，每个组件实例都会执行一次函数，返回一个全新的独立对象，每个组件的数据相互独立，互不干扰。2、Vue中key的作用，为什么不推荐用index作为key？答案：key是Vue虚拟DOMdiff算法的唯一标识，作用是精准对比新旧虚拟DOM，提升diff效率，避免DOM复用出错。不推荐用index做key的核心原因：1.列表乱序、删除、插入数据时，会引发DOM复用错误比如数组头部删除一条数据，后续所有数据的index都会前移一位。diff算法会认为所有后续节点都发生了变化，重新渲染所有节点，而不是只更新变化的节点，造成性能浪费。2.会导致表单数据错乱如果列表中有input、复选框等表单元素，index变化后Vue会错误复用旧的DOM节点，出现输入内容、选中状态和数据不匹配的问题。最佳实践：使用后端返回的唯一ID作为key。3、v-if和v-for为什么不能一起使用？优先级谁更高？答案：Vue2中v-for优先级高于v-if，Vue3中v-if优先级更高。不建议混用的核心原因是性能极差：Vue2场景：会先循环遍历所有列表项，再根据条件判断是否渲染，哪怕页面只需要展示一条数据，也会完整遍历整个数组，造成无效循环。Vue3场景：看似先判断条件再循环，但如果条件依赖循环项的属性（比如item.flag），条件永远不成立，会直接报错。正确优化方案：1.外层用template标签做v-if判断，内层做v-for循环；2.优先在数据层面处理，提前用filter过滤数组，再进行循环渲染。4、Vue中computed和watch的区别及使用场景答案：1.核心区别-computed：计算属性，是依赖缓存的同步计算，基于响应式依赖缓存结果，依赖不变就不会重新计算；必须有返回值，不支持异步。-watch：侦听器，是数据监听回调，无缓存，数据每次变化都会触发执行；支持异步操作，无返回值。2.使用场景-能用computed就优先用computed：简单的数据推导、多数据联动计算（比如总价、筛选后的列表、拼接文本）；-必须用watch：数据变化后执行异步操作、复杂业务逻辑（比如接口请求、定时器、弹窗提示、多数据联动复杂处理）。补充：computed有只读和完整写法（get/set），需要修改计算结果时可以用set方法。二、Vue响应式原理核心面试题1、Vue2和Vue3响应式原理的区别？答案：Vue2响应式原理：基于Object.defineProperty()通过遍历data中的所有属性，为每个属性劫持get、set方法。数据读取时收集依赖，数据修改时触发视图更新。缺陷非常明显：1.无法监听对象新增、删除的属性；2.无法监听数组下标修改、数组长度修改；3.只能劫持对象的单层属性，深层嵌套对象需要递归遍历，初始化性能差。所以Vue2需要借助$set、$delete解决新增属性响应式问题，重写数组7个变异方法解决数组监听问题。Vue3响应式原理：基于Proxy+Reflect直接代理整个对象，无需遍历每个属性，支持监听：1.对象属性的新增、删除、修改；2.数组下标修改、数组长度修改；3.支持Map、Set等复杂数据结构；同时采用懒递归模式，只有访问到深层属性时，才会对深层属性做响应式劫持，大幅提升初始化性能。2、Vue2中$set的原理，为什么原生数组下标修改不响应？答案：Vue2的Object.defineProperty只能劫持已存在的属性。对于对象：后续新增的属性没有get/set劫持，所以修改后无法触发视图更新。对于数组：数组下标修改、length修改不属于Vue重写的7个变异方法（push/pop/shift/unshift/splice/sort/reverse），不会触发更新监听。$set核心原理：1.判断目标是否为数组，若是数组，直接调用splice方法修改数组，触发视图更新；2.判断目标是否为对象、属性是否存在，若是新增属性，手动通过defineProperty为属性添加响应式劫持，再触发更新。3、Vue响应式的依赖收集、派发更新流程答案：整体流程分为三步：初始化挂载、依赖收集、派发更新1.组件挂载时，会创建一个渲染Watcher，执行组件渲染函数，读取页面中用到的响应式数据；2.读取数据时触发属性的get方法，将当前Watcher收集到Dep依赖管理器中，完成依赖收集；3.后续修改数据时，触发属性的set方法，Dep会通知内部收集的所有Watcher，触发视图重新渲染，完成派发更新。简单来说：数据读的时候收集依赖，数据改的时候更新视图。三、Vue生命周期与异步更新面试题1、Vue生命周期常用钩子及使用场景答案：1.beforeCreate：实例刚创建，data、methods未初始化，几乎不用；2.created：实例创建完成，data、methods已初始化，可以请求接口、初始化数据，此时DOM未生成；3.beforeMount：挂载前，模板编译完成，即将渲染DOM；4.mounted：DOM挂载完成，可以操作DOM、初始化定时器、引入第三方DOM插件；5.beforeUpdate/updated：数据更新前后触发，可监听数据更新后的DOM状态；6.beforeUnmount/unmounted：组件销毁前后，清除定时器、解绑事件、清空监听，防止内存泄漏。2、Vue为什么需要nextTick？原理是什么？答案：核心原因：Vue视图更新是异步的。Vue为了提升性能，会将短时间内多次数据修改缓存合并，统一执行一次视图更新，避免频繁操作DOM造成性能损耗。所以修改数据后，立刻获取DOM，拿到的还是更新前的旧DOM。nextTick作用：等待下次DOM更新完成后，再执行回调函数，确保回调内获取到最新的DOM。原理：利用宏任务、微任务队列，优先使用Promise、MutationObserver微任务，降级使用setTimeout宏任务，将回调推入异步队列，等同步代码执行完毕、DOM更新完成后，再执行队列中的回调。四、Vue组件通信面试题1、Vue所有组件通信方式及适用场景答案：1.父子组件：props/$emit最基础通信，父传子用props，子传父用$emit触发自定义事件。props是单向数据流，子组件不能直接修改父组件传值。2.父子组件：$parent/$children/refref可以直接获取子组件实例，调用子组件方法、获取子组件数据；$parent/$children访问上下级组件，项目中少用，耦合度太高。3.跨级/简单全局通信：EventBus（事件总线）适合小型项目、简单跨组件通信，通过$on监听、$emit触发、$off销毁事件。缺点是事件过多容易混乱，需要手动销毁，避免内存泄漏。4.全局状态通信：Vuex/Pinia适合中大型项目，全局统一管理状态，支持响应式、状态持久化、模块化，解决复杂组件跨层、兄弟组件通信问题。5.跨级组件：provide/inject祖先组件提供数据，后代任意层级组件注入使用，无需逐层传参。缺点是状态响应式处理麻烦，数据修改溯源困难，适合封装组件库使用。2、props单向数据流的理解，子组件为什么不能直接修改props？答案：props单向数据流：只能父组件修改数据流向子组件，子组件不能直接修改父组件传递的props值。原因：1.防止状态混乱、数据溯源困难，父组件的数据可能被多个子组件共用，子组件随意修改会导致全局数据不可控；2.违背Vue数据驱动的设计思想，数据变更应该由数据所有者统一修改。正确处理方式：1.基础类型：子组件定义本地data或computed，接收props赋值后修改本地数据；2.需要同步父组件：通过$emit通知父组件修改，或使用.sync修饰符、v-model语法糖。五、Vue路由与实战面试题1、vue-router路由守卫有哪些？全局守卫执行顺序？答案：常用守卫分为三类：1.全局守卫：beforeEach（全局前置守卫）、afterEach（全局后置守卫）；2.路由独享守卫：beforeEnter（单个路由专属守卫）；3.组件内守卫：beforeRouteEnter、beforeRouteUpdate、beforeRouteLeave。完整执行顺序：beforeEach全局前置=>beforeEnter路由独享=>beforeRouteEnter组件内前置=>路由跳转=>afterEach全局后置核心使用场景：beforeEach主要做登录权限拦截、页面标题修改、路由鉴权。2、路由懒加载的原理和作用答案：原理：基于ES6动态import()语法，实现组件的按需导入。不使用懒加载时，所有路由组件会在项目打包时全部打包到主js文件，导致首屏加载文件过大、白屏时间长。作用：1.项目打包后会拆分出多个路由chunk文件，实现代码分割；2.进入对应路由页面时，才会加载对应组件js文件，大幅优化首屏加载速度；3.减少首屏资源请求体积，提升页面加载性能。六、Vue性能优化实战面试题1、日常开发中Vue性能优化方案答案：1.渲染优化：列表渲染用唯一key、避免v-if和v-for混用、频繁切换组件用v-show（少量切换用v-if）；2.数据优化：合理使用computed缓存数据、避免模板中写复杂表达式、清空无用响应式数据；3.路由优化：所有路由开启懒加载、路由组件按需导入；4.DOM优化：频繁操作DOM结合nextTick、避免频繁更新全局DOM；5.资源优化：图片懒加载、第三方库按需引入、打包压缩代码、去除冗余依赖；6.内存优化：组件销毁时清除定时器、解绑自定义事件、清空监听，杜绝内存泄漏。2、v-show和v-if的区别及选型答案：区别：