前端场景题记录

1、实现一个vue3的弹框组件，你会如何设计

• 组件结构
• 插槽slot
• 样式
• 显示和隐藏逻辑
• 事件处理

2、首页白屏可能是什么问题引起的，如何解决

• 资源路径错误

    export default defineConfig({
        plugins:[vue()],
        base:process.env.NODE_ENV === 'production'? './':'/'
    })

• 路由配置错误
  • 确保路由组件使用动态导入（import()）并正确处理错误

3、前端如何处理后端接口返回的超大树形机构数据

• 虚拟滚动（最佳方案，只渲染当前可见部分）
  • vue3虚拟滚动插件、element-plus、ant-design-vue自带虚拟滚动
• 懒加载（只加载当前节点的子节点，减少初始数据量），需后端接口配合
• 数据分片处理
  • 需后端接口配合
  • Web Worker处理

4、同一链接，如何实现PC端打开进入web页，手机打开进入H5页面

• 前端javaScript检测设备（userAgent）
• 屏幕尺寸检测
  • <768 移动端

function detectDevice(){
    const userAgent = navigator.userAgent.toLowerCase();
    const isMobileUA = /iphone|ipod|ipad|android|mobile|phone|touch|mini|silk/i.test(userAgent);
    const isSmallScreen = window.innerWidth<768 //769是常见的移动端分界点
    return (isMobileUA || isSmallScreen)?'mobile':'pc'
}

需要延迟重定向（避免影响SEO） 重定向影响搜索引擎抓取，可以延迟跳转

5、使用vue开发一个任务列表应用，你会如何设计实现

• 组件结构
• 状态管理
• 类型定义
• 关键功能实现（添加新任务，标题（标题，描述，优先级））

6、如何禁止他人调试前端页面代码

• 构建核心防御机制
  • 高级代码混淆
  • 动态Debugger陷阱
• 浏览器特性检测与阻断
  • 开发者工具检测
  • 快捷键禁用
  • 右键菜单禁用
• 进阶防御策略
  • 代码分片与动态加载
  • 反调试库集成
    • 推荐工具：diasable-devtool或console-ban

7、