面试问答，

别想转行了，自己的行业都干不了，别的行业也干不了

1. 都使用过哪些框架写项目

常用过的前端框架包括：Vue.js、React、Angular。后端框架有：Express、Koa、Django、Spring Boot 等，针对项目的需求选择合适的框架。

2. 对 Vue 的数据双向绑定怎么理解

Vue 实现数据双向绑定主要通过 v-model 指令和 Object.defineProperty（Vue 2）或 Proxy（Vue 3）。它使得数据的变化能够自动反映到视图层，反之，用户的输入也能更新数据。这是通过 Vue 的响应式系统来实现的，当数据变化时，会触发视图更新。

3. 你对 Vue 的 MVVM 有什么理解

MVVM（Model-View-ViewModel）是 Vue 的架构模式。它将应用程序的视图（View）与业务逻辑（Model）分离，ViewModel 是一个连接 View 和 Model 的桥梁，处理视图和数据之间的同步。Vue 通过 data 和计算属性等来实现 ViewModel 的功能，确保数据变化能够自动驱动视图更新。

4. JS 的事件循环机制说一下

JavaScript 是单线程执行的，但事件循环机制使得它可以处理异步操作。事件循环的核心概念是：

1. 调用栈：执行当前任务。
2. 任务队列：保存待执行的异步任务。
3. 事件循环：在调用栈为空时，事件循环会将任务队列中的任务推入调用栈，执行它们。

通过这机制，JavaScript 可以处理如 setTimeout、Promises 等异步操作。

5. H5 那边的节流和防抖

• 防抖：防止短时间内多次触发事件，只有事件停止触发一段时间后才会执行。常用于用户输入或窗口调整大小等场景。
• 节流：限制单位时间内事件触发的次数，常用于高频率触发的事件，如滚动、resize 等。节流保证在一定时间内事件只会被执行一次。

6. 你能大概的说一下 Vue 的生命周期吗

Vue 的生命周期包括以下几个阶段：

1. 创建阶段：

   • beforeCreate：实例化后，数据观测和事件配置之前。
   • created：实例已创建，数据已经观测，事件和方法已设置。

2. 挂载阶段：

   • beforeMount：模板和 DOM 被挂载之前。
   • mounted：挂载完毕，页面已渲染完成。

3. 更新阶段：

   • beforeUpdate：数据变化，DOM 更新之前。
   • updated：DOM 更新完成。

4. 销毁阶段：

   • beforeDestroy：组件销毁前，事件和数据还在。
   • destroyed：销毁后，实例已被销毁。

7. 跨域这边你们前端是如何解决的

前端跨域问题可以通过以下几种方式解决：

• CORS：通过服务器设置响应头允许跨域访问。
• JSONP：通过动态加载 script 标签来绕过同源策略。
• 代理服务器：通过设置开发环境的代理服务器，将请求代理到不同域上。
• iframe + postMessage：通过嵌套 iframe 进行跨域通信。

8. ES7 里面 async/await 有使用过吗

是的，async/await 是 ES7 引入的异步编程语法，使用它可以避免回调地狱，写出更简洁的异步代码。async 标记一个函数为异步，await 用于等待 Promise 解析结果。

async function fetchData() {
  try {
    const response = await fetch("/data");
    const data = await response.json();
    return data;
  } catch (error) {
    console.error(error);
  }
}

9. 你能讲一个你比较熟悉的项目, 大致说一下它的业务

可以讲述一个熟悉的项目，假如是开发一个新闻信息流广告平台，主要业务是通过新闻内容匹配相关广告，向用户展示个性化广告。这涉及到广告的精准投放、用户行为分析、后台管理系统等多个模块。

10.性能优化

1. 构建层面
   1. Tree Shaking
   2. 代码分割（Code Splitting）大代码块分割为多个小代码块，实现懒加载
   3. 代码的压缩混淆
2. 代码层面
   1. 关键资源优先加载，非关键的异步加载
   2. 减少重排 (Reflow) 与重绘 (Repaint)，批量修改 DOM，动画，优先使用 CSS 的 transform 和 opacity 属性，因为它们可以利用 GPU 加速，避免触发重排
   3. 事件处理优化，对于 scroll、resize、input 等高频触发的事件，使用防抖 (Debounce) 和节流 (Throttle) 技术来控制事件处理函数的执行频率
3. 资源层面
   1. 图片懒加载
   2. CDN
   3. gzip
   4. 使用现代图片格式，webP，图片压缩，字体压缩
   5. 合并小图标，使用字体文件等
   6. 开启浏览器缓存，（强缓存：强缓存是性能最优的缓存方式。它的核心逻辑是：浏览器在判断缓存有效后，会直接使用本地资源，完全不向服务器发送任何请求。协议缓存：当强缓存失效（例如 max-age 过期）或被禁用（设置了 no-cache）时，浏览器会进入协商缓存流程。它的核心逻辑是：浏览器会向服务器发送一个请求，询问“我本地的资源是否还有效？）

11.var,let,const

• var 是函数作用域：它只关心函数边界，不关心 {} 块边界（除非是函数块）。
• let 和 const 是块级作用域：它们只在大括号 {} 内有效（如 if、for 循环）。

12.setup的作用