Vue 面试题汇总（二）

Vue 面试题汇总（一）：https://developer.aliyun.com/article/1414949

20. 说说对 Vue 数据响应式的理解

思路：

1. 什么是响应式？
2. 为什么vue需要响应式？
3. 有什么好处？
4. vue的响应式怎么实现的，有哪些优缺点？
5. vue3中的响应式的新变化

回答：

1. 数据响应式就是 能够监测到数据变化并且做出响应的一种机制
2. 在 vue 中要解决的一个核心问题就是连接数据层和视图层，通过数据变化驱动视图更新，要做到这点就需要对数据做响应式处理。
3. 通过数据响应式加上虚拟 DOM 和 patch 算法，我们只需要操作数据，关心业务，完全不需要接触繁琐的 DOM 操作，打打提升了开发效率，降低开发难度。
4. vue2 中实现数据响应式的核心就是通过 Object.defineProperty() 方法对数据进行拦截，当 get 数据时做依赖收集 set 数据时做更新通知。这种机制很好的及绝了数据响应式的问题，但是实际使用也存在缺点，比如在初始化时的递归遍历会造成性能损失;无法监听新增或删除属性，在 vue 中要通过像 Vue.set/delete 这种特定的 API 才能实现对对象数组属性的添加和删除，而且也不支持 Ma、Set这些数据结构，
5. 为了解决这些问题，Vue3 重写了这部分实现，利用的是 ES6 中的 Proxy 代理要响应化的数据。它有很多好处，初始化性能和内存都大幅改善，也不需要特殊的 API ，但是不支持 IE 浏览器。

21. 从 template 到 render 做了什么

问 template 到 render 的过程其实是问的 vue 编译器 工作原理。

思路：

1. 引入编译器概念
2. 说明编译器的必要性
3. 阐述编译器工作流程

回答：

1. Vue 中有个独特的编译模块，称为 compiler，它的主要作用是将 template 编译为 js 可执行的 render 函数
2. 之所以需要这个编译过程是为了便于我们高校的编写试图模版。相比而言，我们还是更愿意用 HTML来编写视图，直观且高效。手写 render 函数不仅效率低下，而且失去了被编译器的优化能力。
3. Vue 编译器 首先会对 template进行解析（ Parse ），结束后会得到一个抽象语法树AST，然后对 AST 进行深加工转换（transform），最后将得到的 AST 生成为 js 代码，也就是 render 函数

22. 如何缓存和更新组件

1. 缓存组件可以使用 keep-alive 组件，include 和 exclude 可以指定包含不包含哪些组件。
   
2. Vue3 结合 vue-router 使用变化非常大，之前是 keep-alive 包含 router-view，现在是 router-view 包含 keep-alive
   
3. 缓存后如果想要获取数据可以使用 actived 钩子 或者 beforeRouteEnter（ vue-router 的一个守卫）
   
4. keep-alive 是一个通用组件，它内部定义了一个 map，缓存创建过的组件实例，它返回的渲染函数内部会查找内嵌的 component 组件对应组件的 vnode，如果改组件在map中存在就直接返回它。由于 component 的 is 属性是一个响应式数据，因此只要它变化，keep-alive 的 render 函数就会重新执行。
   

23. 虚拟DOM

1. 虚拟 DOM 是什么？ 虚拟 DOM 的本质就是一个 Javascript 对象。
2. 为什么要引入虚拟 DOM？（好处） 它能有效减少操作 DOM 的次数，方便实现跨平台
3. 虚拟DOM如何生成？ compiler 编译器会把 template 模版编译成渲染函数，接下来在 mount 挂载的过程会调用这个渲染函数，返回的对象就是 虚拟DOM 。挂载结束后，会进入更新流程。如果某些响应式数据发生变化，将会引起组件重新 render，此时会生成新的 虚拟DOM，和上次渲染结果做 diff 操作，最小量的操作 dom，从而高效更新视图。

24. 什么是异步组件

1. 异步组件就是不会立即加载而是会在需要的时候加载的组件。在大型应用中，我们需要分割代码为更小的块试就可以用异步组件。
2. 不仅可以在路由切换时懒加载组件，还可以在组件中使用异步组件，从而更细的分割代码。
3. 使用异步组件最简单的方式是直接给 defineAsyncComponet 指定一个 loader 函数，结合 ES 模块 动态导入函数 import 可以快速实现。Vue3 还可以结合 Suspense 组件使用异步组件。
4. 异步组件容易和路由懒加载混淆，实际上不是一个东西。异步组件不能被用于定义懒加载路由上，处理它的是 Vue 框架，处理路由组件加载的是 vue-router。但是可以在懒加载的路由组件中使用异步组件。

25. 说说Vue长列表优化思路

• 避免大数据量：可以采用分页的方式获取
• 避免渲染大量数据：vue-virtual-scroller等虚拟滚动方案，只渲染视口范围内的数据
• 避免更新：可以使用v-once方式只渲染一次
• 优化更新：通过v-memo缓存组数，有条件更新，提高服用，避免不必要更新
• 按需加载数据：可以采用 懒加载 方式，在用户需要的时候在加载数据。

26. computed & watch

1. computed 是计算属性，watch 是侦听器。
2. computed 通常用于处理模版中复杂的逻辑,而 watch 通常用于需要监听一个响应式对象的变化而做一些操作的时候
3. watch 可以进行异步操作，computed 不行。
4. 计算属性传递一个对象 有 set 和 get 两个选项，是它称为即可读又可写的计算属性，如果传递的是函数的话默认就是 get 选项，watch 可以传递一个对象，设置deep、immediate等选项
5. vue3 中 watch 发生了一些变化，例如不能再侦测一个点操符之外的字符串表达式，reactivity API 中新出的 watch、watchEffect 可以完全替代 watch 选项，而且功能更加强大

27. SPA 和 SSR的区别是什么？

1. SPA（Single Page Application）是单页面应用。一般也称为客户端渲染，简称 CSR 。SSR（Server Side Render） 即服务端渲染。一般也称为多页面应用（Mulpile Page Application），简称 MPA。
   
2. SPA 只会首次请求 html 文件，后续只需要请求 JSON 数据即可，因此用户体验更好，节约流量，服务端压力也较小。但是首屏加载的时间会变长，而且 SEO 不友好。为了解决以上缺点，就有了 SSR 方案，由于 HTML 内容在服务器一次性生成出来，首屏加载快，搜索引擎也可以很方便的抓取页面信息。但同时 SSR 方案也会有性能，开发受限等问题。
   
3. 选择上，如果有首屏加载优化需求，SEO需求时，就可以考虑SSR。
   
4. 但并不是只有这一种替代方案，比如对一些不常变化的静态网站，SSR反而浪费资源，我们可以考虑预渲染的方案。另外 nuxt.js/next.js 中给我们提供了SSG静态网站生成方案也是很好的静态站点解决方案，结合一些CI手段，可以起到很好的优化效果。
   

28. diff 算法

回答思路：

1. diff算法是干什么的？
2. 必要性
3. 何时执行
4. 具体执行方式
5. 拔高：说一下vue3中的优化

回答：

1. Vue 中的 diff 算法称为 patching 算法，虚拟DOM要想转化为真实DOM就需要通过 patch 方法转换。
   
2. 最初 Vue1.x 视图中农每个依赖均有更新函数对应，可以做到精确更新，因此不需要 虚拟DOM 和 patching 算法支持，但是这样粒度过细导致 Vue1.x 无法承载较大应用；Vue2.x 中为了降低 Watcher 粒度，每个组件只有一个 Watcher 与之对应，此时就需要引入 patching 算法才能精确找到发生变化的地方并高效更新。
   
3. vue 中 diff 执行的时刻是组件内响应式数据变更触发实例执行其更新函数时，更新函数会再次执行 render函数 获得最新的 虚拟DOM ，然后执行 patch函数，对比新旧虚拟DOM，将其转化为对应的 DOM 操作。
   
4. patch 过程是一个递归过程，遵循深度优先、同层比较的策略；以 vue3 的patch 为例：

• 首先判断两个节点是否为相同同类节点，不同则删除重新创建
• 如果双方都是文本则更新文本内容
• 如果双方都是元素节点则递归更新子元素，同时更新元素属性
• 更新子节点时又分了几种情况：

• 新的子节点是文本，老的子节点是数组则清空，并设置文本；
• 新的子节点是文本，老的子节点是文本则直接更新文本；
• 新的子节点是数组，老的子节点是文本则清空文本，并创建新子节点数组中的子元素；
• 新的子节点是数组，老的子节点也是数组，那么比较两组子节点，更新细节blabla

5. vue3 中引入的更新策略：编译期优化 patchFlags、block等
   

29. 如何从0到1架构一个Vue项目，说说有哪些步骤，插件，目录结构怎么组织

1. 从 0 创建项目我大致会做以下事情：项目构建、引入必要插件、代码规范、提交规范、常用库和组件
2. 目前vue3项目我会用vite或者create-vue创建项目
3. 接下来引入必要插件：vue-router、vuex/pinia、element-plus、antd-vue、axios等等
4. 其他常用的库有 像lodash、dayjs、nprogress等等..
5. 下面是代码规范: editorconfig、prettier、eslint
6. 最后是提交规范，可以使用husky、Commitizen
7. 目录结构我喜欢按照下面的结构来

+ |- /src
+   |- /assets 存放资源
+     |- /img   
+     |- /css   
+     |- /font   
+     |- /data   
+   |- base-ui  存放多个项目中都会用到的公共组件
+   |- components 存放这个项目用到的公共组件
+   |- hooks 存放自定义hook
+   |- views 视图
+   |- store 状态管理
+   |- router 路由
+   |- service 网络请求
+   |- utils 工具
+   |- global 全局注册、全局常量..
复制代码

30. 你如何实现一个Vue-Router

一个 SPA 应用的路由需要解决的问题时页面跳转内容改变同时不刷新，同时路由还需要已插件形式存在，所以：

1. 首先我会定义一个 createRouter 函数，返回路由器实例，实例内部做几件事；

• 保存用户传入的配置项
• 监听 hash 或者 popstate 事件
• 回调里根据 path 匹配对应路由

2. 将 router 定义成一个 Vue 插件，即实现 install 方法，内部做两件事：

• 实现两个全局组件：router-link和 router-view，分别实现页面跳转和内容显示
• 定义两个全局变量：$router 和 $route，组件内可以访问当前路由和路由器实例

31. 什么情况需要使用Vuex模块？

1. 在项目规模变大的之后，单独一个store对象会过于庞大臃肿，此时通过模块方式可以拆分来便于维护
2. 可以按之前规则单独编写资规模代码，然后在主文件中通过 modules 选项组织起来：createStore({modules: {...}})
3. 使用时需要注意访问子模块状态时需要加上注册模块名。但同时getters、mutations和 actions又在全局空间中，使用方式和之前一样。如果要做到完全拆分，需要在子模块加上 namespace选项，此时再访问它们就要加上命名空间前缀。
4. 模块的方式可以拆分代码，但是缺点也很明显，使用起来比较繁琐，容易出错，而且类型系统支持很差，不能给我们带来帮助。pinia 显然在这方面有了很大改进，是时候切换过去了。

32. vue 组件为什么只能有1个根节点

1. vue2 中组件确实只能有一个跟，但 vue3 中组件已经可以多根组件了。
2. 之所以需要这样是因为 vdom 是一颗单根树形结构，patch 方法在遍历的时候从根节点开始遍历，它要求只有一个根节点。组件也会转换为一个 vdom，自然应该满足这个要求。
3. vue3 中之所以可以写多个根节点，是因为引入了 Fragment 的概念，这是一个抽象的节点，如果发现组件时多根的，就创建一个 Fragment 节点，把多个根节点作为它的 children。将来 pathch 的时候，如果发现是一个 Fragment 节点，则直接遍历 children 创建或更新。

33. v-once 使用场景有哪些？

1. v-once 是 vue 的内置指令，作用是仅渲染指定组件或元素一次，并跳过未来对其更新。
2. 如果我们有一些元素或者组件再初始化渲染之后不再需要变化，这种情况下适合使用 v-once，这样哪怕这些数据变化，vue 也会跳过更新，是一种代码优化手段。
3. 我们只需要作用的组件或元素上加上 v-once 即可。

补充：

1. vue3.2 之后，又增加了 v-memo，这个指令可以有条件的缓存模板并控制他们的更新。
2. v-once 的原理：编译器发现有 v-once 时，会将首次计算结果存入缓存对象，组件再次渲染时就会从缓存获取，从而避免再次计算。

34. 什么场景使用嵌套路由

• 在平时开发中，应用的有些界面是由多层嵌套的组件组合而来的，这种情况下，url 各部分通常对应某个嵌套的组件，vue-router 中可以使用嵌套路由表示这种关系。
• 表现形式是在两个路由间切换时，他们有公用的视图内容。此时通常提取一个父组件，内部放上 view-router，从而形成物理上的嵌套，和逻辑上的嵌套对应起来。定义嵌套路由时使用 children 属性组织嵌套关系
• 原理上是在 router-view 组件内部判断其所处嵌套的深度，将这个深度作为匹配组件数组 matched 的索引，获取对应渲染组件并渲染之。

如果你说不出来，可以直接举例子。当我开发一个页面时，如果需要显示一个顶部导航栏，通过导航栏跳转到不同的页面，而顶部的导航栏又必须要在每个页面显示时，就可以使用嵌套路由；还可以举例，当我需要查看某个列表的详情页面时，往往需要嵌套路由 （detail/:id）

35. 如何监听 Vuex 状态变化？

1. watch
2. store.subscribe()

watch 方式，可以以字符串形式监听 $store.state.xx; subscribe 方法参数是一个回调函数，回调函数接受mutation 对象和 state 对象，可以通过 mutation.type 判断监听的目标。 wtach 方法更简单好用， subscribe 会略繁琐，一般

36. Vue 实例挂载过程发生了什么？

1. 挂载实例的过程就是 app.mount()的过程，整体上就做了两件事：初始化和建立更新机制
2. 初始化会创建组件实例、初始化组件状态、创建各种响应式数据
3. 简历更新机制这一步会立即执行一次组件更新函数，这会首次执行渲染函数并执行 patch 将前面获得vnode 转换为 dom；同时会创建它内部响应式数据和组件更新函数之间的依赖关系，这使得以后数据变化时会执行对应的更新函数。

37. key 的作用

1. key 的作用主要是为了更高效的更新虚拟 DOM 。
2. key 是 vue 在 patch 过程中判断两个节点是否是相同节点的关键条件（另一个是元素类型），如果不设置 key，它的值就是 undefined，vue 则可能永远认为这是两个相同节点，只能去做更新操作，这造成了大量的 dom 更新操作，明显是不可取的。
3. 实际使用的过程中必须设置 key，而且应该尽量避免使用数组索引，这可能导致一些隐藏 bug。

38. watch 和 watchEffect

1. watchEffect立即运行函数，被动地追踪它的依赖，传入的函数即是依赖收集的数据源，也是回调函数；watch 侦测一个或多个响应式数据源，在数据源变化时调用一个回调函数，通过 immediate 选项也可以设置立即执行一次。
2. watchEffect是一种特殊的 watch。如果不关心响应式数据前后的值，可以使用 watchEffect。其他情况都可以用 watch。

39. 父子组件创建、挂载顺序

parent created -> child created -> child mounted -> parent mounted

原因：Vue 创建是一个递归的过程，先创建父组件，有子组件就会创建子组件，因此创建时先有父组件再有子组件；子组件首次创建时会添加 Mounted 钩子到队列，等到 patch 结束再执行它们，可见子组件的 mounted 钩子是选进入到队列中的，因此等到 patch 结束执行这些钩子时也先执行。

40. 说说你对 Vuex 的理解

1. vuex是一个专门为vue应用开发的状态管理模式库，
2. 当你遇到多个组件共享状态时或者项目中的组件难以管理的时候就可以使用vuex，它以一个全局单例模式管理全局的状态。
3. 基本核心概念有 state、mutation、action、getters、module等
4. 说些使用过程的感受 ts不友好 模块使用繁琐 页面刷新数据也会消失

41. 什么是递归组件？使用场景有哪些？

1. 如果某个组件通过组件名称引用它自己，这种情况就是递归组件。
2. 类似 Tree、Menu 这类组件，它们的节点往往包含子节点，子节点结构和父节点往往是相同的。这类组件的数据往往也是树形结构，这种都是使用递归组件的典型场景。

42. 你写过自定义指令吗？

使用自定义指令分为定义、注册、和使用

1. 定义有两种方式，对象和函数形式，前者类似组件定义，有各种生命周期；后者只会在 mounted 和 updated 时执行
   
2. 注册：可以使用 app.directive 全局注册 也可以通过选项局部注册
   
3. 使用时在注册名称前加上 v-即可。
   
4. v-copy 复制粘贴
   
5. v-lazy 图片懒加载
   
6. v-debounce 防抖
   
7. v-permission 按钮权限
   
8. v-longpress 长按
   

43. Vue3新特性

API 层面

1. Composition API
2. setup 语法糖
3. Teleport 传送门
4. Fragments 可以多个根节点
5. Emits
6. createRenderer 自定义渲染器
7. SFC 状态驱动 css 变量 (v-bind in <style>)

此外，Vue3在框架层面也有很多两点和改进

• 更快

• 虚拟 DOM 重写
• 编译器优化：静态提升、patchFlags、block 等
• 基于 Proxy 的响应式系统

• 更小：更好的摇树优化
• 更容易维护：TS + 模块化
• 更容易扩展

• 独立的响应化模块
• 自定义渲染器

44. Vue3设计目标和优化点

最大设计目标就是替代 Vue2，为了实现这一点，Vue3 在以下几个方面做了很大改进，如：易用性，框架性能、扩展性、可维护性、开发体验等

1. 易用性方面：主要有 API 简化 v-model 变成了 v-model 和 sync 修饰符的结合体。类似的还有 h(type,props,children) 函数中的 props 不用考虑区分属性、特性、事件等，框架替我们判断，易用性增。
2. 开发体验方面：新组建 TeleportFragmentSuspense 等都会简化特定场景的代码编写。 setup 语法糖更是极大提升了我们的开发体验。
3. 扩展性方面提升： 如独独立的 reactivity 模块，custom render API等
4. 可维护性方面主要是 Composition API，更容易编写高复用性的业务逻辑。还有对TS支持的提升。
5. 性能方面：编译器优化、基于 Proxy 的响应式系统。
6. 。。。

45. Vue3性能提升体现在哪些方面？

1. 代码方面：全新的响应式API，基于 Proxy 实现，初始化事件和内存占用均大幅改进；
2. 编译方面：做了更多编译优化处理，比如静态提升、动态内容标记、事件缓存、区块等，可以有效跳过大量diff过程
3. 打包方面：更好的支持 tree-shaking ，因此体积更小，加载更快.（因为vue3 所有的API都通过ES6模块化的方式引入，这样就能让webpack或rollup等打包工具在打包时对没有用到API进行剔除，最小化bundle体积）

46. $attrs 和 $listeners 是做什么的？

$attrs 获取没有在 props 中定义的属性，v-bind="$attrs" 可以用于属性透传 $listeners 用于获取事件，vue3 中已经移除合并到 attrs 中，使用起来更方便

47. Composition API 和 Option API 有何不同？

Composition API 是一组API，包括 Reactivity API、生命钩子、依赖注入，使用户可以通过导入函数方式编写组件，而 Options API 则通过声明组件选项的对象形式编写组件。

Composition API 更简洁、逻辑复用更高效。解决的过去 Options API 中 mixins 的各种缺点（会冲突很混乱）；另外 Composition API 更自由，没有 Options API 那样固定的写法，并且可以更有效的将逻辑代码组织在一起，而不用东一块西一块搞得很混乱，最后 Composition API 拥有更好的类型推断，对 ts 支持友好。

48. 你知道哪些 Vue 最佳实践

编码风格方面：

1. 组件命名时使用 多词风格避免和html元素冲突
2. 属性名峰命名，模板或jsx中使用 肉串命名
3. v-for 务必加上key 且不要和v-if写在一起‘’

性能方面：

1. 路由懒加载减少应用尺寸
2. SSR 减少首屏加载事件
3. v-oncev-memo
4. 长列表 虚拟滚动技术
5. 对于深层嵌套对象的大数据可以使用 shallowRef 或 shallowReactive 降低开销
6. 避免不必要的组件抽象

49. mutation 和 action 的区别？

mutation 用于修改 stateaction 用于提交一个 mutation，而且 action 可以包含异步操作

50. 如何从0实现vuex

1. 要实现一个 Store 存储全局状态
2. 要提供修改状态所需的API：commit({type, payload}), dispatch(type,payload)

实现 Store，可以定义 Store 类，构造函数接受选项 options，设置属性 state 对外暴露状态，提供 commit 和 dispatch 修改属性。这里需要设置 state 为响应式对象，同时将 Store 定义为一个 Vue 插件(install方法)。

commit 可以获取用户传入 mutations 并执行它，这样可以按用户提供的方法修改状态，dispatch 类似，但是 dispatch 需要返回一个 Promise 给用户用于处理异步结果。

大厂面试题分享 面试题库

前后端面试题库 （面试必备） 推荐：★★★★★

地址：前端面试题库  web前端面试题库 VS java后端面试题库大全