Vue高频面试题百题详解!阿里p8闭关三月呕心力作！

前言

 

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

相关学习资源
本系列有配套视频教程，思维导图和开源项目，大家学习同时千万不要忘了 关注 

 

有需要此资料的文末领取

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

组件传参的各种方式

 

思路分析：

总述知道的所有方式

按组件关系阐述使用场景

回答范例：
组件通信常用方式有以下8种：

props

$emit/$on

$children/$parent

$attrs/$listeners

ref

$root

eventbus

vuex

注意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
根据组件之间关系讨论组件通信最为清晰有效

父子组件

props/$emit/$parent/ref/$attrs

兄弟组件

$parent/$root/eventbus/vuex

跨层级关系

eventbus/vuex/provide+inject

02-v-if和v-for哪个优先级更高？
分析：
此题考查常识，文档中曾有详细说明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)} }

03-子组件可以直接改变父组件的数据么，说明原因
分析
这是一个实践知识点，组件化开发过程中有个单项数据流原则，不在子组件中修改父组件是个常识问题。

参考文档：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，但是我们还是能够直接改内嵌的对象或属性。

 

 

 23年最新前端面试题总结—基础到高级（含算法）

 

⭐ 阿里内部前端面试题库：「核心知识点 + 原题解析」模式：

1Javascript面试真题 210页

2Vue面试真题 237页

 

3Css面试真题 127页

 

4React面试真题 156页

 

5代码解析实例

 

6大厂牛人简历参考（不同年限）

 ————》点击此处领取《————