面试题面试题总结2这份面试主要包括前端基础、uni-app，Vue框架方面以及和项目相关的问题、还有CSS和布局方面的问

1. JavaScript 和 TypeScript 有什么区别？优缺点是什么？

区别：
- JS 是解释型、弱类型语言；TS 是 JS 的超集，增加了静态类型检查。
- TS 需要编译成 JS 才能运行。
- TS 支持接口、泛型、枚举等更完善的类型系统。
优点（TS 相对 JS） ：
- 类型检查，减少运行时错误。
- 更好的 IDE 支持和代码提示。
- 更利于大型项目维护。
缺点：
- 学习成本更高。
- 需要编译，增加构建流程。
- 项目初期开发会比 JS 慢一些。

2. JS 中 var、let、const 的区别？

var：函数作用域，存在变量提升，可重复声明。
let：块级作用域，不存在变量提升，不可重复声明。
const：块级作用域，声明必须赋值，引用不可变，但对象属性可变。

3. JS 中闭包是什么？实际开发中有哪些应用场景？

闭包定义：函数嵌套函数，内部函数可以访问外部函数作用域中的变量。
应用场景：
- 封装私有变量（如计数器）。
- 延迟执行（事件回调）。
- 模块化开发，避免全局污染。

4. GET 和 POST 请求的区别是什么？在数据量、安全性、使用场景方面有什么不同？

数据量：GET 有长度限制（URL 约 2K–8K），POST 理论上无限。
安全性：GET 参数明文在 URL 里，敏感信息不安全；POST 放在请求体中，相对安全。
使用场景：
- GET：查询、无副作用操作。
- POST：新增、修改、删除数据等操作。

5. Cookie 和 Session 的区别是什么？你们项目中是如何使用的？

Cookie：存储在客户端，容量小，安全性差，常用于存储 token、登录状态。
Session：存储在服务端，依赖 Session ID，安全性更高。
项目中应用：
- 小程序/前端项目中一般通过 Cookie/LocalStorage 保存 token；
- 后端通过 Session 管理用户登录状态。

6. 数组和集合有什么区别？

数组：有序、可重复、通过索引访问。
集合（Set） ：无序、不重复，常用于去重和快速查找元素。

// JavaScript 中的数组和 Set
const array = [1, 2, 2, 3, 4, 4];
const set = new Set([1, 2, 2, 3, 4, 4]);

console.log(array); // [1, 2, 2, 3, 4, 4]
console.log(set);   // Set {1, 2, 3, 4}

7. 你对 Vue3 的整体结构和运行机制了解多少？

整体结构：
- 响应式系统（Reactivity）。
- 组件系统（Component）。
- 渲染器（Renderer）——虚拟 DOM -> 真 DOM。
运行机制：
- 数据变化 -> 响应式追踪依赖 -> 触发视图更新 -> 渲染函数更新虚拟 DOM -> 更新真实 DOM。

8. Vue3 的核心设计理念是什么？它的响应式原理是如何实现的？

核心设计理念：
- “一切皆为函数”（组合式 API）。
- 高度模块化，按需引入。
响应式原理：
- 基于 Proxy 实现数据劫持和依赖收集。
- 访问属性时收集依赖（track），修改属性时触发更新（trigger）。
响应式原理代码：

// 基于 Proxy 的响应式
function reactive(target) {
    return new Proxy(target, {
        get(obj, key) {
            track(obj, key); // 依赖收集
            return obj[key];
        },
        set(obj, key, value) {
            obj[key] = value;
            trigger(obj, key); // 触发更新
            return true;
        }
    });
}

// 使用示例
const state = reactive({ count: 0 });
effect(() => {
    console.log('Count:', state.count);
});
state.count++; // 自动触发 effect

9. 在做小程序开发时，如何适配不同分辨率和机型？

rpx 单位系统 - 微信小程序自适应单位
Flex 布局 - 弹性盒模型
媒体查询 - 针对不同屏幕尺寸
设计稿基准 - 以 750px 宽为基准

/* 使用 rpx 适配 */
.container {
    width: 750rpx; /* 在 750px 宽屏幕上显示为 750px */
    padding: 20rpx;
}

/* 媒体查询适配极端情况 */
@media screen and (max-width: 320px) {
    .container {
        font-size: 24rpx;
    }
}

10. 小程序里为什么常用 rpx 单位？与普通网页里的 px/rem/em 有什么不同？

rpx：相对单位，基于屏幕宽度自动适配，750rpx = 屏幕宽度。
px：绝对像素，不适配。
rem：相对根元素的字体大小。
em：相对父元素字体大小。
小程序推荐用 rpx，因为能自动适配不同机型。

11. UniApp 的优缺点是什么？

优点：
- 一套代码多端运行（H5、小程序、App）。
- 丰富的组件库和插件市场。
缺点：
- 性能略逊于原生开发。
- 跨端兼容问题，需要单独适配。

12. 你在小程序项目中，支付功能是如何实现的？

前端调用微信支付 API，传入订单号。
后端调用微信统一下单接口，生成预支付交易单。
前端调起支付，用户确认付款。
支付结果异步通知后端，前端轮询或监听支付结果。

// 前端支付流程
async function handlePayment(orderId) {
    try {
        // 1. 调用后端创建支付订单
        const { prepay_id, nonceStr, timeStamp, sign } = await createOrder(orderId);
        
        // 2. 调用微信支付API
        const paymentResult = await new Promise((resolve, reject) => {
            wx.requestPayment({
                timeStamp,
                nonceStr,
                package: `prepay_id=${prepay_id}`,
                signType: 'MD5',
                paySign: sign,
                success: resolve,
                fail: reject
            });
        });
        
        // 3. 验证支付结果
        await verifyPayment(orderId);
        
    } catch (error) {
        console.error('支付失败:', error);
    }
}

13. 打包过程是怎样的？Webpack 的作用是什么？

打包过程：源代码（.vue、.js、.css 等） → Loader 处理 → Plugin 优化 → 输出打包文件。
Webpack 作用：
- 模块打包（支持 ES6/TS/图片/字体等）。
- 代码分割、按需加载。
- 压缩优化。

14. 你用过微信开发者工具吗？主要用来做什么？

模拟小程序运行环境。
调试网络请求、数据存储、界面效果。
真机调试、预览、上传代码。

15. 如何解决不同浏览器的兼容性问题？

使用 Babel 转译 ES6+。
使用 PostCSS 处理 CSS 兼容。
使用 Polyfill（如 core-js）。
CSS hack、条件注释。

16. 响应式布局一般有哪些实现方式？

媒体查询（Media Query）。
百分比布局。
Flex/Grid 布局。
rem/rpx 单位。