Vue、微信小程序、Uniapp 面试题整理
Vue，小程序、uniapp常用的组件有哪些，配套的组件库有哪些？
Vue，小程序、uniapp如何进行路由跳转？
Vue，小程序、uniapp如何发起网络请求？
一、Vue 相关面试题
基础部分
1. Vue 的核心特性是什么？
2. Vue 2 和 Vue 3 的主要区别有哪些？
3. 什么是 MVVM 模式？Vue 是如何实现它的？
4. 解释 Vue 的生命周期钩子函数及其执行顺序
5. v-if 和 v-show 的区别是什么？
组件通信
6. Vue 组件间通信的方式有哪些？
7. 父子组件如何传递数据？
8. 非父子组件如何通信？
9. Vuex |Pinia的核心概念是什么？
10. 什么时候应该使用 Vuex|PInia？
二、微信小程序面试题
基础部分
1. 微信小程序的文件结构是怎样的？
2. 小程序的生命周期函数有哪些？
3. 小程序页面间如何传递数据？
4. 小程序的 WXSS 和 CSS 有什么区别？
5. 小程序的双向绑定和 Vue 有什么不同？
进阶部分
6. 小程序的运行机制是怎样的？
7. 如何优化小程序的性能？
8. 小程序如何实现自定义组件？
9. 小程序的登录流程是怎样的？
实战问题
11. 小程序如何实现下拉刷新和上拉加载更多？
12. 如何处理小程序的兼容性问题？
13. 小程序如何实现数据缓存？
14. 小程序如何调用微信原生 API？
15. 小程序如何实现分享功能？三、Uniapp 面试题
基础部分
1. Uniapp 是什么？它有什么优势？
2. Uniapp 如何实现多端兼容？
3. Uniapp 的生命周期有哪些？
4. Uniapp 如何调用原生功能？
5. Uniapp 的页面路由与微信小程序有什么不同？
进阶部分
6. Uniapp 如何实现条件编译？
7. Uniapp 如何优化多端应用的性能？
8. Uniapp 如何实现原生插件开发？
9. Uniapp 如何处理多端样式兼容问题？
10. Uniapp 如何实现热更新？
实战问题
11. Uniapp 如何实现微信登录？
12. Uniapp 如何实现支付功能？
13. Uniapp 如何实现消息推送？
14. Uniapp 如何适配不同屏幕尺寸？
15. Uniapp 如何打包发布到不同平台？
四、跨框架问题
1. Vue、微信小程序和 Uniapp 在数据绑定方面的异同
2. 如何将 Vue 项目迁移到 Uniapp？
3. Vue 组件和小程序/Uniapp 组件的区别
4. 如何解决跨平台开发中的样式兼容问题？
5. 移动端开发中常见的性能优化手段有哪些？
6. 如何实现一套代码适配多个平台？
7. H5、小程序和 App 开发的主要区别是什么？
8. 如何调试多端应用？
9. 你如何处理不同平台的 API 差异？
五、项目经验相关
1. 你做过的最复杂的 Vue/小程序/Uniapp 项目是什么？遇到了什么挑战？
2. 你是如何解决跨平台兼容性问题的？
3. 你在性能优化方面做过哪些工作？
4. 你如何处理移动端的用户体验问题？
5. 你是如何进行移动端测试的？
Vue、微信小程序、Uniapp 面试题答案整理
一、常用组件及组件库
Vue
- 常用组件：表单组件、表格组件、弹窗组件、导航菜单、分页组件
- 组件库：Element UI、Ant Design Vue、Vant、iView
微信小程序
- 常用组件：视图容器、基础内容、表单组件、导航、媒体组件
- 组件库：WeUI、Vant Weapp、MinUI、Wux Weapp
Uniapp
- 常用组件：基础组件（view/text/button）、表单组件、媒体组件、地图
- 组件库：uni-ui、uView、ColorUI
二、路由跳转方式
Vue
// 声明式导航
<router-link to="/path"></router-link>
// 编程式导航
this.$router.push('/path')
this.$router.replace('/path')
微信小程序
// 保留当前页面跳转
wx.navigateTo({url: '/page/path'})
// 关闭当前页面跳转
wx.redirectTo({url: '/page/path'})
// 返回
wx.navigateBack()
Uniapp
// 类似小程序API
uni.navigateTo({url: '/pages/path'})
uni.redirectTo({url: '/pages/path'})
// 类似Vue方式
<navigator url="/pages/path"></navigator>三、网络请求方式
Vue
| 方法 | 幂等性 | 安全性 | 请求体 | 缓存 | 主要用途 |
|---|---|---|---|---|---|
| GET | 是 | 是 | 无 | 可 | 获取数据 |
| POST | 否 | 否 | 有 | 不可 | 创建数据 |
| PUT | 是 | 否 | 有 | 不可 | 更新全部 |
| DELETE | 是 | 否 | 通常无 | 不可 | 删除资源 |
// 使用axios
axios.get('/api/data').then(response => {})
axios.post('/api/data', params).then(response => {})
// 或使用fetch
fetch('/api/data').then(response => response.json())微信小程序
wx.request({
url: 'https://example.com/api',
method: 'GET',
success(res) {},
fail(err) {}
})Uniapp
uni.request({
url: 'https://example.com/api',
method: 'GET',
success(res) {},
fail(err) {}
})四、Vue 相关面试题答案
基础部分
1. Vue核心特性：
- 数据驱动（响应式系统）：Vue 的核心机制，通过数据变化自动更新视图，无需直接操作 DOM
- 组件化开发：将UI拆分为独立可复用的组件，形成树状结构
- 指令系统：特殊的HTML属性，带有
v-前缀，用于响应式地操作DOM - 虚拟DOM：用JavaScript对象模拟真实DOM结构，通过diff算法高效更新视图
- 模板语法：基于HTML的声明式模板，可以插入数据绑定和指令
2. Vue2 vs Vue3主要区别：
- 响应式原理不同（Object.defineProperty vs Proxy）：
- Composition API 替代 Options API
- 性能优化（Tree-shaking支持更好）
- 生命周期变化
- 更好的TypeScript支持
3. MVVM模式：
- Model-View-ViewModel
- Vue通过数据绑定实现View和Model的自动同步
- ViewModel作为中间层处理业务逻辑
4. 生命周期钩子（Vue2）：
beforeCreate → created → beforeMount → mounted → beforeUpdate → updated →
beforeDestroy → destroyed
5. v-if vs v-show：
- v-if：条件渲染，不满足时元素不存在于DOM
- v-show：条件显示，通过CSS控制，元素始终在DOM中
组件通信
6. 组件通信方式：
- 父子：props/$emit
- 子父：$emit/$on
- 任意组件：Vuex/Pinia
7. 父子组件数据传递：
- 父→子：props
- 子→父：$emit事件
五、微信小程序面试题答案
基础部分
1. 文件结构：
- app.json：全局配置
- app.js：入口文件
- app.wxss：全局样式
- pages：页面目录
- utils：工具函数
2. 生命周期：
- App生命周期：onLaunch, onShow, onHide
- Page生命周期：onLoad, onShow, onReady, onHide, onUnload
3. 页面传参：
// 跳转时传参
wx.navigateTo({url: '/page?id=1'})
// 接收参数
Page({
onLoad(options) {
const id = options.id
}
})4. 双向绑定区别：
- Vue：v-model直接双向绑定
- 小程序：需要绑定事件手动setData
进阶部分
7. 性能优化：
- 减少setData调用频率和数据量
- 使用分包加载
- 图片压缩
- 合理使用onPageScroll
8. 自定义组件：
- 创建组件目录
- 配置component: true
- 使用properties定义属性
- 父组件通过属性传递数据
六、Uniapp面试题答案
基础部分
1. Uniapp优势：
- 一套代码多端运行
- 基于Vue.js开发
- 丰富的插件生态
- 接近原生性能
2. 多端兼容原理：
- 运行时根据不同平台编译为对应代码
- 条件编译处理平台差异
- 统一的API调用方式
3. 生命周期：
- 应用生命周期：onLaunch, onShow, onHide
- 页面生命周期：onLoad, onShow, onReady, onHide, onUnload
- 组件生命周期：与Vue相同
进阶部分
6. 条件编译：
// #ifdef H5
console.log('只在H5平台执行')
// #endif
// #ifdef MP-WEIXIN
console.log('只在微信小程序执行')
// #endif七、跨框架问题答案
1. 数据绑定异同：
- Vue：双向绑定，v-model
- 小程序：单向绑定，需手动setData
- Uniapp：类似Vue，但部分平台有限制
2. Vue迁移Uniapp：
- 调整目录结构
- 替换特定API
- 处理平台差异
- 使用条件编译
3. 移动端性能优化：
- 图片懒加载
- 减少DOM节点
- 节流防抖
- 合理使用缓存
- 避免频繁setData
八、项目经验相关答案
1. 复杂项目挑战：
- 跨平台兼容性问题
- 性能优化（如长列表渲染）
- 与原生功能交互
- 多端UI一致性
2. 性能优化实践：
- 使用虚拟列表优化长列表
- 图片压缩和懒加载
- 减少不必要的数据响应
- 合理使用缓存策略
3. 移动端测试：
- 真机测试
- 多平台兼容性测试
- 性能分析工具
- 用户行为测试