2024年前端面试题（实际遇到的）

1.组件懒加载：
👉又叫延迟加载或者按需加载，使用import函数来实现
2.盒子模型：
👉分为内容内容框和边框盒模型，有外边距（margin）、内边距（padding）边框（border），内容区域（content）组成
3.什么是js闭包，有什么作用
👉内部函数能访问外部函数作用域中的变量；
外部函数定义了内部函数，并在其作用域声明了一些变量；
内部函数能够捕获并保留对外部作用域变量的引用，即便外部函数执行结束；
用于数据封装（创建私有变量和方法），模块化，状态维持（让变量的生命周期超出原本的作用域），函数柯里化（通过闭包保留部分参数，创造新的函数），模块化，异步编程
function 外部函数() {
function 内部函数() {
var 内部变量 = “我是内部变量”
// 直接返回内部变量
return 内部变量
}
// 调用内部函数并获取内部变量的值
var 内部变量的值 = 内部函数()
console.log(内部变量的值)
}
外部函数()4.事件循环
👉是JS处理异步操作的一种机制，确保了非阻塞的执行环境；
1.执行桟运行所有同步代码，比如函数调用，按照先进后出的规则
2.任务队列分为宏任务（如setTimeout,setInterval）和微任务（如Promise的then,process.nextTick）
3.事件循环过程首先执行全局脚本作为初始桟任务，桟内任务执行完毕，检查微任务队列，一次性执行完所有微任务，随后取出一个宏任务执行，执行过程中又生成新的微任务，如此宏任务微任务交替执行，直到完成所有任务；
举例说明：

• 先执行所有同步代码。
• 然后执行当前微任务队列中的所有任务。
• 接着执行下一个宏任务。
• 重复上述过程，不断检查微任务队列，再执行宏任务。
  5.原型链
  👉是JS实现继承的核心机制，允许对象之间共享属性和方法，每个JS对象都有一个内置的属性为Prototype（它是一个原型对象可以使用__proto__或者getprototypeOf访问对象内部原链接，这个链接指向最终原型对象）
  1.原型对象每个构造函数都有一个prototype属性，这个属性就是原型对象，原型对象上定义的属性和方法，可以被构造函数创建的所有实例共享；
  2.对象的属性查找当访问一个对象的属性和方法时，如果没有对应的属性和方法js会继续在该对象的原型上查找，如果还是没有，则继续在原型的原型上查找，直到找到或到达原型链的末端（Object.prototype）这个过程就是原型链遍历
  最好不要修改原型，会影响到已经存在的实例。
  6.JS模块化开发
  把一个复杂的程序，分解成一个一个的独立模块，有助于避免全局变量污染，增强代码的复用
  使用import和export关键字实现模块导入导出。支持动态导入、命名和默认导出等特性。
  还有CommonJS,require用于倒入模块，module.exports用于导出
  区别在于值的传递不同前者为引用后者为浅拷贝；
  加载时机不同前者为静态加载是异步的，后者为运行时加载是同步的；
  前者支持动态导入，实现按需加载后者不行；
  前者为ES标准的一部分，后者主要运用于node.js
  7.MVVM开发模式和VUE特点
  model view viewModel 数据改变视图改变，视图改变数据改变；model代表数据层，view代表视图层，它们都通过viewModel进行通信
  vue主要特点有：
  1.声明式渲染（将数据绑定在dom上，使得视图能够根据数据变化进行更新）
  2.组件化（每个组件都是自包含的，可以复用）
  3.mvvm模式
  4.虚拟dom（可以理解为记录下所有需要更新的dom，然后只更新这部分）
  5.响应式系统（自动响应数据变化并更新视图）
  8.VUE的生命周期，一般在哪一块发请求
  beforeCreate/create
  beforeMount/mounted
  beforeUpdate/update
  beforeDestroy/destroyed
  一般在created和mounted里发送请求
  9.Computed和Watch的区别及应用场景
  计算属性有缓存，声明式，默认为只读，不支持异步，适用于数据转换场景
  监听无缓存，支持异步，可手动触发，适用于数据变化之后的操作
  10.VUE常用指令
  v-bind v-on v-if v-for v-else-if v-model v-show v-text v-html v-pre v-cloak v-once
  11.VUEX是什么，怎么使用，哪些功能场景使用它
  状态管理模式和库
  安装之后创建store.js在里面定义你的store，然后在main.js中引入store，也可以通过this.$store访问store实例
  使用场景有：全局状态管理，组件间通信，状态持久化（localStorage），异步操作
  12.组件传值方式有哪些
  父子组件传值props KaTeX parse error: Expected 'EOF', got '#' at position 154: …uter的两种模式 哈希模式：#̲后面的部分用来表示当前路由，利…emit和on（自定义事件，通过事件绑定和触发来实现）
  App对象：在app.js里的App对象的globaData属性可以用来存储全局数据，在任何页面都可以访问
  使用微信小程序的本地存储API：wx.setStorageSync和wx.getStorageSync
  26.vue中Class与Style如何动态绑定
  👉可以使用:来动态绑定class和style
  语法：
  
  27.vue中的mixins有何作用，如何使用
  👉代码复用，逻辑封装，行为一致性
  可以定义混入，组件中使用混入，全局混入（一般不建议）
  28.vue中的transition动画有哪些作用，如何使用
  用于添加进入和离开的动画效果
  css：transition: opacity .5s
  html：用把需要过渡的元素包括起来
  29.ES6有哪些新特性
  Promis 扩展运算符 模版字符串 结构赋值 箭头函数 const和let symbol set和map Class Module
  30.Promise是什么，有什么作用
  es6新特性，为了解决回调地狱，特点是状态不受外界影响（有进行中（padding）、已成功（fulfilled）、已结束（redected）三种状态）且状态不可逆
  31.什么原因会造成内存泄漏
  闭包：(如果闭包中的变量一直被引用，外部函数执行完毕也不会被垃圾回收导致)
  全局变量：（因为全局变量在程序的生命周期都是可访问的，不会垃圾回收）
  未移除的事件监听器：（在为dom元素创建事件监听器时，js会创建一个指向该元素的引用，如果监听器在不需要的时候没被移除，即时dom元素销毁，也会保留对该元素的引用，因为dom元素虽然不在了但是引用还在，使得垃圾无法回收）
  定时器：（类似事件监听器，定时器也会创建相关函数变量的引用，如果定时器设置后没被清除，引用就会存在，导致内存泄漏）
  32.v-show和v-if的指令区别是什么
  v-show为操作display属性进行隐藏，v-if是直接把元素从dom树中移除，在开发中为了新能优化，若条件变化不多则使用v-if，反之用v-show
  33.vue2 对象及数组 数据改变 视图不改变（响应式时效）
  对象使用this.set可以解决，数组使用
  34.vue2中 onMounted 对应js中什么函数
  window.onload()
  35.有三个接口，要求只有前面两个接口调用成功了 ，才能调用第三个接口
  Promise.all监听前面两个函数
  36.数组有哪些方法，有啥功能
  👉includes():判断数组中是否存在某个元素，存在返回true否则返回false
  filter()：建一个新数组，其包含通过测试的所有元素
  map()：创建一个新数组，数组中的元素为原始数组元素调用函数处理后的值
  forEach()：对数组中的每个元素执行提供的函数
  37.怎么解决跨域
  • 在webpack或vite的config配置文件中可以设置proxy代理
  • 使用JSONP借助回调函数解决跨域
  • 服务器端：服务器配置cors开启允许跨域、Nginx 服务器反向代理
  38.组件封装思路
  • 明确组件职责：每个组件应该有明确的职责，尽量做到单一职责原则。组件的功能应该尽可能单一，这样可以提高组件的复用性和可维护性。
  • 组合组件：通过组合多个小组件来构建更复杂的组件。这样的小组件可以独立开发、测试和维护，同时也能提高代码的可读性。
  • 组件通讯与插槽：props/emit、slots插槽、provide/inject 注入
  • 确保组件之间的样式隔离
  39.常用指令优先级
  • v-for v-if : v2中v-for高于v-if v3中 v-if高于v-for
  ◦ 如果一定要同时使用则在外层包裹一个 在其上使用v-for， 内层包裹v-if
  40.http 401 403 301 303 分别代表什么
  401：没有认证
  403：有认证，但没有权限
  301：访问的资源转移，会返回location头，指明新的url
  303：比如get post请求方法使用错了
  41.重绘和回流 是什么意思 有什么功能
  重绘改变元素的外观属性，比如：颜色，背景颜色，边框颜色
  回流是改变元素的大小，可能会dom树重建
  42.vux actions 为什么是异步的
  它是被设计成异步的，原因为：分离关注点、用户界面更新、链式调用、promise支持、更好的测试性
  43.css的 : 和 :: 有啥区别
  单冒号：伪类
  双冒号：伪元素
  44.微信小程序授权登陆 解释一下
  不需要用户输入账户密码，点击授权微信生成一个临时的code，通过回调函数传给小程序