本篇文章给大家总结分享20+个Vue经典面试题（附源码级详解），带你梳理基础知识，增强Vue知识储备，值得收藏，快来看看吧！
vue是组件化开发框架，所以对于vue应用来说组件间的数据通信非常重要。 此题主要考查大家vue基本功，对于vue基础api运用熟练度。 另外一些边界知识如provide/inject/$attrs则提现了面试者的知识广度。
组件传参的各种方式
思路分析：
总述知道的所有方式
按组件关系阐述使用场景
回答范例：
1、组件通信常用方式有以下8种：
注意vue3中废弃的几个API
https://v3-migration.vuejs.org/breaking-changes/children.html
https://v3-migration.vuejs.org/breaking-changes/listeners-removed.html
https://v3-migration.vuejs.org/breaking-changes/events-api.html#overview
2、根据组件之间关系讨论组件通信最为清晰有效
父子组件
props/$emit/$parent/ref/$attrs兄弟组件
$parent/$root/eventbus/vuex跨层级关系
eventbus/vuex/provide+inject分析：
此题考查常识，文档中曾有详细说明v2|v3；也是一个很好的实践题目，项目中经常会遇到，能够看出面试者api熟悉程度和应用能力。
思路分析：
先给出结论
为什么是这样的，说出细节
哪些场景可能导致我们这样做，该怎么处理
总结，拔高
回答范例：
实践中不应该把v-for和v-if放一起
在vue2中，v-for的优先级是高于v-if，把它们放在一起，输出的渲染函数中可以看出会先执行循环再判断条件，哪怕我们只渲染列表中一小部分元素，也得在每次重渲染的时候遍历整个列表，这会比较浪费；另外需要注意的是在vue3中则完全相反，v-if的优先级高于v-for，所以v-if执行时，它调用的变量还不存在，就会导致异常
通常有两种情况下导致我们这样做：
为了过滤列表中的项目(比如v-for="user in users" v-if="user.isActive")。此时定义一个计算属性 (比如activeUsers)，让其返回过滤后的列表即可（比如users.filter(u=>u.isActive)）。
为了避免渲染本应该被隐藏的列表(比如v-for="user in users" v-if="shouldShowUsers")。此时把v-if移动至容器元素上 (比如ul、ol)或者外面包一层template即可。
文档中明确指出永远不要把v-if和v-for同时用在同一个元素上，显然这是一个重要的注意事项。
源码里面关于代码生成的部分，能够清晰的看到是先处理v-if还是v-for，顺序上vue2和vue3正好相反，因此产生了一些症状的不同，但是不管怎样都是不能把它们写在一起的。
知其所以然：
做个测试，test.html两者同级时，渲染函数如下：
ƒ anonymous( ) { with(this){return _c('div',{attrs:{"id":"app"}},_l((items),function(item){return (item.isActive)?_c('div',{key:item.id},[_v("\n "+_s(item.name)+"\n ")]):_e()}),0)} }
做个测试，test-v3.html
源码中找答案
v2：https://github1s.com/vuejs/vue/blob/HEAD/src/compiler/codegen/index.js#L65-L66
v3：https://github1s.com/vuejs/core/blob/HEAD/packages/compiler-core/src/codegen.ts#L586-L587
必问题目，考查vue基础知识。
思路
给出概念
列举生命周期各阶段
阐述整体流程
结合实践
扩展：vue3变化
回答范例
1、每个Vue组件实例被创建后都会经过一系列初始化步骤，比如，它需要数据观测，模板编译，挂载实例到dom上，以及数据变化时更新dom。这个过程中会运行叫做生命周期钩子的函数，以便用户在特定阶段有机会添加他们自己的代码。
2、Vue生命周期总共可以分为8个阶段：创建前后, 载入前后, 更新前后, 销毁前后，以及一些特殊场景的生命周期。vue3中新增了三个用于调试和服务端渲染场景。
| 生命周期v2 | 生命周期v3 | 描述 |
|---|---|---|
| beforeCreate | beforeCreate | 组件实例被创建之初 |
| created | created | 组件实例已经完全创建 |
| beforeMount | beforeMount | 组件挂载之前 |
| mounted | mounted | 组件挂载到实例上去之后 |
| beforeUpdate | beforeUpdate | 组件数据发生变化，更新之前 |
| updated | updated | 数据数据更新之后 |
| beforeDestroy | beforeUnmount | 组件实例销毁之前 |
| destroyed | unmounted | 组件实例销毁之后 |
| 生命周期v2 | 生命周期v3 | 描述 |
|---|---|---|
| activated | activated | keep-alive 缓存的组件激活时 |
| deactivated | deactivated | keep-alive 缓存的组件停用时调用 |
| errorCaptured | errorCaptured | 捕获一个来自子孙组件的错误时被调用 |
| - | renderTracked | 调试钩子，响应式依赖被收集时调用 |
| - | renderTriggered | 调试钩子，响应式依赖被触发时调用 |
| - | serverPrefetch | ssr only，组件实例在服务器上被渲染前调用 |
3、Vue生命周期流程图：
4、结合实践：
beforeCreate：通常用于插件开发中执行一些初始化任务
created：组件初始化完毕，可以访问各种数据，获取接口数据等
mounted：dom已创建，可用于获取访问数据和dom元素；访问子组件等。
beforeUpdate：此时view层还未更新，可用于获取更新前各种状态
updated：完成view层的更新，更新后，所有状态已是最新
beforeunmount：实例被销毁前调用，可用于一些定时器或订阅的取消
unmounted：销毁一个实例。可清理它与其它实例的连接，解绑它的全部指令及事件监听器
可能的追问
setup和created谁先执行？
setup中为什么没有beforeCreate和created？
知其所以然
vue3中生命周期的派发时刻：
https://github1s.com/vuejs/core/blob/HEAD/packages/runtime-core/src/componentOptions.ts#L554-L555
vue2中声明周期的派发时刻：
https://github1s.com/vuejs/vue/blob/HEAD/src/core/instance/init.js#L55-L56
题目分析：
双向绑定是vue的特色之一，开发中必然会用到的知识点，然而此题还问了实现原理，升级为深度考查。
思路分析：
给出双绑定义
双绑带来的好处
在哪使用双绑
使用方式、使用细节、vue3变化
原理实现描述
回答范例：
vue中双向绑定是一个指令v-model，可以绑定一个响应式数据到视图，同时视图中变化能改变该值。
v-model是语法糖，默认情况下相当于:value和@input。使用v-model可以减少大量繁琐的事件处理代码，提高开发效率。
通常在表单项上使用v-model，还可以在自定义组件上使用，表示某个值的输入和输出控制。
通过的方式将xxx的值绑定到表单元素value上；对于checkbox，可以使用true-value和false-value指定特殊的值，对于radio可以使用value指定特殊的值；对于select可以通过options元素的value设置特殊的值；还可以结合.lazy,.number,.trim对v-mode的行为做进一步限定；v-model用在自定义组件上时又会有很大不同，vue3中它类似于sync修饰符，最终展开的结果是modelValue属性和update:modelValue事件；vue3中我们甚至可以用参数形式指定多个不同的绑定，例如v-model:foo和v-model:bar，非常强大！
v-model是一个指令，它的神奇魔法实际上是vue的编译器完成的。我做过测试，包含v-model的模板，转换为渲染函数之后，实际上还是是value属性的绑定以及input事件监听，事件回调函数中会做相应变量更新操作。编译器根据表单元素的不同会展开不同的DOM属性和事件对，比如text类型的input和textarea会展开为value和input事件；checkbox和radio类型的input会展开为checked和change事件；select用value作为属性，用change作为事件。
可能的追问：
v-model和sync修饰符有什么区别
自定义组件使用v-model如果想要改变事件名或者属性名应该怎么做
知其所以然：
测试代码，test.html
观察输出的渲染函数：
// _c('input', { directives: [{ name: "model", rawName: "v-model", value: (foo), expression: "foo" }], attrs: { "type": "text" }, domProps: { "value": (foo) }, on: { "input": function ($event) { if ($event.target.composing) return; foo = $event.target.value } } })
// _c('input', { directives: [{ name: "model", rawName: "v-model", value: (bar), expression: "bar" }], attrs: { "type": "checkbox" }, domProps: { "checked": Array.isArray(bar) ? _i(bar, null) > -1 : (bar) }, on: { "change": function ($event) { var $$a = bar, $$el = $event.target, $$c = $$el.checked ? (true) : (false); if (Array.isArray($$a)) { var $$v = null, $$i = _i($$a, $$v); if ($$el.checked) { $$i < 0 && (bar = $$a.concat([$$v])) } else { $$i > -1 && (bar = $$a.slice(0, $$i).concat($$a.slice($$i + 1))) } } else { bar = $$c } } } })
// _c('select', { directives: [{ name: "model", rawName: "v-model", value: (baz), expression: "baz" }], on: { "change": function ($event) { var $$selectedVal = Array.prototype.filter.call( $event.target.options, function (o) { return o.selected } ).map( function (o) { var val = "_value" in o ? o._value : o.value; return val } ); baz = $event.target.multiple ? $$selectedVal : $$selectedVal[0] } } }, [ _c('option', { attrs: { "value": "vue" } }, [_v("vue")]), _v(" "), _c('option', { attrs: { "value": "react" } }, [_v("react")]) ])
此题属于实践题，考察大家对vue常用api使用熟练度，答题时不仅要列出这些解决方案，同时最好说出他们异同。
答题思路：
按照逻辑扩展和内容扩展来列举，
逻辑扩展有：mixins、extends、composition api；
内容扩展有slots；
分别说出他们使用方法、场景差异和问题。
作为扩展，还可以说说vue3中新引入的composition api带来的变化
回答范例：
常见的组件扩展方法有：mixins，slots，extends等
混入mixins是分发 Vue 组件中可复用功能的非常灵活的方式。混入对象可以包含任意组件选项。当组件使用混入对象时，所有混入对象的选项将被混入该组件本身的选项。
// 复用代码：它是一个配置对象，选项和组件里面一样 const mymixin = { methods: { dosomething(){} } } // 全局混入：将混入对象传入 Vue.mixin(mymixin) // 局部混入：做数组项设置到mixins选项，仅作用于当前组件 const Comp = { mixins: [mymixin] }
插槽主要用于vue组件中的内容分发，也可以用于组件扩展。
子组件Child
这个内容会被父组件传递的内容替换
父组件Parent
来自老爹的内容
如果要精确分发到不同位置可以使用具名插槽，如果要使用子组件中的数据可以使用作用域插槽。
组件选项中还有一个不太常用的选项extends，也可以起到扩展组件的目的
// 扩展对象 const myextends = { methods: { dosomething(){} } } // 组件扩展：做数组项设置到extends选项，仅作用于当前组件 // 跟混入的不同是它只能扩展单个对象 // 另外如果和混入发生冲突，该选项优先级较高，优先起作用 const Comp = { extends: myextends }
混入的数据和方法不能明确判断来源且可能和当前组件内变量产生命名冲突，vue3中引入的composition api，可以很好解决这些问题，利用独立出来的响应式模块可以很方便的编写独立逻辑并提供响应式的数据，然后在setup选项中组合使用，增强代码的可读性和维护性。例如：
// 复用逻辑1 function useXX() {} // 复用逻辑2 function useYY() {} // 逻辑组合 const Comp = { setup() { const {xx} = useXX() const {yy} = useYY() return {xx, yy} } }
可能的追问
Vue.extend方法你用过吗？它能用来做组件扩展吗？
知其所以然
mixins原理：
https://github1s.com/vuejs/core/blob/HEAD/packages/runtime-core/src/apiCreateApp.ts#L232-L233
https://github1s.com/vuejs/core/blob/HEAD/packages/runtime-core/src/componentOptions.ts#L545
slots原理：
https://github1s.com/vuejs/core/blob/HEAD/packages/runtime-core/src/componentSlots.ts#L129-L130
https://github1s.com/vuejs/core/blob/HEAD/packages/runtime-core/src/renderer.ts#L1373-L1374
https://github1s.com/vuejs/core/blob/HEAD/packages/runtime-core/src/helpers/renderSlot.ts#L23-L24
分析
这是一个实践知识点，组件化开发过程中有个单项数据流原则，不在子组件中修改父组件是个常识问题。
参考文档：https://staging.vuejs.org/guide/components/props.html#one-way-data-flow
思路
讲讲单项数据流原则，表明为何不能这么做
举几个常见场景的例子说说解决方案
结合实践讲讲如果需要修改父组件状态应该如何做
回答范例
所有的 prop 都使得其父子之间形成了一个单向下行绑定：父级 prop 的更新会向下流动到子组件中，但是反过来则不行。这样会防止从子组件意外变更父级组件的状态，从而导致你的应用的数据流向难以理解。另外，每次父级组件发生变更时，子组件中所有的 prop 都将会刷新为最新的值。这意味着你不应该在一个子组件内部改变 prop。如果你这样做了，Vue 会在浏览器控制台中发出警告。
const props = defineProps(['foo']) // ❌ 下面行为会被警告, props是只读的! props.foo = 'bar'
实际开发过程中有两个场景会想要修改一个属性：
**这个 prop 用来传递一个初始值；这个子组件接下来希望将其作为一个本地的 prop 数据来使用。**在这种情况下，最好定义一个本地的 data，并将这个 prop 用作其初始值：
const props = defineProps(['initialCounter']) const counter = ref(props.initialCounter)
**这个 prop 以一种原始的值传入且需要进行转换。**在这种情况下，最好使用这个 prop 的值来定义一个计算属性：
const props = defineProps(['size']) // prop变化，计算属性自动更新 const normalizedSize = computed(() => props.size.trim().toLowerCase())
实践中如果确实想要改变父组件属性应该emit一个事件让父组件去做这个变更。注意虽然我们不能直接修改一个传入的对象或者数组类型的prop，但是我们还是能够直接改内嵌的对象或属性。
分析
综合实践题目，实际开发中经常需要面临权限管理的需求，考查实际应用能力。
权限管理一般需求是两个：页面权限和按钮权限，从这两个方面论述即可。
思路
权限管理需求分析：页面和按钮权限
权限管理的实现方案：分后端方案和前端方案阐述
说说各自的优缺点
回答范例
权限管理一般需求是页面权限和按钮权限的管理
具体实现的时候分后端和前端两种方案：
前端方案会把所有路由信息在前端配置，通过路由守卫要求用户登录，用户登录后根据角色过滤出路由表。比如我会配置一个asyncRoutes数组，需要认证的页面在其路由的meta中添加一个roles字段，等获取用户角色之后取两者的交集，若结果不为空则说明可以访问。此过滤过程结束，剩下的路由就是该用户能访问的页面，最后通过router.addRoutes(accessRoutes)方式动态添加路由即可。
后端方案会把所有页面路由信息存在数据库中，用户登录的时候根据其角色查询得到其能访问的所有页面路由信息返回给前端，前端再通过addRoutes动态添加路由信息
按钮权限的控制通常会实现一个指令，例如v-permission，将按钮要求角色通过值传给v-permission指令，在指令的moutned钩子中可以判断当前用户角色和按钮是否存在交集，有则保留按钮，无则移除按钮。
纯前端方案的优点是实现简单，不需要额外权限管理页面，但是维护起来问题比较大，有新的页面和角色需求就要修改前端代码重新打包部署；服务端方案就不存在这个问题，通过专门的角色和权限管理页面，配置页面和按钮权限信息到数据库，应用每次登陆时获取的都是最新的路由信息，可谓一劳永逸！
知其所以然
路由守卫
https://github1s.com/PanJiaChen/vue-element-admin/blob/HEAD/src/permission.js#L13-L14
路由生成
https://github1s.com/PanJiaChen/vue-element-admin/blob/HEAD/src/store/modules/permission.js#L50-L51
动态追加路由
https://github1s.com/PanJiaChen/vue-element-admin/blob/HEAD/src/permission.js#L43-L44
可能的追问
类似Tabs这类组件能不能使用v-permission指令实现按钮权限控制？
⽤户管理 ⻆⾊管理
服务端返回的路由信息如何添加到路由器中？
// 前端组件名和组件映射表 const map = { //xx: require('@/views/xx.vue').default // 同步的⽅式 xx: () => import('@/views/xx.vue') // 异步的⽅式 } // 服务端返回的asyncRoutes const asyncRoutes = [ { path: '/xx', component: 'xx',... } ] // 遍历asyncRoutes，将component替换为map[component] function mapComponent(asyncRoutes) { asyncRoutes.forEach(route => { route.component = map[route.component]; if(route.children) { route.children.map(child => mapComponent(child)) } }) } mapComponent(asyncRoutes)
分析
这是一道必问题目，但能回答到位的比较少。如果只是看看一些网文，通常没什么底气，经不住面试官推敲，但像我们这样即看过源码还造过轮子的，回答这个问题就会比较有底气啦。
答题思路：
啥是响应式？
为什么vue需要响应式？
它能给我们带来什么好处？
vue的响应式是怎么实现的？有哪些优缺点？
vue3中的响应式的新变化
回答范例：
所谓数据响应式就是能够使数据变化可以被检测并对这种变化做出响应的机制。
MVVM框架中要解决的一个核心问题是连接数据层和视图层，通过数据驱动应用，数据变化，视图更新，要做到这点的就需要对数据做响应式处理，这样一旦数据发生变化就可以立即做出更新处理。
以vue为例说明，通过数据响应式加上虚拟DOM和patch算法，开发人员只需要操作数据，关心业务，完全不用接触繁琐的DOM操作，从而大大提升开发效率，降低开发难度。
vue2中的数据响应式会根据数据类型来做不同处理，如果是对象则采用Object.defineProperty()的方式定义数据拦截，当数据被访问或发生变化时，我们感知并作出响应；如果是数组则通过覆盖数组对象原型的7个变更方法，使这些方法可以额外的做更新通知，从而作出响应。这种机制很好的解决了数据响应化的问题，但在实际使用中也存在一些缺点：比如初始化时的递归遍历会造成性能损失；新增或删除属性时需要用户使用Vue.set/delete这样特殊的api才能生效；对于es6中新产生的Map、Set这些数据结构不支持等问题。
为了解决这些问题，vue3重新编写了这一部分的实现：利用ES6的Proxy代理要响应化的数据，它有很多好处，编程体验是一致的，不需要使用特殊api，初始化性能和内存消耗都得到了大幅改善；另外由于响应化的实现代码抽取为独立的reactivity包，使得我们可以更灵活的使用它，第三方的扩展开发起来更加灵活了。
知其所以然
vue2响应式：
https://github1s.com/vuejs/vue/blob/HEAD/src/core/observer/index.js#L135-L136
vue3响应式：
https://github1s.com/vuejs/core/blob/HEAD/packages/reactivity/src/reactive.ts#L89-L90
https://github1s.com/vuejs/core/blob/HEAD/packages/reactivity/src/ref.ts#L67-L68
分析
现有框架几乎都引入了虚拟 DOM 来对真实 DOM 进行抽象，也就是现在大家所熟知的 VNode 和 VDOM，那么为什么需要引入虚拟 DOM 呢？围绕这个疑问来解答即可！
思路
vdom是什么
引入vdom的好处
vdom如何生成，又如何成为dom
在后续的diff中的作用
回答范例
虚拟dom顾名思义就是虚拟的dom对象，它本身就是一个JavaScript对象，只不过它是通过不同的属性去描述一个视图结构。
通过引入vdom我们可以获得如下好处：
将真实元素节点抽象成 VNode，有效减少直接操作 dom 次数，从而提高程序性能
方便实现跨平台
vdom如何生成？在vue中我们常常会为组件编写模板 - template， 这个模板会被编译器 - compiler编译为渲染函数，在接下来的挂载（mount）过程中会调用render函数，返回的对象就是虚拟dom。但它们还不是真正的dom，所以会在后续的patch过程中进一步转化为dom。
挂载过程结束后，vue程序进入更新流程。如果某些响应式数据发生变化，将会引起组件重新render，此时就会生成新的vdom，和上一次的渲染结果diff就能得到变化的地方，从而转换为最小量的dom操作，高效更新视图。
知其所以然
vnode定义：
https://github1s.com/vuejs/core/blob/HEAD/packages/runtime-core/src/vnode.ts#L127-L128
观察渲染函数：21-vdom/test-render-v3.html
创建vnode：
https://github1s.com/vuejs/core/blob/HEAD/packages/runtime-core/src/vnode.ts#L291-L292
https://github1s.com/vuejs/core/blob/HEAD/packages/runtime-core/src/vnode.ts#L486-L487
https://github1s.com/vuejs/core/blob/HEAD/packages/runtime-core/src/apiCreateApp.ts#L283-L284
mount:
https://github1s.com/vuejs/core/blob/HEAD/packages/runtime-core/src/renderer.ts#L1171-L1172
调试mount过程：mountComponent
21-vdom/test-render-v3.html
分析
必问题目，涉及vue更新原理，比较考查理解深度。
思路
diff算法是干什么的
它的必要性
它何时执行
具体执行方式
拔高：说一下vue3中的优化
回答范例
1、Vue中的diff算法称为patching算法，它由Snabbdom修改而来，虚拟DOM要想转化为真实DOM就需要通过patch方法转换。
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为例：
5、vue3中引入的更新策略：编译期优化patchFlags、block等
知其所以然
patch关键代码
https://github1s.com/vuejs/core/blob/HEAD/packages/runtime-core/src/renderer.ts#L354-L355
调试 test-v3.html
分析
官网列举的最值得注意的新特性：https://v3-migration.vuejs.org/
也就是下面这些：
以上这些是api相关，另外还有很多框架特性也不能落掉。
回答范例
1、api层面Vue3新特性主要包括：Composition API、SFC Composition API语法糖、Teleport传送门、Fragments 片段、Emits选项、自定义渲染器、SFC CSS变量、Suspense
2、另外，Vue3.0在框架层面也有很多亮眼的改进：
知其所以然
体验编译器优化
https://sfc.vuejs.org/
reactive实现
https://github1s.com/vuejs/core/blob/HEAD/packages/reactivity/src/reactive.ts#L90-L91
分析
API题目，考查基础能力，不容有失，尽可能说的详细。
思路
什么是动态路由
什么时候使用动态路由，怎么定义动态路由
参数如何获取
细节、注意事项
回答范例
很多时候，我们需要将给定匹配模式的路由映射到同一个组件，这种情况就需要定义动态路由。
例如，我们可能有一个User组件，它应该对所有用户进行渲染，但用户 ID 不同。在 Vue Router 中，我们可以在路径中使用一个动态字段来实现，例如：{ path: '/users/:id', component: User }，其中:id就是路径参数
路径参数用冒号:表示。当一个路由被匹配时，它的params的值将在每个组件中以this.$route.params的形式暴露出来。
参数还可以有多个，例如/users/:username/posts/:postId；除了$route.params之外，$route对象还公开了其他有用的信息，如$route.query、$route.hash等。
如何响应动态路由参数的变化
https://router.vuejs.org/zh/guide/essentials/dynamic-matching.html#响应路由参数的变化
我们如何处理404 Not Found路由
https://router.vuejs.org/zh/guide/essentials/dynamic-matching.html#捕获所有路由或-404-not-found-路由
思路分析：
首先思考vue路由要解决的问题：用户点击跳转链接内容切换，页面不刷新。
回答范例：
一个SPA应用的路由需要解决的问题是页面跳转内容改变同时不刷新，同时路由还需要以插件形式存在，所以：
首先我会定义一个createRouter函数，返回路由器实例，实例内部做几件事：
将router定义成一个Vue插件，即实现install方法，内部做两件事：
知其所以然：
https://github1s.com/vuejs/router/blob/HEAD/src/router.ts#L355-L356
https://github1s.com/vuejs/router/blob/HEAD/src/history/html5.ts#L314-L315
RouterView
https://github1s.com/vuejs/router/blob/HEAD/src/RouterLink.ts#L184-L185
https://github1s.com/vuejs/router/blob/HEAD/src/RouterView.ts#L43-L44
分析：
这是一道特别常见的问题，主要考查大家对虚拟DOM和patch细节的掌握程度，能够反映面试者理解层次。
思路分析：
给出结论，key的作用是用于优化patch性能
key的必要性
实际使用方式
总结：可从源码层面描述一下vue如何判断两个节点是否相同
key的作用主要是为了更高效的更新虚拟DOM。
vue在patch过程中判断两个节点是否是相同节点是key是一个必要条件，渲染一组列表时，key往往是唯一标识，所以如果不定义key的话，vue只能认为比较的两个节点是同一个，哪怕它们实际上不是，这导致了频繁更新元素，使得整个patch过程比较低效，影响性能。
实际使用中在渲染一组列表时key必须设置，而且必须是唯一标识，应该避免使用数组索引作为key，这可能导致一些隐蔽的bug；vue中在使用相同标签元素过渡切换时，也会使用key属性，其目的也是为了让vue可以区分它们，否则vue只会替换其内部属性而不会触发过渡效果。
从源码中可以知道，vue判断两个节点是否相同时主要判断两者的key和元素类型等，因此如果不设置key，它的值就是undefined，则可能永远认为这是两个相同节点，只能去做更新操作，这造成了大量的dom更新操作，明显是不可取的。
知其所以然
测试代码，test-v3.html
上面案例重现的是以下过程
不使用key
如果使用key
// 首次循环patch A A B C D E A B F C D E // 第2次循环patch B B C D E B F C D E // 第3次循环patch E C D E F C D E // 第4次循环patch D C D F C D // 第5次循环patch C C F C // oldCh全部处理结束，newCh中剩下的F，创建F并插入到C前面
源码中找答案：
判断是否为相同节点
https://github1s.com/vuejs/core/blob/HEAD/packages/runtime-core/src/vnode.ts#L342-L343
更新时的处理
https://github1s.com/vuejs/core/blob/HEAD/packages/runtime-core/src/renderer.ts#L1752-L1753
不使用key
如果使用key
// 首次循环patch A A B C D E A B F C D E // 第2次循环patch B B C D E B F C D E // 第3次循环patch E C D E F C D E // 第4次循环patch D C D F C D // 第5次循环patch C C F C // oldCh全部处理结束，newCh中剩下的F，创建F并插入到C前面
源码中找答案：
判断是否为相同节点
https://github1s.com/vuejs/core/blob/HEAD/packages/runtime-core/src/vnode.ts#L342-L343
更新时的处理
https://github1s.com/vuejs/core/blob/HEAD/packages/runtime-core/src/renderer.ts#L1752-L1753
分析
这道题及考察使用，有考察原理，nextTick在开发过程中应用的也较少，原理上和vue异步更新有密切关系，对于面试者考查很有区分度，如果能够很好回答此题，对面试效果有极大帮助。
答题思路
nextTick是做什么的？
为什么需要它呢？
开发时何时使用它？抓抓头，想想你在平时开发中使用它的地方
下面介绍一下如何使用nextTick
原理解读，结合异步更新和nextTick生效方式，会显得你格外优秀
回答范例：
1、nextTick是等待下一次 DOM 更新刷新的工具方法。
2、Vue有个异步更新策略，意思是如果数据变化，Vue不会立刻更新DOM，而是开启一个队列，把组件更新函数保存在队列中，在同一事件循环中发生的所有数据变更会异步的批量更新。这一策略导致我们对数据的修改不会立刻体现在DOM上，此时如果想要获取更新后的DOM状态，就需要使用nextTick。
3、开发时，有两个场景我们会用到nextTick：
created中想要获取DOM时；
响应式数据变化后获取DOM更新后的状态，比如希望获取列表更新后的高度。
4、nextTick签名如下：function nextTick(callback?: () => void): Promise
所以我们只需要在传入的回调函数中访问最新DOM状态即可，或者我们可以await nextTick()方法返回的Promise之后做这件事。
5、在Vue内部，nextTick之所以能够让我们看到DOM更新后的结果，是因为我们传入的callback会被添加到队列刷新函数(flushSchedulerQueue)的后面，这样等队列内部的更新函数都执行完毕，所有DOM操作也就结束了，callback自然能够获取到最新的DOM值。
知其所以然：
源码解读:
组件更新函数入队：
https://github1s.com/vuejs/core/blob/HEAD/packages/runtime-core/src/renderer.ts#L1547-L1548
入队函数：
https://github1s.com/vuejs/core/blob/HEAD/packages/runtime-core/src/scheduler.ts#L84-L85
nextTick定义：
https://github1s.com/vuejs/core/blob/HEAD/packages/runtime-core/src/scheduler.ts#L58-L59
测试案例，test-v3.html
两个重要API，反应应聘者熟练程度。
computed特点：具有响应式的返回值
const count = ref(1) const plusOne = computed(() => count.value + 1)
watch特点：侦测变化，执行回调
const state = reactive({ count: 0 }) watch( () => state.count, (count, prevCount) => { /* ... */ } )
回答范例
计算属性可以从组件数据派生出新数据，最常见的使用方式是设置一个函数，返回计算之后的结果，computed和methods的差异是它具备缓存性，如果依赖项不变时不会重新计算。侦听器可以侦测某个响应式数据的变化并执行副作用，常见用法是传递一个函数，执行副作用，watch没有返回值，但可以执行异步操作等复杂逻辑。
计算属性常用场景是简化行内模板中的复杂表达式，模板中出现太多逻辑会是模板变得臃肿不易维护。侦听器常用场景是状态变化之后做一些额外的DOM操作或者异步操作。选择采用何用方案时首先看是否需要派生出新值，基本能用计算属性实现的方式首选计算属性。
使用过程中有一些细节，比如计算属性也是可以传递对象，成为既可读又可写的计算属性。watch可以传递对象，设置deep、immediate等选项。
vue3中watch选项发生了一些变化，例如不再能侦测一个点操作符之外的字符串形式的表达式； reactivity API中新出现了watch、watchEffect可以完全替代目前的watch选项，且功能更加强大。
可能追问
watch会不会立即执行？
watch 和 watchEffect有什么差异
知其所以然
computed的实现
https://github1s.com/vuejs/core/blob/HEAD/packages/reactivity/src/computed.ts#L79-L80
ComputedRefImpl
https://github1s.com/vuejs/core/blob/HEAD/packages/reactivity/src/computed.ts#L26-L27
缓存性
https://github1s.com/vuejs/core/blob/HEAD/packages/reactivity/src/computed.ts#L59-L60
https://github1s.com/vuejs/core/blob/HEAD/packages/reactivity/src/computed.ts#L45-L46
watch的实现
https://github1s.com/vuejs/core/blob/HEAD/packages/runtime-core/src/apiWatch.ts#L158-L159
这题考查大家对创建过程的理解程度。
思路分析
给结论
阐述理由
回答范例
创建过程自上而下，挂载过程自下而上；即：
之所以会这样是因为Vue创建过程是一个递归过程，先创建父组件，有子组件就会创建子组件，因此创建时先有父组件再有子组件；子组件首次创建时会添加mounted钩子到队列，等到patch结束再执行它们，可见子组件的mounted钩子是先进入到队列中的，因此等到patch结束执行这些钩子时也先执行。
知其所以然
观察beforeCreated和created钩子的处理
https://github1s.com/vuejs/core/blob/HEAD/packages/runtime-core/src/componentOptions.ts#L554-L555
https://github1s.com/vuejs/core/blob/HEAD/packages/runtime-core/src/componentOptions.ts#L741-L742
观察beforeMount和mounted钩子的处理
https://github1s.com/vuejs/core/blob/HEAD/packages/runtime-core/src/renderer.ts#L1310-L1311
测试代码，test-v3.html
缓存组件使用keep-alive组件，这是一个非常常见且有用的优化手段，vue3中keep-alive有比较大的更新，能说的点比较多。
思路
缓存用keep-alive，它的作用与用法
使用细节，例如缓存指定/排除、结合router和transition
组件缓存后更新可以利用activated或者beforeRouteEnter
原理阐述
回答范例
开发中缓存组件使用keep-alive组件，keep-alive是vue内置组件，keep-alive包裹动态组件component时，会缓存不活动的组件实例，而不是销毁它们，这样在组件切换过程中将状态保留在内存中，防止重复渲染DOM。
结合属性include和exclude可以明确指定缓存哪些组件或排除缓存指定组件。vue3中结合vue-router时变化较大，之前是keep-alive包裹router-view，现在需要反过来用router-view包裹keep-alive：
缓存后如果要获取数据，解决方案可以有以下两种：
beforeRouteEnter：在有vue-router的项目，每次进入路由的时候，都会执行beforeRouteEnter
beforeRouteEnter(to, from, next){ next(vm=>{ console.log(vm) // 每次进入路由执行 vm.getData() // 获取数据 }) },
actived：在keep-alive缓存的组件被激活的时候，都会执行actived钩子
activated(){ this.getData() // 获取数据 },
keep-alive是一个通用组件，它内部定义了一个map，缓存创建过的组件实例，它返回的渲染函数内部会查找内嵌的component组件对应组件的vnode，如果该组件在map中存在就直接返回它。由于component的is属性是个响应式数据，因此只要它变化，keep-alive的render函数就会重新执行。
知其所以然
KeepAlive定义
https://github1s.com/vuejs/core/blob/HEAD/packages/runtime-core/src/components/KeepAlive.ts#L73-L74
缓存定义
https://github1s.com/vuejs/core/blob/HEAD/packages/runtime-core/src/components/KeepAlive.ts#L102-L103
缓存组件
https://github1s.com/vuejs/core/blob/HEAD/packages/runtime-core/src/components/KeepAlive.ts#L215-L216
获取缓存组件
https://github1s.com/vuejs/core/blob/HEAD/packages/runtime-core/src/components/KeepAlive.ts#L241-L242
测试缓存特性，test-v3.html
综合实践类题目，考查实战能力。没有什么绝对的正确答案，把平时工作的重点有条理的描述一下即可。
思路
构建项目，创建项目基本结构
引入必要的插件：
代码规范：prettier，eslint
提交规范：husky，lint-staged
其他常用：svg-loader，vueuse，nprogress
常见目录结构
回答范例
从0创建一个项目我大致会做以下事情：项目构建、引入必要插件、代码规范、提交规范、常用库和组件
目前vue3项目我会用vite或者create-vue创建项目
接下来引入必要插件：路由插件vue-router、状态管理vuex/pinia、ui库我比较喜欢element-plus和antd-vue、http工具我会选axios
其他比较常用的库有vueuse，nprogress，图标可以使用vite-svg-loader
下面是代码规范：结合prettier和eslint即可
最后是提交规范，可以使用husky，lint-staged，commitlint
目录结构我有如下习惯：.vscode：用来放项目中的 vscode 配置
plugins：用来放 vite 插件的 plugin 配置
public：用来放一些诸如 页头icon 之类的公共文件，会被打包到dist根目录下
src：用来放项目代码文件
api：用来放http的一些接口配置
assets：用来放一些 CSS 之类的静态资源
components：用来放项目通用组件
layout：用来放项目的布局
router：用来放项目的路由配置
store：用来放状态管理Pinia的配置
utils：用来放项目中的工具方法类
views：用来放项目的页面文件
看到这样的题目，可以用以下图片来回答：
思路
查看vue官方文档：
风格指南：https://vuejs.org/style-guide/
性能：https://vuejs.org/guide/best-practices/performance.html#overview
安全：https://vuejs.org/guide/best-practices/security.html
访问性：https://vuejs.org/guide/best-practices/accessibility.html
发布：https://vuejs.org/guide/best-practices/production-deployment.html
回答范例
我从编码风格、性能、安全等方面说几条：
编码风格方面：
性能方面：
安全：
template: + userProvidedString + 等等......
思路
给定义
必要性阐述
何时使用
拓展：一些个人思考、实践经验等
范例
Vuex 是一个专为 Vue.js 应用开发的状态管理模式 + 库。它采用集中式存储，管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。
我们期待以一种简单的“单向数据流”的方式管理应用，即状态 -> 视图 -> 操作单向循环的方式。但当我们的应用遇到多个组件共享状态时，比如：多个视图依赖于同一状态或者来自不同视图的行为需要变更同一状态。此时单向数据流的简洁性很容易被破坏。因此，我们有必要把组件的共享状态抽取出来，以一个全局单例模式管理。通过定义和隔离状态管理中的各种概念并通过强制规则维持视图和状态间的独立性，我们的代码将会变得更结构化且易维护。这是vuex存在的必要性，它和react生态中的redux之类是一个概念。
Vuex 解决状态管理的同时引入了不少概念：例如state、mutation、action等，是否需要引入还需要根据应用的实际情况衡量一下：如果不打算开发大型单页应用，使用 Vuex 反而是繁琐冗余的，一个简单的store 模式就足够了。但是，如果要构建一个中大型单页应用，Vuex 基本是标配。
我在使用vuex过程中感受到一些blabla
可能的追问
vuex有什么缺点吗？你在开发过程中有遇到什么问题吗？
action和mutation的区别是什么？为什么要区分它们？
分析
问我们template到render过程，其实是问vue编译器工作原理。
思路
引入vue编译器概念
说明编译器的必要性
阐述编译器工作流程
回答范例
Vue中有个独特的编译器模块，称为“compiler”，它的主要作用是将用户编写的template编译为js中可执行的render函数。
之所以需要这个编译过程是为了便于前端程序员能高效的编写视图模板。相比而言，我们还是更愿意用HTML来编写视图，直观且高效。手写render函数不仅效率底下，而且失去了编译期的优化能力。
在Vue中编译器会先对template进行解析，这一步称为parse，结束之后会得到一个JS对象，我们成为抽象语法树AST，然后是对AST进行深加工的转换过程，这一步成为transform，最后将前面得到的AST生成为JS代码，也就是render函数。
知其所以然
vue3编译过程窥探：
https://github1s.com/vuejs/core/blob/HEAD/packages/compiler-core/src/compile.ts#L61-L62
测试，test-v3.html
可能的追问
Vue中编译器何时执行？
react有没有编译器？
分析
挂载过程完成了最重要的两件事：
初始化
建立更新机制
把这两件事说清楚即可！
回答范例
挂载过程指的是app.mount()过程，这个过程中整体上做了两件事：初始化和建立更新机制
初始化会创建组件实例、初始化组件状态，创建各种响应式数据
建立更新机制这一步会立即执行一次组件更新函数，这会首次执行组件渲染函数并执行patch将前面获得vnode转换为dom；同时首次执行渲染函数会创建它内部响应式数据之间和组件更新函数之间的依赖关系，这使得以后数据变化时会执行对应的更新函数。
知其所以然
测试代码，test-v3.html mount函数定义
https://github1s.com/vuejs/core/blob/HEAD/packages/runtime-core/src/apiCreateApp.ts#L277-L278
首次render过程
https://github1s.com/vuejs/core/blob/HEAD/packages/runtime-core/src/renderer.ts#L2303-L2304
可能的追问
响应式数据怎么创建
依赖关系如何建立
原文地址：https://juejin.cn/post/7097067108663558151
作者：杨村长
（学习视频分享：vue视频教程）
![[Web front-end] Permulaan pantas Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
