前段面试题新版

Vue**、微信小程序、Uniapp面试题整理**
Vue**，小程序、uniapp常用的组件有哪些，配套的组件库有哪些？**
Vue**，小程序、uniapp如何进行路由跳转？**
Vue**，小程序、uniapp如何发起网络请求？**
一、Vue相关面试题
基础部分

Vue****的核心特性是什么？
Vue 2和Vue 3****的主要区别有哪些？
什么是MVVM模式？Vue是如何实现它的？
解释Vue的生命周期钩子函数及其执行顺序
v-if和v-show****的区别是什么？
组件通信
Vue****组件间通信的方式有哪些？
父子组件如何传递数据？
非父子组件如何通信？
Vuex |Pinia****的核心概念是什么？
什么时候应该使用Vuex|PInia？
二、微信小程序面试题
基础部分
微信小程序的文件结构是怎样的？
小程序的生命周期函数有哪些？
小程序页面间如何传递数据？
小程序的WXSS和CSS有什么区别？
小程序的双向绑定和Vue有什么不同？
进阶部分
小程序的运行机制是怎样的？
如何优化小程序的性能？
小程序如何实现自定义组件？
小程序的登录流程是怎样的？
实战问题
小程序如何实现下拉刷新和上拉加载更多？
如何处理小程序的兼容性问题？
小程序如何实现数据缓存？
小程序如何调用微信原生API？
**小程序如何实现分享功能？**三、Uniapp面试题
基础部分
Uniapp****是什么？它有什么优势？
Uniapp****如何实现多端兼容？
Uniapp****的生命周期有哪些？
Uniapp****如何调用原生功能？
Uniapp****的页面路由与微信小程序有什么不同？
进阶部分
Uniapp****如何实现条件编译？
Uniapp****如何优化多端应用的性能？
Uniapp****如何实现原生插件开发？
Uniapp****如何处理多端样式兼容问题？
Uniapp****如何实现热更新？
实战问题
Uniapp****如何实现微信登录？
Uniapp****如何实现支付功能？
Uniapp****如何实现消息推送？
Uniapp****如何适配不同屏幕尺寸？
Uniapp****如何打包发布到不同平台？
四、跨框架问题
Vue**、微信小程序和Uniapp在数据绑定方面的异同**
如何将Vue项目迁移到Uniapp？
Vue组件和小程序/Uniapp****组件的区别
如何解决跨平台开发中的样式兼容问题？
移动端开发中常见的性能优化手段有哪些？
如何实现一套代码适配多个平台？
H5**、小程序和App开发的主要区别是什么？**
如何调试多端应用？
你如何处理不同平台的API差异？
五、项目经验相关
你做过的最复杂的Vue/小程序/Uniapp项目是什么？遇到了什么挑战？
你是如何解决跨平台兼容性问题的？
你在性能优化方面做过哪些工作？
你如何处理移动端的用户体验问题？
你是如何进行移动端测试的？

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相关面试题答案

基础部分

Vue****核心特性：

数据驱动（响应式系统）：Vue 的核心机制，通过数据变化自动更新视图，无需直接操作 DOM
组件化开发：将UI拆分为独立可复用的组件，形成树状结构
指令系统：特殊的HTML属性，带有 v- 前缀，用于响应式地操作DOM
虚拟DOM：用JavaScript对象模拟真实DOM结构，通过diff算法高效更新视图
模板语法：基于HTML的声明式模板，可以插入数据绑定和指令

Vue2 vs Vue3****主要区别：

响应式原理不同（Object.defineProperty vs Proxy）：
Composition API 替代 Options API
性能优化（Tree-shaking支持更好）
生命周期变化
更好的TypeScript支持

MVVM****模式：

Model-View-ViewModel
Vue通过数据绑定实现View和Model的自动同步
ViewModel作为中间层处理业务逻辑

生命周期钩子（Vue2）：
beforeCreate → created → beforeMount → mounted → beforeUpdate → updated →
beforeDestroy → destroyed
v-if vs v-show：

v-if：条件渲染，不满足时元素不存在于DOM
v-show：条件显示，通过CSS控制，元素始终在DOM中

组件通信
6. 组件通信方式：

父子：props/$emit
子父： $emit/$ on
任意组件：Vuex/Pinia

父子组件数据传递：

父→子：props
子→父：$emit事件

五、微信小程序面试题答案
基础部分

文件结构：

app.json：全局配置
app.js：入口文件
app.wxss：全局样式
pages：页面目录
utils：工具函数

生命周期：

App生命周期：onLaunch, onShow, onHide
Page生命周期：onLoad, onShow, onReady, onHide, onUnload

页面传参：

// 跳转时传参
wx.navigateTo({url: '/page?id=1'})
// 接收参数
Page({
onLoad(options) {
const id = options.id
}
})
双向绑定区别：

Vue：v-model直接双向绑定
小程序：需要绑定事件手动setData

进阶部分
7. 性能优化：

减少setData调用频率和数据量
使用分包加载
图片压缩
合理使用onPageScroll

自定义组件：

创建组件目录
配置component: true
使用properties定义属性
父组件通过属性传递数据

六、Uniapp面试题答案
基础部分

Uniapp****优势：

一套代码多端运行
基于Vue.js开发
丰富的插件生态
接近原生性能

多端兼容原理：

运行时根据不同平台编译为对应代码
条件编译处理平台差异
统一的API调用方式

生命周期：

应用生命周期：onLaunch, onShow, onHide
页面生命周期：onLoad, onShow, onReady, onHide, onUnload
组件生命周期：与Vue相同

进阶部分
6. 条件编译：

复制代码

// #ifdef H5
console.log('只在H5平台执行')
// #endif
// #ifdef MP-WEIXIN
console.log('只在微信小程序执行')
// #endif

七、跨框架问题答案

数据绑定异同：

Vue：双向绑定，v-model
小程序：单向绑定，需手动setData
Uniapp：类似Vue，但部分平台有限制

Vue迁移Uniapp：

调整目录结构
替换特定API
处理平台差异
使用条件编译

移动端性能优化：

图片懒加载
减少DOM节点
节流防抖
合理使用缓存
避免频繁setData

八、项目经验相关答案

复杂项目挑战：

跨平台兼容性问题
性能优化（如长列表渲染）
与原生功能交互
多端UI一致性

性能优化实践：

使用虚拟列表优化长列表
图片压缩和懒加载
减少不必要的数据响应
合理使用缓存策略

移动端测试：

真机测试
多平台兼容性测试
性能分析工具
用户行为测试

前段面试题新版

Vue**、微信小程序、Uniapp面试题答案整理**

一、常用组件及组件库

二、路由跳转方式

三、网络请求方式

四、Vue相关面试题答案

Vue、微信小程序、Uniapp面试题答案整理