总结
为了帮助大家更好温习重点知识、更高效的准备面试,特别整理了《前端工程师面试手册》电子稿文件。
内容包括html,css,JavaScript,ES6,计算机网络,浏览器,工程化,模块化,Node.js,框架,数据结构,性能优化,项目等等。
包含了腾讯、字节跳动、小米、阿里、滴滴、美团、58、拼多多、360、新浪、搜狐等一线互联网公司面试被问到的题目,涵盖了初中级前端技术点。
前端面试题汇总
开源分享:【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】
JavaScript
性能
linux
显示默认内容,即父组件没设置内容时
(效果:链接会以标签形式显示并且显示title内容)
(2)作用域插槽
{{website.subTitle}}
(如果不传入值{{website.subTitle}}},则会显示子组件的默认subtitle)
使用:子组件中作用域的data让父组件可以获取到
{{slotProps.slotData.title}}
效果:页面显示子组件内容wangEditor
(思路:在slot中定义动态属性slotData,然后把他定义到website上,website中含有title和subtitle。然后在index中使用ScopedSlotDemo中定义v-slot=”slotProps”.之后可以使用slot Props.slot DaTa拿到ScopedSlotDemo组件中website的内容,从而可以拿到website的title)
(3)具名插槽
有名字的插槽—根据内容进行匹配–没有名称会默认匹配
父组件往子组件传递内容的时候需要对应好名字
4. 动态组件异步组件
(1)动态组件
用法: :is=********”component-name”
需要根据数据、动态渲染的场景。即组件类型并不确定。(一般情况下组件类型是确定的)
举例使用场景:新闻详情页。(组件位置不确定或者种类不确定。即不知道要渲染甚么样的组件,只知道数据。需要根据数据确定组件的类型,这时就需要用到动态组件)
vue 高级特性
(根据获取到的组件(text,image)进行渲染)
(2)异步组件
Import函数
按需加载、异步加载大组件
(什么时候用就什么时候加载,如果不使用永远都不会加载,适合于组件比较大比较复杂,这样会优化性能)
使用语句import SlotDemo from ‘./SlotDemo’ 是同步加载
<button @click=“showFormDemo = true”>show form demo
// 然后在components里面写
components: {
FormDemo: () => import(‘…/BaseUse/FormDemo’),
}
效果:没有点击时不会加载FormDemo,点击之后会加载然后渲染出来
5.keep-alive
缓存组件
频繁切换,不需要重复渲染
Vue常见性能优化
KeepAlive.Vue中引入三个组件KeepAliveAtageA、KeepAliveAtageB、KeepAliveAtageC是三个按钮
依次点击BC的效果:
不使用keep alive | 使用keepalive |
A mounted A destroyed B mounted B destroyed C mounted C destroyed A mounted | A created B created C created |
<KeepAliveStageA v-if="state === 'A'"/> <KeepAliveStageB v-if="state === 'B'"/> <KeepAliveStageC v-if="state === 'C'"/>
| <keep-alive> <!-- tab 切换 --> <KeepAliveStageA v-if="state === 'A'"/> <KeepAliveStageB v-if="state === 'B'"/> <KeepAliveStageC v-if="state === 'C'"/> </keep-alive> |
使用keep-alive和v-show的区别:
v-show是通过原生CSS控制(使用情况:标签比较简单)
Keepalive 是在vue框架层级进行的JS对象的渲染(使用情况:带有层级或者tab切换的复杂组件切换)
<button @click=“changeState(‘A’)”>A
<button @click=“changeState(‘B’)”>B
<button @click=“changeState(‘C’)”>C
keepAliveStateA.vue
state A
6. mixin
多个组件有相同的逻辑,从中抽离出来
Mixin并不是完美的解决方案,会有问题
Vue 3提出的composition API 旨在解决这些问题
(Mixin就是一段js代码)
Mixin的问题
(1) 变量来源不明,不利于阅读
(2) 多个mixin可能会造成命名冲突
(3) Mixin和组件可能会出现多对多的关系,复杂度较高
{{name}} {{major}} {{city}}
<button @click=“showName”>显示姓名
mixin.js
web浏览器中的javascript
- 客户端javascript
- 在html里嵌入javascript
- javascript程序的执行
- 兼容性和互用性
- 可访问性
- 安全性
- 客户端框架
- 开源分享:【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】
window对象
-
计时器
-
浏览器定位和导航
-
浏览历史
-
浏览器和屏幕信息
-
对话框
-
错误处理
-
作为window对象属性的文档元素