2025年前端面试题之vue及答案

2025年前端面试题之vue及答案Vue实例创建时，`createApp`与直接使用`Vue`构造函数（Vue2）的核心差异是什么？Vue3中`createApp`替代了Vue2的根实例构造方式，核心差异体现在三个方面：首先是作用域隔离，`createApp`返回的应用实例通过`mount`挂载到DOM时，不会污染全局Vue构造函数，支持同一页面运行多个独立Vue应用；其次是API设计，`createApp`强制要求通过`component`、`directive`等方法注册全局资源，避免Vue2中全局API（如`Vponent`）导致的隐式依赖；最后是性能优化，`createApp`初始化时仅包含必要运行时，配合树摇优化可减少打包体积，而Vue2的根实例构造会携带完整全局API。`setup`函数在Vue3中的执行时机和限制有哪些？`setup`在组件实例初始化后、`beforeCreate`生命周期钩子之前执行，此时组件实例尚未完全创建，因此无法通过`this`访问组件实例（`this`会指向`undefined`）。其参数包括`props`和`context`（包含`attrs`、`slots`、`emit`），需注意`props`是响应式对象，直接解构会丢失响应性（需通过`toRefs`转换）。`setup`返回的对象会暴露给模板和生命周期钩子，若返回函数则作为渲染函数（替代`render`选项）。由于执行时机早于模板编译，`setup`中无法访问`$refs`。响应式系统中，`reactive`与`ref`的适用场景及底层实现差异？`reactive`用于对象（包括数组、Map等）的深层响应式转换，基于ES6的`Proxy`实现，通过拦截对象的`get`、`set`等操作触发依赖收集和更新。其限制是无法直接处理原始类型（如`number`、`string`），且对`ref`包裹的对象解构会丢失响应性。`ref`主要用于原始类型或需要保持响应性的单个值，内部通过`RefImpl`类实现，维护`value`属性，访问时触发`get`收集依赖，修改时触发`set`更新。当`ref`被用于模板或对象属性时会自动解包（`ref.value`隐式访问），但在函数参数或解构时需显式访问`value`。两者配合使用时，`reactive`对象中的`ref`属性会自动解包，而`ref`包裹对象时等价于`reactive({value:obj})`。`watch`与`watchEffect`的核心区别及选择依据？`watch`是显式监听特定数据源的变化，支持监听单个或多个响应式变量、计算属性或getter函数，可获取变化前后的值（`oldVal`和`newVal`），并通过`immediate`选项控制是否立即执行回调。适用于需要针对特定数据变化执行副作用（如异步请求、DOM操作），且需访问旧值的场景。`watchEffect`是隐式自动追踪所有在回调中访问的响应式依赖，无需指定具体源，回调会在依赖变化时立即执行，且没有旧值参数。适用于需要自动响应多个依赖变化的场景（如状态变化后自动更新缓存）。选择时，若需明确依赖或访问旧值用`watch`，若需简化多依赖监听逻辑用`watchEffect`。组件通信中，除`props/emits`和`provide/inject`外，还有哪些常见方案？各自适用场景？（1）事件总线：通过全局事件中心（如`mitt`库）发送/监听事件，适用于非父子、跨层级较少的组件通信，但需注意事件命名冲突和内存泄漏（需手动移除监听器）；（2）Vuex/Pinia：状态管理库，适用于全局或多组件共享的复杂状态（如用户登录信息、购物车），通过集中式存储保证状态可预测；（3）作用域插槽（ScopedSlots）：父组件通过插槽传递函数，子组件调用函数传递数据，适用于需要父组件自定义子组件内容且传递动态数据的场景（如列表项自定义渲染）；（4）`v-model`双向绑定：通过`modelValue`和`update:modelValue`事件实现，适用于表单组件或需要双向同步的父子组件（如输入框与父组件数据同步）；（5）`$parent/$children`（Vue2）或`parent/expose`（Vue3）：直接访问父/子组件实例，适用于紧急情况下的强耦合通信（不推荐，破坏组件封装性）。`v-if`与`v-show`的渲染策略差异及性能优化建议？`v-if`是条件渲染，当条件为假时会完全销毁对应DOM节点及子组件实例（触发`beforeUnmount`和`unmounted`生命周期），条件为真时重新创建（触发`beforeMount`和`mounted`）。`v-show`通过`display:none`控制元素显示隐藏，DOM节点始终存在，仅修改CSS属性。性能上，`v-if`在条件频繁切换时会导致多次创建/销毁，适合条件不常变化的场景（如权限控制）；`v-show`适合需要频繁切换显示状态的场景（如折叠面板）。优化建议：对初始渲染时条件为假且不常变化的内容用`v-if`减少初始DOM节点数量；对频繁切换的内容用`v-show`避免重复渲染开销。`computed`与普通函数的本质区别？如何优化复杂计算属性？`computed`是响应式计算属性，基于依赖的响应式数据自动缓存结果，仅当依赖变化时重新计算。普通函数每次调用都会执行，无缓存机制。本质区别在于`computed`通过`ComputedRefImpl`类实现，内部追踪依赖并标记`_dirty`状态，只有依赖变化时才重新计算。优化复杂计算属性的方法：（1）拆分计算逻辑为多个小`computed`属性，提高可维护性；（2）对耗时计算（如大数据过滤）使用`lazy`模式（默认已开启），避免不必要的实时计算；（3）若依赖包含非响应式数据（如原生数组），需确保数据变化时手动触发更新（可通过`ref`包裹数据或结合`watch`触发重新计算）；（4）避免在`computed`中执行异步操作（应改用`watch`或`async`函数配合`Suspense`）。Vue3的`Suspense`组件的作用及使用限制？`Suspense`用于管理异步依赖的加载状态，可包裹一个或多个异步组件（如使用`defineAsyncComponent`定义的组件）或`setup`中返回`Promise`的组件，提供`default`（加载完成内容）和`fallback`（加载中/错误内容）两个插槽。其核心作用是简化异步加载的状态管理，自动处理加载、成功、错误等阶段的UI展示。使用限制：（1）仅能处理直接子组件的异步依赖，深层嵌套的异步组件需由父级`Suspense`管理；（2）`fallback`插槽内容必须是同步渲染的简单DOM，避免自身包含异步操作导致死循环；（3）异步组件需返回`Promise`解析为组件选项对象，若`setup`返回`Promise`，需确保组件树中仅有一个未解决的`Promise`（否则`Suspense`无法正确追踪）；（4）与`errorCaptured`生命周期不兼容，异步错误需通过`onErrorCaptured`或`Suspense`的`@error`事件捕获。自定义指令中，`beforeMount`、`mounted`、`beforeUpdate`、`updated`钩子的执行时机及典型用途？`beforeMount`：指令绑定到元素且元素尚未插入DOM时执行，适用于初始化配置（如添加事件监听器但不立即生效）；`mounted`：元素插入DOM后执行，可访问完整DOM结构（如初始化第三方库实例`newMyPlugin(el)`）；`beforeUpdate`：元素更新前执行，此时旧DOM尚未被修改，可获取更新前的状态（如记录旧位置用于过渡动画）；`updated`：元素更新完成后执行，此时新DOM已渲染，可操作更新后的DOM（如重新计算滚动位置）。典型用途示例：`v-focus`指令在`mounted`中调用`el.focus()`实现自动聚焦；`v-throttle`在`mounted`中绑定事件监听器并封装节流逻辑；`v-permission`在`beforeMount`中检查权限并动态移除元素。`VueRouter`中，动态路由与嵌套路由的配置及匹配规则？动态路由通过在路径中使用`:`标记参数（如`/user/:id`），参数会被解析为`$route.params`对象。配置时需注意动态段的顺序（如`/user/:id`和`/user/profile`需将固定路径放在前面避免冲突），且支持正则匹配（通过`pathMatch`或自定义`parseParams`函数）。嵌套路由通过`children`数组配置子路由（如父路由`/dashboard`的`children`包含`/dashboard/settings`），需在父组件模板中添加`<router-view>`用于渲染子路由内容。匹配规则遵循最长匹配原则，父路由路径需包含子路由路径的前缀（如父路径`/user`，子路径`profile`会匹配`/user/profile`），若子路由路径以`/`开头则视为根路径（如`/profile`匹配绝对路径）。`Pinia`相比`Vuex`的核心改进有哪些？（1）API设计：Pinia使用组合式API风格（`defineStore`），支持通过函数定义Store，可更灵活地组织逻辑（如拆分多个组合式函数），而Vuex依赖选项式API（`state`、`mutations`、`actions`）；（2）响应式：Pinia的`state`直接基于Vue的响应式系统（`reactive`），无需手动调用`commit`提交`mutation`（`actions`可直接修改`state`），Vuex需通过`mutation`同步修改`state`；（3）类型推导：Pinia原生支持TypeScript，通过`defineStore`的泛型参数和自动推导，可避免Vuex中繁琐的类型声明；（4）模块化：Pinia无需手动注册模块，每个`defineStore`自动作为独立模块，支持动态加载（`lazy`模式），Vuex需通过`modules`配置嵌套模块；（5）性能：Pinia无`mutation`的运行时开销，且通过树摇优化可移除未使用的Store代码，体积更小（~2KB）。模板编译中，`v-for`与`v-if`优先级问题如何解决？Vue3中`v-for`优先级低于`v-if`（Vue2相反），即`v-if`会先于`v-for`执行。若在同一元素上同时使用，`v-if`的条件判断无法访问`v-for`的循环变量（因为`v-for`尚未提供循环项）。解决方法：（1）将`v-if`移至包裹`v-for`的父元素（如`<templatev-if="condition"><divv-for="iteminlist"></div></template>`），此时`v-if`控制是否渲染整个循环；（2）若需对每个循环项单独判断，可将`v-if`作为`v-for`的筛选条件（如`v-for="iteminlist.filter(i=>i.condition)"`），通过计算属性优化过滤逻辑以避免重复计算；（3）使用`<template>`标签包裹`v-for`，在`<template>`上使用`v-if`（如`<templatev-if="condition"><templatev-for="iteminlist"><div>{{item}}</div></template></template>`）。`Vue3`的`Teleport`组件解决了什么问题？使用时需注意哪些边界情况？`Teleport`用于将组件的一部分DOM渲染到当前组件树之外的DOM节点（如`body`下的模态框），解决了固定定位组件（如弹出层）因父级`overflow:hidden`或`z-index`层级问题导致的渲染异常。使用注意点：（1）目标容器需在`Teleport`渲染前存在（可在`mounted`生命周期或通过`v-if`控制渲染时机）；（2）`to`属性支持CSS选择器或DOM节点引用，若目标容器动态变化需手动更新（通过`ref`绑定并监听变化）；（3）`Teleport`包裹的组件与原组件保持响应式绑定，父组件的`provide`仍可被`Teleport`内的组件`inject`；（4）多个`Teleport`指向同一目标容器时，内容会按渲染顺序追加（后渲染的在DOM树中靠后）；（5）服务端渲染（SSR）时需确保目标容器在客户端和服务端一致，避免hydration不匹配错误。性能优化中，如何减少组件重新渲染次数？（1）使用`v-memo`缓存动态内容：对循环中变化较少的项添加`v-memo="[item.id]"`，避免未变化项的重新渲染；（2）优化响应式依赖：在`computed`和`watch`中仅引用必要的响应式数据，避免因无关数据变化触发更新；（3）使用`shallowReactive`和`shallowRef`：对深层对象仅需要顶层响应性时，减少不必要的深层依赖追踪；（4）组件缓存：通过`keep-alive`缓存不常变化的组件（如标签页内容），配合`include/exclude`控制缓存范围；（5）事件处理优化：避免在模板中使用内联函数（如`@click="()=>handleClick(item)"`），改用`memoized`函数或绑定到组件实例方法；（6）异步渲染：将耗时操作拆分到`nextTick`或使用`requestAnimationFrame`，避免阻塞主线程；（7）使用`markRaw`标记非响应式对象：对不需要响应式的大型数据（如图像列表），避免被`reactive`转换导致的性能开销。`Vue`项目中如何实现服务端渲染（SSR）？与客户端渲染（CSR）的核心区别？Vue项目SSR可通过`@vue/ssr-renderer`手动实现，或使用框架（如Nuxt.js）简化流程。核心步骤：（1）创建服务端入口，使用`createSSRApp`创建应用实例；（2）通过`renderToString`将应用实例渲染为HTML字符串；（3）服务端将HTML字符串与初始状态（通过`pinia`的`state`或`vuex`的`store`）注入到模板中；（4）客户端通过`hydrate`将静态HTML转换为可交互的应用（水合过程）。与CSR的核心区别：（1）首屏加载（FCP）更快，SSR在服务端提供完整HTML，客户端无需等待JS加载即可渲染；（2）SEO友好，搜索引擎可直接抓取服务端返回的完整内容；（3）服务端压力增加，需处理每个请求的渲染计算；（4）水合过程可能产生性能开销（需匹配客户端渲染结果与服务端HTML）；（5）限制：SSR中无法使用浏览器特有的API（如`window`），需通过`isSSR`判断或在`onMounted`中执行。`Vue3`的`响应式系统`如何处理数组的变化？与`Vue2`有何不同？Vue3的响应式数组基于`Proxy`实现，拦截了`push`、`pop`、`shift`、`unshift`、`splice`、`sort`、`reverse`等变异方法（通过重写数组原型方法），调用这些方法时会触发依赖更新。同时，通过`Proxy`的`set`陷阱监听索引修改（如`arr[0]=1`）和长度变化（`arr.length=0`）。Vue2中使用`Object.defineProperty`无法拦截数组的索引修改和大部分变异方法，因此通过重写数组原型方法（如`push`）触发更新，但无法检测`a