Vue基础面试题

① Vue响应式原理

Vue 2.x使用Object.defineProperty实现响应式，Vue 3.x使用Proxy。在uniapp中，主要使用Vue 2.x版本，需注意数组和对象新增属性的响应式处理方式。

响应式 Object.defineProperty

② 生命周期钩子

uniapp生命周期分为应用生命周期（onLaunch, onShow, onHide）和页面生命周期（onLoad, onShow, onReady, onHide, onUnload）。需注意页面与组件生命周期的区别。

生命周期 onLoad

③ 组件通信方式

uniapp组件通信方式包括：props/parent/attrs/$listeners、provide/inject、globalData、vuex、eventBus等。不同场景选择不同方式。

组件通信 props vuex

UniAPI高频考点

网络请求
数据存储
导航跳转

uni.request 详解

// 基础请求示例
uni.request({
    url: 'https://api.example.com/data',
    method: 'GET',
    data: {
        id: 123
    },
    success: (res) => {
        console.log(res.data);
    },
    fail: (err) => {
        console.error('请求失败', err);
    }
});
// 封装请求工具类
class HttpRequest {
    constructor(baseURL) {
        this.baseURL = baseURL;
    }
    request(options) {
        return new Promise((resolve, reject) => {
            uni.request({
                ...options,
                baseURL: this.baseURL,
                success: (res) => {
                    if (res.statusCode === 200) {
                        resolve(res.data);
                    } else {
                        reject(new Error('请求失败'));
                    }
                },
                fail: (err) => reject(err)
            });
        });
    }
}

本地存储 API

// 同步存储
uni.setStorageSync('key', 'value');
const value = uni.getStorageSync('key');
// 异步存储
uni.setStorage({
    key: 'key',
    data: 'value',
    success: () => console.log('存储成功')
});
// 存储限制
// 微信小程序：单个key限制1MB，总容量10MB
// H5端：localStorage限制5MB

页面导航 API

// 页面跳转方式对比
/ navigateTo: 保留当前页面，跳转到应用内的某个页面
   redirectTo: 关闭当前页面，跳转到非tabBar页面
   switchTab: 跳转到tabBar页面
   navigateBack: 返回上一页面
   reLaunch: 关闭所有页面，打开到应用内的某个页面 /
// 携带参数跳转
uni.navigateTo({
    url: '/pages/detail/detail?id=123&name=test'
});
// 接收参数
onLoad(options) {
    console.log(options.id); // 123
    console.log(options.name); // test
}

性能优化专题

优化点 01
分包加载策略

将主包控制在2MB以内，通过分包加载提升首屏速度。主包放置核心页面和公共模块，分包放置次要页面。配置subPackages字段，注意分包间通信使用全局变量或事件总线。

优化点 02
图片资源优化

使用webp格式图片，压缩图片体积，使用cdn加速，懒加载长列表图片。uni.getImageInfo获取图片信息，uni.compressImage压缩图片。

优化点 03
列表渲染优化

使用v-show替代v-if控制大量元素显示隐藏，长列表使用虚拟滚动，避免频繁setData，使用wx:for-key指定唯一键值。

优化点 04
网络请求优化

启用gzip压缩，合并接口请求，使用缓存策略，设置合理的超时时间，使用连接池复用HTTP连接。

优化项 优化前 优化后 提升效果
首屏加载 3.5s 1.2s ↑ 65%
包体积 5.2MB 1.8MB ↓ 65%
列表滚动 卡顿 流畅 显著改善
内存占用 120MB 85MB ↓ 29%

原生插件开发

① 插件开发流程

1. 创建原生项目（Android/iOS）
2. 实现uni-app插件接口
3. 编译生成.aar/.framework
4. 打包成插件包
5. 在uni-app项目中引用

Android iOS uniplugin

② 插件通信机制

通过plus.runtime.invoke调用原生方法，通过uni.on进行事件通信。原生端通过JSContext执行JS代码，实现双向通信。

通信 invoke

③ 常见问题处理

1. 权限问题：动态申请权限
2. 兼容性问题：版本判断
3. 内存泄漏：及时释放资源
4. 崩溃问题：异常捕获与日志上报

权限 兼容

部署上线指南

小程序发布流程

// 1. 配置app.json
{
    "pages": [
        "pages/index/index",
        "pages/detail/detail"
    ],
    "window": {
        "navigationBarTitleText": "uniapp项目"
    },
    "permission": {
        "scope.userLocation": {
            "desc": "需要获取您的位置信息"
        }
    }
}
// 2. 编译打包
// HBuilderX -> 发行 -> 小程序-微信
// 3. 上传代码
// 微信开发者工具 -> 上传
// 4. 提交审核
// 微信公众平台 -> 管理 -> 版本管理 -> 提交审核
// 5. 上线发布
// 审核通过后 -> 发布