返回

2025-08-21面试

1

目录

点击展开

8.21 面试

web安全

白话：比如后台管理系统登录密码采用md5加密， 为每个接口请求头添加token， 网站使用https协议增加安全请求， 将重要信息添加到cookie里面较为隐蔽

vue2 vue3区别

白话：首先在代码风格上vue2是选项式（Options API）、vue3是组合式（Composition API）， 然后就是响应式不同 vue2 采用Object.defineProperty vue3采用 es6版本Proxy代理的方式 弥补了vue2增加、删除丢失响应式问题， 还有就是虚拟 DOM 在vue3上提升了性能，生命周期不同以及 对ts的支持度 vue3用ts重写 更好的支持

本地存储有哪些？本地存储满了前端怎么处理？

白话：存储有sessionStorage、localStorage、cookie、indexDB这些， 满的话首先考虑业务本身有啥问题为啥存的超出了 是否可以让后端来返回

webpack 优化怎么优化

白话：首先利用插件进行代码压缩（TerserPlugin）、 Tree shaking打包时剔除无用代码（optimization.sideEffects）、 利用CDN加速减轻服务器压力、 图片压缩（image-webpack-loader）、 代码分割（SplitChunksPlugin） 按需加载（路由 / 组件懒加载）（通过import()导入）

说下promise

白话：Promise就是es6版本出的 处理异步任务的一种方式解决了回调地狱问题，比如说定时器、接口请求等需要等待的任务， promise有三种状态 等待（pending ） 完成（fulfilled） 、失败（rejected）， 常用promise的then方法用于 成功或失败时执行

vue-router导航守卫

白话：有全局守卫beforeEach、afterEach； 路由守卫beforeEnter； 组件守卫beforeRouteEnter、beforeRouteUpdate、beforeRouteLeave等

8.25 面试

vue自定义指令怎么实现？

白话：自定义指令可分为局部和全局自定执行，局部的话在每个组件的选项中可使用directives选项，全局的话直接使用Vue.directive

// 局部注册
new Vue({
  directives: {
    // 指令名称
    focus: {
      // 指令定义
      inserted: function (el) {
        el.focus()
      }
    }
  }
})
// 全局注册
Vue.directive('focus', {
  inserted: function (el) {
    el.focus()
  }
})

// 使用
// <input v-focus>

vue-router它有哪几种模式？分别是怎么实现的？有什么区别 ?

白话：有两种模式一种是hash另一种是history模式，hash利用 hashchange 事件监听 url 井号后面hash值的变化进行实现，优点就是页面跳转不会与后端进行交互浏览器不会刷新体验较好，缺点就是url带井号 不美观；history是基于原生h5 History API的pushState、replaceState 实现地址的存储，监听popstate 事件实现前进或后退操作，优点就是url简单，符合传统，缺点就是需要服务端支持避免某些路径没有导致后端返回404

// hash实现原理
window.addEventListener('hashchange', () => {
  const hash = window.location.hash.slice(1); // 获取 # 后的路径
  // 根据 hash 匹配组件并渲染
});

//history实现原理
// 路由跳转（不触发页面刷新）
history.pushState({}, '', '/path');

// 监听前进/后退
window.addEventListener('popstate', () => {
  const path = window.location.pathname; // 获取当前路径
  // 根据 path 匹配组件并渲染
});

文章理解：https://blog.csdn.net/poppingJ/article/details/145650829

css选择器的优先级了解吗？

白话：优先级是根据每个选择器的权重来定义的，权重大优先级越高，就先应用改选择器下的样式，从大到小排列，首先是!important， 行内样式选择器，Id选择器，然后就是类选择器，标签选择器，通配符选择器

防抖的具体的代码怎么写？

防抖的含义就是让某个时间期限内（约定200毫秒），事情处理函数只执行一次。

  // 防抖
  function debounce(func,wait){
    let timeout = null //借助闭包
    return function() {
      if(timeout) clearTimeout(timeout) 
      timeout = setTimeout(() => {
        func();
      }, wait); // 简化写法
    }
  }

Promise和setTimeout谁先执行？

白话：在js事件循环中Promise属于微任务，setTimeout属于宏任务，Promise先执行

https://juejin.cn/post/6844903512845860872

vue-router路由跳转传参两种不同的模式分别有什么优缺点？

白话：有params和query模式，params通过配置动态路由在url上以斜杠方式拼接，比较简单符合传统url地址，query是以将参数拼接在url问号后面 以key=value的形式传递，url地址较长

Vue2Vue3的响应式原理的不同分别是什么？

白话：vue2采用Object.defineProperty，为data选项中的每个属性添加getter和setter，采用递归实现性能较差，无法监听新增或删除属性；vue3则使用es6出的都Proxy，Proxy可以监听对象的所有操作，缺点就是兼容性差ie浏览器不支持

9.3面试

浏览器缓存机制

白话：浏览器缓存分为强缓存和协商缓存，强缓存就是第一次请求资源从服务器获取 如果再次获取相同资源直接拿缓存中的，通过设置请求头Cache-control属性设置相应时间即可缓存 设置no-cache 不缓存；协商缓存就是第一次和第二次请求相同资源会进行对比看资源内容是否修改，修改了就重新获取，未修改就拿本地缓存的，通过请求头Last-Modified实现

js数据类型

白话：分为基本数据类型、引用数据类型，基本数据类型有string、number、boolean、null、undefined、symbol、bigint；引用数据类型有Object、Array、Function

es6新增的数据类型了解吗什么作用

白话：有Symbol、Bigint、Map、Set；symbol表示不可变独一无二的数据，bigint表示超过number的大整数，Map用于存储键值对的集合、键可以是任意类型，Set用于存储无重复的有序列表 常用于去重操作

let var const 什么区别

白话：首先var在函数中才有作用域，let和const都有块级作用域，var具有变量提升let、const没有，var同名可以声明多次 let、const不可以，let用于声明变量、const用于声明常量，const一但定义必须给初始化值

css选择器优先级

白话：优先级是根据每个选择器的权重来定义的，权重大优先级越高，就先应用改选择器下的样式，从大到小排列，首先是!important， 行内样式选择器，Id选择器，然后就是类选择器，标签选择器，通配符选择器

样式穿透 如果私有样式不允许穿透怎么设置？

白话：在vue组件中给style标签设置scoped样式隔离的，可以使用 >>> 和/deep/ 适用于vue2、::v-deep适用于vue3已经废弃改用:deep()

js事件循环机制

白话：首先js代码分为同步和异步任务，异步任务又分为宏任务队列、微任务队列，代码执行时先执行同步再执行异步，整体代码执行完会划分出异步的微任务和宏任务代码，然后看看微任务队列有没有 有 就先拿到主线程执行微任务 然后在执行宏任务，执行完宏任务 又会划分出微任务宏任务，然后会进行新一轮的执行

宏任务：script，setTimeout，setInterval，setImmediate，I/O，UI-rendering（ui渲染） 微任务：promise.then(),MutationObserver

console.log("stard")           //第一个输出stard
async function async1(){     //async 相当于new Promise，构造函数属于同步代码
    await async2()
    console.log("saync1 end"); 
}
async function async2(){
    console.log("saync2 end");  //第二个输出saync2 end
}
async1()
setTimeout(function(){     
    console.log("setTimeout");
},0)
new Promise((resolve)=>{
    console.log("promise");  //第三个输出promise
    resolve()
})
.then(()=>{                 
    console.log("then1");
})
.then(()=>{                 
    console.log("then2")
})
console.log("end");      //第四个输出end

stard saync2 end promise end saync1 end then1 then2 setTimeout

重绘重排什么区别

白话：重绘就是元素样式发生变化但位置没变，重排也叫做回流 就是元素位置发生了改变，所以说重绘不一定重排 重排一定会重绘

pinia了解吗

白话：pinia是vue3推荐的状态管理库，对比vuex 这个更轻量化使用简单，其核心模块只有state、getters、actions，state用于存储状态数据，getters相当于 vue中的计算属性用于对state中的数据进行计算，actions用于业务处理、支持同步不或异步操作state

ts 了解吗 比如说这个类型有可能是string 有可能是number,怎么定义ts？

白话：ts就是js的一个超集，在js之上添加静态类型检查，提高代码的可维护性和安全性； 可以采用联合类型 type snT = string | number

手敲二分法查找算法

/**
 * 在有序数组中使用二分查找法查找指定值的位置。
 * 
 * @param {number[]} list 有序的数字数组
 * @param {number} value 要查找的目标值
 * @returns {number} 如果找到则返回目标值在数组中的索引，否则返回 -1
 * 
 * @example
 * // 示例：查找数字 7 在数组中的位置
 * const arr = [1, 3, 5, 7, 9, 11];
 * const index = binarySearch(arr, 7); // 返回 3
 * 
 * @example
 * // 示例：查找数组中不存在的数字
 * const arr = [2, 4, 6, 8];
 * const index = binarySearch(arr, 5); // 返回 -1
 */
function binarySearch(list, value) {
  let low = 0;    // 左端点
  let high = list.length - 1;   // 右端点
  let position = -1;
  let found = false;
  let mid;
 
  while (found === false && low <= high) {
    mid = Math.floor((low + high)/2);
    if (list[mid] == value) {
      found = true;
      position = mid;
    } else if (list[mid] > value) {  // 如果在左半部分
      high = mid - 1;
    } else {  // 如果在右半部分
      low = mid + 1;
    }
  }
  return position;
}

![[../../../assets/images/2025/Pasted image 20250905115600.png]]

Share this post on:
Share this post via WhatsAppShare this post on FacebookShare this post via TelegramShare this post on PinterestShare this post via email
下一篇文章
炫酷的CSS loading加载动画（拒绝废话版）