前言
大家好,我是一个爱分享的老前端。前一段时间有很多小伙伴找我做经典Vue面试题解析。我整整花了1个月时间找题写答案,录视频。本来打算全部写完再来发一篇鸿篇巨制,不过找我要学习材料的太多,只好提前发布。这里是已经写完的前半部分,大家务必点赞、收藏保存一下,我后续还在这一篇更新下半部分,希望大家多多支持。
相关学习资源
本系列有配套视频教程,思维导图和开源项目,大家学习同时千万不要忘了 关注 + 分享
01-Vue组件之间通信方式有哪些
vue是组件化开发框架,所以对于vue应用来说组件间的数据通信非常重要。此题主要考查大家vue基本功,对于vue基础api运用熟练度。另外一些边界知识如provide/inject/$attrs则提现了面试者的知识广度。
组件传参的各种方式
思路分析:
总述知道的所有方式
按组件关系阐述使用场景
回答范例:
组件通信常用方式有以下8种:
props
e
m
i
t
/
emit/
emit/on
c
h
i
l
d
r
e
n
/
children/
children/parent
a
t
t
r
s
/
attrs/
attrs/listeners
ref
KaTeX parse error: Expected 'EOF', got '#' at position 232: …events-api.html#̲overview 根据组件之间…emit/
p
a
r
e
n
t
/
r
e
f
/
parent/ref/
parent/ref/attrs
兄弟组件
p
a
r
e
n
t
/
parent/
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代码解析实例