2023.2前端实战面试题，面两家整理

做自我介绍，你好，我是来面试贵公司的前端开发工程师岗位的，主要技术栈为xxx，当前在本公司主要从事xxx方面的前端开发工作（一堆随意说都行）

无先后顺序

1.type和interface的区别

type的区别

1. type可以定义 基本类型的别名
2. type可以通过 typeof 操作符来定义
3. type可以声明 联合类型
4. type可以声明 元组类型

interface的区别

1. interface可以 声明合并

2.vue2和vue3的区别

1. vue2使用optionsAPI，vue3使用compositionAPI
2. vue3向外提供了很多内置API使用，而vue2没有
3. vue2所有的方法和数据几乎都挂在vue实例原型上，可能会出现初始化加载慢等问题
4. vue2使用definePropert对数据进行劫持，vue3使用Proxy对数据进行代理
5. defineProperty只能监听某个对象属性，不能对全对象监听，Proxy可以监听数组，不⽤再去单独的对数组做特异性操作,通过Proxy可以直接拦截所有对象类型数据的操作，完美⽀持对数组的监听
6. 另外vue3还新增了⼀些内置组件和⽅法，比如teleport传送门组件，setup函数
7. vue3加入了TS类型支持

3.es module和commonjs的区别

1. commonjs nodejs里的标准
2. commonjs这种加载称为运行时加载
3. es6 module 这种加载称为编译时加载或者静态加载
4. CommonJs导出值是拷贝，可以修改导出的值，这在代码出错时，不好排查引起变量污染
5. Es Module导出是引用值之前都存在映射关系，并且值都是可读的，不能修改

4.首屏加载慢有哪些优化办法

1. 数据分页
2. 图片懒加载
3. ssr
4. 第三方模块按需加载
5. 减少同步阻塞操作
6. seo优化
7. 路由懒加载，异步组件
8. 在更多的情况下，使用v-if代替v-show
9. 如果需要使用v-for给每个元素绑定事件时，使用事件委托
10. 压缩代码
11. 缓存优化（客户端缓存，服务端缓存）

5.webpack与vite的区别

1. 开发环境的区别
   1. vite自己实现server，不对代码打包，充分利用浏览器对
   2. webpack-dev-server 常使用babel-loader 基于内存打包，比vite慢很多
2. 生产环境区别
   1. vite使用 rollup + esbuild 来打包js代码
   2. webpack使用babel来打包js代码，比esbuild（go语言编写）慢很多
      1. webpack能使用esbuild吗？可以，需要自己配置很麻烦
3. 文件处理时机

   1. vite只会在你请求某个文件的时候处理该文件

   2. webpack 会提前打包好 main.js，等你请求的时候直接输出打包好的js给你

6.webpack都做过哪些优化

• 构建时间的优化：
  1. thread-loader，多进程打包，放在耗费时间的babel-loader之前
  2. cache-loader，缓存资源，提高二次构建速度，放在比较耗时间的loader之前
  3. 开启热更新，提高修改代码重新构建的时间
  4. exclude 和 include 配置不需要处理和需要处理的文件，配置这两个属性可以提高构建速度
  5. 区别构建环境，1.开发环境中去除代码压缩 gzip 体积分析等优化提高构建速度。2.生产环境中需要代码压缩 gzip 体积分析 等优化，减少整个打包文件的体积
  6. 提高webpack版本，版本越高打包效果越好
• 打包体积的优化
  1. css优化 css-minimizer-webpack-plugin css代码压缩
  2. js优化 terser-webpack-plugin js代码压缩 3.tree-shaking 只打包有用代码，无用代码不会打包
• 用户体验的优化 1.js模块懒加载，分成很多js小文件 2.开启gzip优化打包体积 comporession-webpack-plugin 3.小图片转为base64格式 asset-module 4.合理配置hash值，为了让浏览器能识别更新前后的hash值，未更新的才能命中缓存，从而达到性能优化的目的

7.Promise.all, Promise.race, Promise.allSettled，三个方法的区别

1. Promise.all -> 返回一个promise，在all参数中的由promise组成的可迭代对象，全部都由等待状态变为成功状态时，会返回一个resolve到返回的promise中。相反promise组成的数组中有一个由等待状态变为失败状态的，就会返回一个reject到返回的promise中
2. Promise.race -> 返回一个promise, 在race参数中的由promise组成的可迭代对象，只要有一个由等待状态变成成功或者失败状态，就会返回一个resolve或者reject到返回的promise中
3. Promise.allSettled -> 返回一个promise，在allSettled参数中由promise组成的可迭代对象，全部都由等待变成成功或者失败时，会返回一个数组promise，该数组由成功和失败结果一起组成的promise结果

8.es6有哪些新特性

1. 新增symbol类型
2. const/let
3. 变量得结构赋值，剩余运算符，扩展运算符
4. 模板字符串
5. 箭头函数
6. Set和Map
7. Proxy/Reflect
8. Promise
9. async await
10. Class
11. Module语法（import/export）

9.v-model在vue2和vue3中的区别

1.vue2中v-model可以使用 sync修饰符
2.vue3中废除sync修饰符，可以使用多个v-model，v-model可以使用自定义修饰符

10.实现v-model

自行搜索

11.一个字典数据，如果做到请求一次多个组件使用

我回答了，vuex全局缓存，他说不是想要这个答案，说是排除外部工具，我也没懂啥意思，我就说如果是兄弟组件的话，可以在父组件请求字典数据，然后组件通信把数据传入子组件中去。 看当时面试官的表情，感觉还像是没对，我又说我可以定义一个model文件，在文件中封装请求字典方法导出全局使用也行，我心想我这不跟vuex一个意思吗？ 希望有知道的朋友补充

12.proxy和Object.defineProperty的区别

1.Object.defineProperty是对一个对象属性进行拦截，拦截属性的setter和getter方法，在对象属性发生变化时进行特定的操作。而proxy则是劫持整个对象

2.proxy会返回一个对象，直接对这个对象进行操作即可，而defineProperty则需要遍历对象属性进行修改

3.Object.defineProperty 监听不了拦截数组新增成员的改变，而proxy可以

4.Object.defineProperty 兼容性比proxy好很多

13.watch与computed的区别

1.watch是一个对象，对象的键就是需要监听的值，而接收变化的是一个回调函数，回调函数的参数就是监听变化的值，用于监听值的变化来进行一些副作用的操作逻辑。

2.computed计算属性，计算属性的值会被缓存，当计算属性函数中的值没有变化时，就会使用缓存中的值，当计算属性函数中的值变化时，会更新缓存中的值，然后继续使用缓存中的值。

13.事件冒泡和事件委托

1. 事件冒泡，在某一个对象上触发事件，如果事件在自己身上就在自身触发，如果没有就向父对象上传播，最终父对象触发事件
2. 事件委托，是利用事件冒泡的机制，把事件挂载到父对象上，在子节点触发事件时，利用事件冒泡机制向父节点传播，父节点事件触发之后可以在事件参数中拿到对应触发事件的子节点。因此，可以把子节点上定义的事件函数定义在父节点事件上，由父节点来统一管理子节点事件，达到一个事件委托代理的目的。

14.跨域的解决方案有哪些

1.nodejs中间件
2.cors
3.websocket
4.jsonp
5.nginx反向代理
6.postMessage
7.脚手架代理
8.proxyTable
9.iframe

15.改变this指向有哪些方法

1.call，apply，bind（箭头函数的this指向改不了，因为箭头函数没有this）

16.mixins和组件的生命周期顺序

1.mx created -> page created -> mx mounted -> page mounted
2.mx 与 page 同名变量 只执行 page
3.mx 与 page 同名方法 只执行 page

17.知道哪些安全策略

1.xss 代码注入攻击，避免方式： 1.url使用 encodeURLComponent 方法转译。2.尽量不要使用 innerHtml插入HTML内容。3.使用特殊字符，标签转义符。
2.csrf 跨站请求伪造，避免方式：1.添加验证码。2.使用token
3.ddos 避免方式：1.限制单IP请求次数。2.防火墙等防护设置禁止ICMP包等。3.检查特权端口的开发

18.vue 什么是单向数据流

单向数据流就是，数据由父组件流向子组件，子组件不能主动修改父组件的数据，必须得子组件向父组件发送事件请求父组件修改数据的方式。单向数据流保证了数据来源的唯一性，避乱了代码混乱和不可测的结果。增加了代码的维护性和调试性。