大家好，我是，一个爱分享的老前端。前一段时间有很多小伙伴找我做经典Vue面试题解析。我整整花了1个月时间找题写答案，录视频，所有内容均为原创。本来打算全部写完再来发一篇鸿篇巨制，不过找我要学习材料的小伙伴太多，只好提前发布。这里是已经写完的前半部分，大家务必点赞、收藏保存一下，我后续还在这一篇更新下半部分，希望大家多多支持，感谢。

我组织了一个面试学习群，，二维码过期的话，请私信我，大家一起卷~；

01-Vue组件之间通信方式有哪些

vue是组件化开发框架，所以对于vue应用来说组件间的数据通信非常重要。 此题主要考查大家vue基本功，对于vue基础api运用熟练度。 另外一些边界知识如provide/inject/$attrs则提现了面试者的知识广度。

1. 按组件关系阐述使用场景

1. 组件通信常用方式有以下8种：

注意vue3中废弃的几个API

1. 根据组件之间关系讨论组件通信最为清晰有效

此题考查常识，文档中曾有详细说明|；也是一个很好的实践题目，项目中经常会遇到，能够看出面试者api熟悉程度和应用能力。

1. 为什么是这样的，说出细节
2. 哪些场景可能导致我们这样做，该怎么处理

1. 实践中不应该把v-for和v-if放一起

2. 在vue2中，v-for的优先级是高于v-if，把它们放在一起，输出的渲染函数中可以看出会先执行循环再判断条件，哪怕我们只渲染列表中一小部分元素，也得在每次重渲染的时候遍历整个列表，这会比较浪费；另外需要注意的是在vue3中则完全相反，v-if的优先级高于v-for，所以v-if执行时，它调用的变量还不存在，就会导致异常

3. 通常有两种情况下导致我们这样做：

08 - 说一说你对vue响应式理解？

这是一道必问题目，但能回答到位的比较少。如果只是看看一些网文，通常没什么底气，经不住面试官推敲，但像我们这样即看过源码还造过轮子的，回答这个问题就会比较有底气啦。

1. 为什么vue需要响应式？
2. 它能给我们带来什么好处？
3. vue的响应式是怎么实现的？有哪些优缺点？
4. vue3中的响应式的新变化

1. 所谓数据响应式就是能够使数据变化可以被检测并对这种变化做出响应的机制。
2. MVVM框架中要解决的一个核心问题是连接数据层和视图层，通过数据驱动应用，数据变化，视图更新，要做到这点的就需要对数据做响应式处理，这样一旦数据发生变化就可以立即做出更新处理。
3. 以vue为例说明，通过数据响应式加上虚拟DOM和patch算法，开发人员只需要操作数据，关心业务，完全不用接触繁琐的DOM操作，从而大大提升开发效率，降低开发难度。
4. vue2中的数据响应式会根据数据类型来做不同处理，如果是对象则采用Object.defineProperty()的方式定义数据拦截，当数据被访问或发生变化时，我们感知并作出响应；如果是数组则通过覆盖数组对象原型的7个变更方法，使这些方法可以额外的做更新通知，从而作出响应。这种机制很好的解决了数据响应化的问题，但在实际使用中也存在一些缺点：比如初始化时的递归遍历会造成性能损失；新增或删除属性时需要用户使用Vue.set/delete这样特殊的api才能生效；对于es6中新产生的Map、Set这些数据结构不支持等问题。
5. 为了解决这些问题，vue3重新编写了这一部分的实现：利用ES6的Proxy代理要响应化的数据，它有很多好处，编程体验是一致的，不需要使用特殊api，初始化性能和内存消耗都得到了大幅改善；另外由于响应化的实现代码抽取为独立的reactivity包，使得我们可以更灵活的使用它，第三方的扩展开发起来更加灵活了。

现有框架几乎都引入了虚拟 DOM 来对真实 DOM 进行抽象，也就是现在大家所熟知的 VNode 和 VDOM，那么为什么需要引入虚拟 DOM 呢？围绕这个疑问来解答即可！

1. vdom如何生成，又如何成为dom
2. 在后续的diff中的作用

1. 虚拟dom顾名思义就是虚拟的dom对象，它本身就是一个 JavaScript对象，只不过它是通过不同的属性去描述一个视图结构。

2. 通过引入vdom我们可以获得如下好处：

   将真实元素节点抽象成 VNode，有效减少直接操作 dom 次数，从而提高程序性能

   • 直接操作 dom 是有限制的，比如：diff、clone 等操作，一个真实元素上有许多的内容，如果直接对其进行 diff 操作，会去额外 diff 一些没有必要的内容；同样的，如果需要进行 clone 那么需要将其全部内容进行复制，这也是没必要的。但是，如果将这些操作转移到 JavaScript 对象上，那么就会变得简单了。
   • 操作 dom 是比较昂贵的操作，频繁的dom操作容易引起页面的重绘和回流，但是通过抽象 VNode 进行中间处理，可以有效减少直接操作dom的次数，从而减少页面重绘和回流。
   • 同一 VNode 节点可以渲染成不同平台上的对应的内容，比如：渲染在浏览器是 dom 元素节点，渲染在 Native( iOS、Android) 变为对应的控件、可以实现 SSR 、渲染到 WebGL 中等等
   • Vue3 中允许开发者基于 VNode 实现自定义渲染器（renderer），以便于针对不同平台进行渲染。

1. vdom如何生成？在vue中我们常常会为组件编写模板 - template， 这个模板会被编译器 - compiler编译为渲染函数，在接下来的挂载（mount）过程中会调用render函数，返回的对象就是虚拟dom。但它们还不是真正的dom，所以会在后续的patch过程中进一步转化为dom。

2. 挂载过程结束后，vue程序进入更新流程。如果某些响应式数据发生变化，将会引起组件重新render，此时就会生成新的vdom，和上一次的渲染结果diff就能得到变化的地方，从而转换为最小量的dom操作，高效更新视图。

必问题目，涉及vue更新原理，比较考查理解深度。

1. diff算法是干什么的
2. 拔高：说一下vue3中的优化

2.最初Vue1.x视图中每个依赖均有更新函数对应，可以做到精准更新，因此并不需要虚拟DOM和patching算法支持，但是这样粒度过细导致Vue1.x无法承载较大应用；Vue 2.x中为了降低Watcher粒度，每个组件只有一个Watcher与之对应，此时就需要引入patching算法才能精确找到发生变化的地方并高效更新。

3.vue中diff执行的时刻是组件内响应式数据变更触发实例执行其更新函数时，更新函数会再次执行render函数获得最新的虚拟DOM，然后执行patch函数，并传入新旧两次虚拟DOM，通过比对两者找到变化的地方，最后将其转化为对应的DOM操作。

4.patch过程是一个递归过程，遵循深度优先、同层比较的策略；以vue3的patch为例：

• 首先判断两个节点是否为相同同类节点，不同则删除重新创建
• 如果双方都是文本则更新文本内容
• 如果双方都是元素节点则递归更新子元素，同时更新元素属性
• 更新子节点时又分了几种情况：
  • 新的子节点是文本，老的子节点是数组则清空，并设置文本；
  • 新的子节点是文本，老的子节点是文本则直接更新文本；
  • 新的子节点是数组，老的子节点是文本则清空文本，并创建新子节点数组中的子元素；
  • 新的子节点是数组，老的子节点也是数组，那么比较两组子节点，更新细节blabla

官网列举的最值得注意的新特性：

以上这些是api相关，另外还有很多框架特性也不能落掉。

1. 另外，Vue3.0在框架层面也有很多亮眼的改进：

• 基于Proxy的响应式系统

12 - 怎么定义动态路由？怎么获取传过来的动态参数？

API题目，考查基础能力，不容有失，尽可能说的详细。

1. 什么时候使用动态路由，怎么定义动态路由

1. 很多时候，我们需要将给定匹配模式的路由映射到同一个组件，这种情况就需要定义动态路由。}，其中:id就是路径参数
2. 路径参数 用冒号 : 表示。当一个路由被匹配时，它的 params的值将在每个组件中以 this.$route.params的形式暴露出来。

1. 如何响应动态路由参数的变化

13-如果让你从零开始写一个vue路由，说说你的思路

首先思考vue路由要解决的问题：用户点击跳转链接内容切换，页面不刷新。

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

1. 首先我会定义一个createRouter函数，返回路由器实例，实例内部做几件事：
2. 回调里根据path匹配对应路由
3. 将router定义成一个Vue插件，即实现install方法，内部做两件事：
   • 实现两个全局组件：router-link和router-view，分别实现页面跳转和内容显示
   • 定义两个全局变量：$route和$router，组件内可以访问当前路由和路由器实例

14-能说说key的作用吗？

这是一道特别常见的问题，主要考查大家对虚拟DOM和patch细节的掌握程度，能够反映面试者理解层次。

1. 给出结论，key的作用是用于优化patch性能
2. 总结：可从源码层面描述一下vue如何判断两个节点是否相同

1. key的作用主要是为了更高效的更新虚拟DOM。
2. vue在patch过程中判断两个节点是否是相同节点是key是一个必要条件，渲染一组列表时，key往往是唯一标识，所以如果不定义key的话，vue只能认为比较的两个节点是同一个，哪怕它们实际上不是，这导致了频繁更新元素，使得整个patch过程比较低效，影响性能。
3. 实际使用中在渲染一组列表时key必须设置，而且必须是唯一标识，应该避免使用数组索引作为key，这可能导致一些隐蔽的bug；vue中在使用相同标签元素过渡切换时，也会使用key属性，其目的也是为了让vue可以区分它们，否则vue只会替换其内部属性而不会触发过渡效果。
4. 从源码中可以知道，vue判断两个节点是否相同时主要判断两者的key和元素类型等，因此如果不设置key，它的值就是undefined，则可能永远认为这是两个相同节点，只能去做更新操作，这造成了大量的dom更新操作，明显是不可取的。

上面案例重现的是以下过程

这道题及考察使用，有考察原理，nextTick在开发过程中应用的也较少，原理上和vue异步更新有密切关系，对于面试者考查很有区分度，如果能够很好回答此题，对面试效果有极大帮助。

1. 开发时何时使用它？抓抓头，想想你在平时开发中使用它的地方
2. 下面介绍一下如何使用nextTick
3. 原理解读，结合异步更新和nextTick生效方式，会显得你格外优秀

1. 是等待下一次 DOM 更新刷新的工具方法。

2. Vue有个异步更新策略，意思是如果数据变化，Vue不会立刻更新DOM，而是开启一个队列，把组件更新函数保存在队列中，在同一事件循环中发生的所有数据变更会异步的批量更新。这一策略导致我们对数据的修改不会立刻体现在DOM上，此时如果想要获取更新后的DOM状态，就需要使用nextTick。

3. 开发时，有两个场景我们会用到nextTick：

• 响应式数据变化后获取DOM更新后的状态，比如希望获取列表更新后的高度。

1. 所以我们只需要在传入的回调函数中访问最新DOM状态即可，或者我们可以await nextTick()方法返回的Promise之后做这件事。

2. 在Vue内部，nextTick之所以能够让我们看到DOM更新后的结果，是因为我们传入的callback会被添加到队列刷新函数(flushSchedulerQueue)的后面，这样等队列内部的更新函数都执行完毕，所有DOM操作也就结束了，callback自然能够获取到最新的DOM值。

两个重要API，反应应聘者熟练程度。

1. 先看, 两者定义，列举使用上的差异
2. 列举使用场景上的差异，如何选择

computed特点：具有响应式的返回值

watch特点：侦测变化，执行回调

1. 计算属性可以从组件数据派生出新数据，最常见的使用方式是设置一个函数，返回计算之后的结果，computed和methods的差异是它具备缓存性，如果依赖项不变时不会重新计算。侦听器可以侦测某个响应式数据的变化并执行副作用，常见用法是传递一个函数，执行副作用，watch没有返回值，但可以执行异步操作等复杂逻辑。
2. 计算属性常用场景是简化行内模板中的复杂表达式，模板中出现太多逻辑会是模板变得臃肿不易维护。侦听器常用场景是状态变化之后做一些额外的DOM操作或者异步操作。选择采用何用方案时首先看是否需要派生出新值，基本能用计算属性实现的方式首选计算属性。
3. 使用过程中有一些细节，比如计算属性也是可以传递对象，成为既可读又可写的计算属性。watch可以传递对象，设置deep、immediate等选项。
4. vue3中watch选项发生了一些变化，例如不再能侦测一个点操作符之外的字符串形式的表达式； reactivity API中新出现了watch、watchEffect可以完全替代目前的watch选项，且功能更加强大。

1. 计算属性可以从组件数据派生出新数据，最常见的使用方式是设置一个函数，返回计算之后的结果，computed和methods的差异是它具备缓存性，如果依赖项不变时不会重新计算。侦听器可以侦测某个响应式数据的变化并执行副作用，常见用法是传递一个函数，执行副作用，watch没有返回值，但可以执行异步操作等复杂逻辑。
2. 计算属性常用场景是简化行内模板中的复杂表达式，模板中出现太多逻辑会是模板变得臃肿不易维护。侦听器常用场景是状态变化之后做一些额外的DOM操作或者异步操作。选择采用何用方案时首先看是否需要派生出新值，基本能用计算属性实现的方式首选计算属性。
3. 使用过程中有一些细节，比如计算属性也是可以传递对象，成为既可读又可写的计算属性。watch可以传递对象，设置deep、immediate等选项。
4. vue3中watch选项发生了一些变化，例如不再能侦测一个点操作符之外的字符串形式的表达式； reactivity API中新出现了watch、watchEffect可以完全替代目前的watch选项，且功能更加强大。

1. watch会不会立即执行？

17-说一下 Vue 子组件和父组件创建和挂载顺序

这题考查大家对创建过程的理解程度。

1. 创建过程自上而下，挂载过程自下而上；即：
2. 之所以会这样是因为Vue创建过程是一个递归过程，先创建父组件，有子组件就会创建子组件，因此创建时先有父组件再有子组件；子组件首次创建时会添加mounted钩子到队列，等到patch结束再执行它们，可见子组件的mounted钩子是先进入到队列中的，因此等到patch结束执行这些钩子时也先执行。

18-怎么缓存当前的组件？缓存后怎么更新？

缓存组件使用keep-alive组件，这是一个非常常见且有用的优化手段，vue3中keep-alive有比较大的更新，能说的点比较多。

1. 缓存用keep-alive，它的作用与用法

1. 开发中缓存组件使用keep-alive组件，keep-alive是vue内置组件，keep-alive包裹动态组件component时，会缓存不活动的组件实例，而不是销毁它们，这样在组件切换过程中将状态保留在内存中，防止重复渲染DOM。

1. 缓存后如果要获取数据，解决方案可以有以下两种：

   • // 每次进入路由执行

1. keep-alive是一个通用组件，它内部定义了一个map，缓存创建过的组件实例，它返回的渲染函数内部会查找内嵌的component组件对应组件的vnode，如果该组件在map中存在就直接返回它。由于component的is属性是个响应式数据，因此只要它变化，keep-alive的render函数就会重新执行。

19-从0到1自己构架一个vue项目，说说有哪些步骤、哪些重要插件、目录结构你会怎么组织

综合实践类题目，考查实战能力。没有什么绝对的正确答案，把平时工作的重点有条理的描述一下即可。

1. 构建项目，创建项目基本结构

1. 从0创建一个项目我大致会做以下事情：项目构建、引入必要插件、代码规范、提交规范、常用库和组件

1. 目录结构我有如下习惯： .vscode：用来放项目中的 vscode 配置

   public：用来放一些诸如 页头icon 之类的公共文件，会被打包到dist根目录下

   src：用来放项目代码文件

   api：用来放http的一些接口配置

   assets：用来放一些 CSS 之类的静态资源

   layout：用来放项目的布局

   router：用来放项目的路由配置

   store：用来放状态管理Pinia的配置

   utils：用来放项目中的工具方法类

   views：用来放项目的页面文件

20-实际工作中，你总结的vue最佳实践有哪些？

看到这样的题目，可以用以下图片来回答：

我从编码风格、性能、安全等方面说几条：

• 命名组件时使用“多词”风格避免和HTML元素冲突
• 使用“细节化”方式定义属性而不是只有一个属性名
• 属性名声明时使用“驼峰命名”，模板或jsx中使用“肉串命名”
• 使用v-for时务必加上key，且不要跟v-if写在一起
• 路由懒加载减少应用尺寸
• 利用SSR减少首屏加载时间
• 利用v-once渲染那些不需要更新的内容
• 一些长列表可以利用虚拟滚动技术避免内存过度占用

21 - 简单说一说你对vuex理解？

1. 拓展：一些个人思考、实践经验等

1. Vuex 是一个专为 Vue.js 应用开发的状态管理模式 + 库。它采用集中式存储，管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。
2. 我们期待以一种简单的“单向数据流”的方式管理应用，即状态 -> 视图 -> 操作单向循环的方式。但当我们的应用遇到多个组件共享状态时，比如：多个视图依赖于同一状态或者来自不同视图的行为需要变更同一状态。此时单向数据流的简洁性很容易被破坏。因此，我们有必要把组件的共享状态抽取出来，以一个全局单例模式管理。通过定义和隔离状态管理中的各种概念并通过强制规则维持视图和状态间的独立性，我们的代码将会变得更结构化且易维护。这是vuex存在的必要性，它和react生态中的redux之类是一个概念。
3. Vuex 解决状态管理的同时引入了不少概念：例如state、mutation、action等，是否需要引入还需要根据应用的实际情况衡量一下：如果不打算开发大型单页应用，使用 Vuex 反而是繁琐冗余的，一个简单的 就足够了。但是，如果要构建一个中大型单页应用，Vuex 基本是标配。
4. 我在使用vuex过程中感受到一些blabla

1. vuex有什么缺点吗？你在开发过程中有遇到什么问题吗？
2. action和mutation的区别是什么？为什么要区分它们？

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

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

vue3编译过程窥探：

1. Vue中编译器何时执行？
2. react有没有编译器？

23-Vue实例挂载的过程中发生了什么?

挂载过程完成了最重要的两件事：

把这两件事说清楚即可！

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

做小程序多少钱？这是很多想做小程序的人所好奇的问题。小程序的成本跟你所选用的开发方式有关，自己开发和找别人开发价格也是不一样的，对小程序的要求不同价格也不一样。下面就跟大家说说究竟做小程序多少钱。

做小程序多少钱？不同制作方法，不同价格：

定制开发小程序的价格一般都是以万起步，因为这个在开发前期一定要把自己的需求明确的跟技术团队反复沟通清楚，不要怕麻烦，因为是定制类型，如果后面开发出来之后的产品不是您需要的，或者是跟您最初的设想是不一致的，进行调整的话在技术成本上肯定会有所增加。

所以建议是沟通清楚您的具体使用需求，要求开发团队给出必要的功能清单，并针对每个清单给出能弄明白的解释或者是有效的沟通，不要似是而非，这样出来的小程序才是您最终想要的，给出的价格也会是最具体的，也方便对自己的预算做清晰的评估。

对于不懂代码知识的小白来说，目前比较常见的方式是选择模板类工具，这种开发方式成本很低，只需要支付一个小程序模板的成本。基础电商类模板一般在三四千左右，展示类小程序则是千元左右，如果是功能简单的文章阅读小程序，甚至可以免费。总之，功能越多的模板，费用也越高。

所谓源码购买的小程序，指的是小程序开发公司开发了一个小程序系统，授权给您使用，您只需要购买授权即可。

授权大家应该容易理解，就好比于在一些有版权图片素材网站上，购买一个图片的授权，授权一般也都是终身使用。

此种方法制作的小程序，方便且上线很快，且不用按年缴费，也不需要重新支付费用。若有合适的源码，那么这种方式是最省钱、最有保障的。

做小程序多少钱？通过以上内容，你是不是对小程序的价格有了大致了解。做小程序根据自己所在行业，根据自己需求，根据预算，进行选择即可。

未经允许不得转载，或转载时需注明出处