前端面试记录

前言：面试题永远是刷不完的，即使刷了一大堆下次面试又忘记了，重要的是组织自己的语言，保持自信，不给自己制造面不过的心理负担，对刷过的题要有个大致印象，好在答题的时候能够多多少少说出点贴近的知识，不至于卡壳，即使错过这家还有下家。

解释下vue中选项式API与组合式API?

vue2的api风格为选项式api，代码配置均已预制，选择配置编写即可

vue3的api风格为组合式api，代码配置需手动引入、手动组合编码

怎么使用webpack减少打包体积？

1.先安装打包代码之后的体积分析工具（webpack-bundle-analyzer），分析下打包代码中谁占用的体积最大

2.通过CDN的方式引入体积较大的依赖包

3.在webpack中的externals配置不需要打包的依赖

注：通过CDN引入的是静态资源，浏览器会进行缓存

uniapp怎么进行分包？

场景：一般微信小程序之类对打包的代码体积都有一个大小限制比如2M，但是我们如果用uniapp去写微信小程序的话很容易就出现一个体积超过2M的限制，所以我们就需要进行一个对代码去进行一个分包打包

1.首先如果是微信小程序之类的需要在mainfest.json中的微信小程序配置开启分包

2.然后再在pages.json里面进行一些分包的配置，主要是subpackages,如分包的根路径root，分包页面pages等等，

此处有些注意事项比如有些页面如tabbar页面不能放在分包内

路由的两种模式？

hash模式

特点：hash 变化不会触发页面请求，仅影响浏览器历史记录

操作方式：

手动修改 window.location.hash

使用 <a href="#/home"> 标签导航

浏览器前进/后退按钮

优点：无需服务器配置，兼容性好

缺点：URL 中包含 #，美观性差，不利于 SEO

javascript 复制代码

window.addEventListener('hashchange', () => {
  const hash = window.location.hash;
  renderComponentBasedOnHash(hash);
});

history模式

特点：需后端支持（如 Nginx、Koa 中间件），将所有路径重定向到入口文件（如 index.html），避免直接访问或者刷新页面时子路径时返回 404，直接访问子路径或者在子路径刷新页面会去对应的服务器地址寻找与路由对应的文件，找不到就报404了，而默认情况下或主页面下路径都是192.168.1.1/index.html，刷新页面也没事毕竟是真有这个页面，如果切换了路由就变成了92.168.1.1/routerName,而服务器没有就报错了

操作方式： 调用 history.pushState() 或 history.replaceState() 修改 URL

优点：URL 更简洁，利于 SEO。

缺点：需服务器配合，兼容性稍差（仅支持 IE10+）

javascript 复制代码

window.addEventListener('popstate', () => {
  const path = window.location.pathname;
  renderComponentBasedOnPath(path);
});

路由守卫？

路由守卫一般有三种：全局路由守卫，独享路由守卫，组件的路由守卫

全局路由守卫

有前置、解析、后置三大守卫，执行顺序依次执行

前置:适用场景有权限校验等

javascript 复制代码

router.beforeEach((to, from, next) => {
    next()
})

解析:在所有异步组件和组件内守卫解析后触发，适合确保数据加载完成

javascript 复制代码

router.beforeResolve((to, from, next) => {
    next()
})

后置:导航完成后触发，适用场景有日志记录或页面标题更新

javascript 复制代码

router.afterEach((to, from, next) => {
    
})

局部路由守卫

主要写在路由配置里面用于鉴权

组件路由守卫

beforeRouteEnter、 beforeRouteUpdate、 beforeRouteLeave 分别是组件路由进入、更新、离开时触发

作用域有哪些？

1.全局作用域

2.函数作用域：定义在函数内部，只能函数内部访问的作用域

3.块级作用域："块"主要指的是"{}"，使用`let`和`const`声明的变量具有块级作用域

4.模块作用域：模块主要是指在js里面引入的某个js模块