前端面试题

沿岸踱步

已于 2024-06-21 10:19:04 修改

阅读量819

点赞数 20

分类专栏：面试文章标签：前端 vue.js

于 2024-05-30 18:18:04 首次发布

本文链接：https://blog.csdn.net/Lklyx/article/details/139330560

版权

面试专栏收录该内容

1 篇文章 0 订阅

订阅专栏

前端面试题目（个人记录）

let、const、var区别
1、let和var是声明变量的，const是声明常量的
2、let和const不存在变量提升
3、let 和const不允许重复声明
内存泄漏
内存泄漏是指在计算机程序中，因为疏忽或错误导致的一种内存分配问题。当一个程序的可执行文件装载到内存中运行时，它会申请一部分内存用于数据存储和处理。正常情况下，当这部分数据不再使用时，程序应该释放掉之前申请的内存，使其可以被其他部分或其它程序使用。如果程序未能正确释放不再使用的内存，这部分内存就会被“泄漏”，导致系统资源浪费，严重时甚至可能导致程序崩溃或系统死机。
会导致内存泄漏的原因可能会有以下几点
- 意外的全局变量会导致内存泄漏
- 被遗忘的计时器或回调函数
- 脱离DOM的引用
- 闭包
- 事件监听器
- DOM元素和JavaScript对象的循环引用
- 不正确的模块管理
- 第三方库的使用
操作数组方法有哪些？
1、push
2、pop
3、splice
4、some
5、shift
6、sort
…
什么是自定义指令？
在现代前端框架（如React、Vue或Angular）中，自定义属性可以用来传递props或状态，实现组件间的数据传递和通信。
假设我正在开发一个电子商务网站，其中有一个产品列表。每个产品项都有一个唯一的ID，这个ID对于后端处理订单是必要的，但对于前端渲染来说不是必需的。我可以使用自定义属性来存储这个ID：

<div class="product" data-product-id="12345">
  <h2>产品名称</h2>
  <p>产品描述</p>
  <!-- 其他产品信息 -->
</div>

在JavaScript中，我可以通过以下方式访问这个ID：

const productElement = document.querySelector('.product');
const productId = productElement.dataset.productId;
console.log(productId); // 输出：12345

组件通讯
1. props / $emit
2. ref / $refs
3. eventBus事件总线（$emit / $on）
4. 依赖注入（provide / inject）
防抖节流
1、防抖：指在一定时间内，在动作被连续频繁触发的情况下（输入框）
2、节流：是指一定时间内执行的操作只执行一次（连续点击提交按钮）
v-if 和 v-for 优先级
v-for优先级比较高，在vue3，v-if优先级比较高
ES5和ES6的特性
- ES6引入了模块和类（class）的概念，允许开发者通过import和export关键字来导入和导出模块。
- 箭头函数：箭头函数提供了一种更简洁的函数书写方式，并绑定了this的上下文
- 模版字符串：使用反引号（``）和${}，模板字符串允许更便捷的字符串插值和多行字符串
- 解构赋值：提供了一种从数组和对象中提取值并赋值给变量的简洁方式
- Promises：提供了一种更好的异步编程解决方案，用于替代回调函数
- Map 和 Set：新增的数据结构，Map保存键值对，Set保存唯一值
- 数组扩展方法：Array.from()、Array.of()、find()、findIndex()等
前端垂直水平居中

.container {
  display: flex;
  justify-content: center; /* 水平居中 */
  align-items: center;     /* 垂直居中 */
}

原型和原型链
原型：在JavaScript中，每个对象都有一个内部属性[[Prototype]]（可以通过Object.getPrototypeOf或__proto__访问），这个属性引用了另一个对象，称为该对象的原型。原型是实现继承和共享属性的机制。
原型链：原型链是由对象的原型组成的链式结构。每个对象都可能有一个原型，而每个原型本身也可能是另一个对象，这样就形成了一条从对象到其原型，再到原型的原型的链。

Vue

Vue的核心概念有哪些？
Vue的核心概念包括响应式数据绑定、组件系统、指令、模板语法、计算属性、侦听器、类和样式的绑定、事件处理、条件渲染和循环等。
常用的生命周期
创建 - 挂载Dom - 渲染 - 卸载
created - mounted - undated - destroyed（一般在created和mounted中发送请求）
Vue的双向数据绑定机制和原理
机制：Vue通过v-model指令实现双向数据绑定。它在输入字段上创建一个可响应的双向绑定，可能会涉及到value属性和一个事件监听器（如input或change），它在数据变化时自动更新DOM，并在DOM变化时更新数据。
原理：采用数据劫持结合发布者-订阅者模式的方式
Vue 3的新特性
Vue 3 引入了Composition API，性能改进、更小的体积、自定义渲染器API等。Vue 3 还引入了基于Proxy的响应式系统，提高了性能并解决了Vue 2中无法检测到属性添加和删除的问题。它还支持Fragment和Teleport等新功能，并且与TypeScript有更好的集成
什么是Composition API？
Composition API是Vue 3引入的一种新的方式来组织组件逻辑，它允许开发者将组件逻辑提取到单独的函数中
响应式系统的变更
Vue3使用Proxy代替了Vue 2中的Object.defineProperty来实现响应式系统。Proxy允许Vue直接代理整个对象，监听属性的添加和删除，以及数组索引和长度的变化，同时支持Map、Set等数据结构
性能优化
Vue3通过虚拟DOM的重写和Tree-Shaking等技术优化了性能。它还通过避免不必要的渲染和更新来减少DOM操作。
ref 和 reactive
reactive创建一个响应式对象，而ref用于创建响应式引用
ref用于创建响应式引用。ref对于返回原始值（如字符串、数字或布尔值）很有用
vuex
简介：Vuex是Vue的官方状态管理模式和库，用于在大型应用中管理应用级的状态，它采用集中式存储管理应用的所有组件的状态。
通过执行 dispatch 方法触发对应 action 进行回应，通过actions：触发其他 Commit提交 mutation 的操作，使之可以修改state中的数据
state => 基本数据(数据源存放地)
getters => 从基本数据派生出来的数据
mutations => 提交更改数据的方法，同步
actions => 像一个装饰器，包裹 mutations，使之可以异步。
modules => 模块化 Vuex
Vue的computed属性和methods有什么区别？
computed属性是基于它们的依赖进行缓存的属性，只有当依赖发生变化时才会重新计算。methods则是组件的方法，它们可以包含任意的逻辑。
Vue的key属性有什么作用
key属性帮助Vue识别哪些元素是不同的，从而在虚拟DOM的diff过程中做出更准确的决策，提高渲染效率
插槽是什么？
插槽是Vue.js中一个强大的内容分发API，它允许你在组件内部预留一个或多个位置，这些位置可以被组件的使用者填充自定义的内容。插槽使得组件更加灵活和可复用。
默认插槽：如果没有指定名称，就是一个默认插槽。在子组件内部，可以通过来定义默认插槽的位置。
具名插槽：当子组件需要多个插槽时，可以使用具名插槽。在子组件中通过来定义具名插槽，父组件通过来传递内容。
作用域插槽：允许父组件访问子组件的数据。在子组件中，通过来定义作用域插槽，父组件可以访问子组件传递的slotData。
自定义指令
自定义指令是Vue.js中一个高级功能，它允许开发者扩展Vue的功能，对元素和组件进行低层次的 DOM操作。自定义指令不带有任何运行时开销，只有当它们被明确调用时才会运行。
1、动态样式：根据数据动态添加样式。
2、DOM操作：在不使用额外的库的情况下直接操作DOM。
3、事件处理：绑定复杂的事件处理逻辑。
4、第三方库集成：简化第三方库的集成，例如富文本编辑器。

React

高阶组件（HOC）
HOC 是一种组件的设计模式，HOC 接受一个组件和额外的参数（如果需要），返回一个新的组件。HOC 是纯函数，没有副作用
Redux数据持久化
将页面的数据存储在 redux 中，在重新加载页面时，获取 Redux中的数据
组件通信的方式
1、父传子：⽗组件可以向⼦组件通过传 props 的⽅式，向⼦组件进⾏通讯
2、子传父：props+回调的⽅式，⽗组件向⼦组件传递props 进⾏通讯，此 props 为作⽤域为⽗组件⾃身的函数，⼦组件调⽤该函数，将⼦组件想要传递的信息，作为参数，传递到⽗组件的作⽤域中

Uniapp

uniapp概述
uni-app是一个使用Vue.js开发跨平台应用的框架，允许开发者编写一次代码，然后发布到iOS、Android、Web（包括PC和移动端浏览器）以及各种小程序平台
uniapp中的性能优化
性能优化包括减少页面重绘、合理使用事件、避免内存泄漏、使用WebWorkers等。uni-app还提供了性能监控工具来帮助开发者分析和优化应用性能
如何解决小程序的适配问题？
- 使用相对单位：在小程序开发中，推荐使用相对单位（如rpx）来代替像素单位（px）。rpx是微信小程序特有的尺寸单位，表示可以缩放的单位，其设计是为了适配不同宽度的屏幕。
- 媒体查询：小程序支持CSS媒体查询，可以根据不同屏幕尺寸应用不同的样式规则。
- 弹性布局：使用Flexbox布局可以更灵活地处理不同屏幕尺寸下的布局问题。
- 视口单位：在某些情况下，使用视口宽度（vw）和视口高度（vh）单位可以帮助实现响应式设计。
- 小程序API：利用小程序提供的API，如wx.getSystemInfo，可以获取设备信息，包括屏幕宽度和高度，然后根据这些信息动态调整布局。
- 组件库：使用小程序开发框架提供的组件库，这些组件库通常已经考虑了适配问题。

换算关系和解决1rpx问题

px到rem：计算方式与em类似，但是基于根元素的字体大小。如果根元素字体大小是16px，那么1rem = 16px。
解决1rpx问题：

  1、使用伪元素：在某些情况下，可以使用CSS伪元素（如::before或::after）来创建边框效果，并通过调整伪元素的大小和位置来模拟边框。
  2、动态调整边框：在小程序的JavaScript逻辑中，根据获取到的设备信息动态调整边框宽度。例如，如果	屏幕宽度较小，可以适当增加边框宽度。
  3、使用图片边框：对于需要精确控制边框样式的情况，可以考虑使用图片作为边框，这样可以避免1rpx带来的问题。
  4、利用阴影和渐变：使用CSS的box-shadow或线性渐变（linear-gradient）来模拟边框效果，这些属性不受1rpx问题的影响。
  5、测试和调整：在不同的设备和屏幕尺寸上进行测试，确保边框在所有目标设备上都能正确显示。

uniapp中页面的生命周期
1、初始化：
onLaunch（应用启动） -> onCreate（页面或组件创建） -> onLoad（页面或组件加载）
2、页面/组件显示：
onShow（页面或组件显示）
3、页面/组件隐藏：
onHide（页面或组件隐藏）
4、数据更新：
onReceive（页面或组件接收到参数）
5、销毁：
onUnload（页面或组件卸载）
6、应用退出：
onError（全局错误） -> onHide（应用隐藏）
uniapp中自定义导航栏
在配置页面设置"navigationStyle": “custom”,
在uni-app中，可以通过创建一个自定义组件来实现导航栏。这个组件可以包含标题、按钮、图标等元素。
在uni-app中如何实现页面间的传值？
通过uni.navigateTo或uni.redirectTo等API的events参数，或者使用全局变量、Vuex状态管理库等方式
在uni-app中，如何监听页面的滚动事件？
可以使用页面的onPageScroll方法监听页面的滚动事件。
uni-app如何处理不同屏幕尺寸的适配？
通过使用百分比、vw/vh单位和媒体查询（Media Queries）来实现响应式设计。
uni-app中的事件冒泡和捕获
事件冒泡是从子组件向父组件传递事件，捕获则是从父组件向子组件传递事件。
uni-app中的性能优化有哪些
性能优化策略包括减少重绘和回流、使用事件防抖和节流、合理使用数据绑定、避免大型列表性能问题等
小程序在那个地方发送请求
onLoad：当页面加载时发送请求，适用于需要在页面加载时获取数据的场景。
onShow：当页面显示时发送请求，适用于页面可能已经加载但需要在显示时获取最新数据的场景。

沿岸踱步

关注

20
点赞
踩
8

收藏

觉得还不错? 一键收藏
0
评论
前端面试题

在现代前端框架（如React、Vue或Angular）中，自定义属性可以用来传递props或状态，实现组件间的数据传递和通信。假设我正在开发一个电子商务网站，其中有一个产品列表。每个产品项都有一个唯一的ID，这个ID对于后端处理订单是必要的，但对于前端渲染来说不是必需的。
复制链接

扫一扫