如何聊项目 LLM对话平台(vue3+vite+Pinia)聊项目的深入浅出
如何聊项目从 what why how 加上对比 ,从背景是what,为何用到这个技术why到怎么样运用这个技术到项目中how,然后再对比,按照项目所需要的背场景题和八股
what?
从项目背景出发:为了解决什么问题?面向用户群体?以及核心功能?可以答:比如说原生命令行交互门槛高,普通用户难以直接使用之类的巴拉巴拉,需要快速集成AI能力到应用中,但缺乏低代码交互界面之类的巴拉巴拉。频繁与AI对话,需要历史记录回溯、多轮交互支持之类的巴拉巴拉。(点回到了怎么样去做低代码交互界面,记录回溯、多轮交互支持)。
低代码交互界面通过Vue3+Vite实现高性能交互界面。
封装 :
浅一点:
1、API 请求的封装 使用 Axios + TypeScript或者是在组件中使用
2、状态管理的封装 使用 Pinia 状态管理库或者是在组件中使用
3、组件的封装 通过props和事件实现父子组件通信
深入一点:
按需加载与动态组件:(面试官可能会问按需加载和预加载哪种方案更优?)
按需加载:
why ?减少首屏加载时间,优化打包体积,提升用户体验。
how?Vue3 的动态组件,路由懒加载,第三方库按需引入
动态组件:
why?1、灵活性:根据不同条件渲染不同组件(如聊天消息类型、用户权限)
2、 复用性:避免重复代码,通过参数化控制组件行为。
3、 性能优化:配合 keep-alive缓存组件状态,避免重复渲染
how? 1、vue 的 <component :is="...">:动态绑定组件名称或实例。
2、 结合 v-if/v-else:根据条件切换组件。
3、状态管理:通过 Vuex/Pinia 管理当前激活的组件状态。
对比: 如果用预加载的话,会增加初始负载,有首屏卡顿风险和资源浪费还有实时性的冲突。预加载更适用于高频操作的内容和关键路径资源还有网络优化。后期考虑按需加载和预加载混合策略,在用户浏览历史记录时,预加载后续少量消息之类的巴拉巴拉。
性能优化:
虚拟滚动:
why? 1、避免渲染全部 DOM 节点
2、提升滚动流畅度
how? 1、使用 vue-virtual-scroller插件,结合固定高度的列表项
2、通过 windowing技术动态计算可视区域。
防抖:
why?1、减少无效请求,用户在输入框中连续输入时,每按一次键都会触发一次 API 请求,导致大量冗余请求
2、优化性能,免因频繁调用后端接口而消耗带宽和服务器资源
3、提升用户体验,用户可能输入较长的句子,无需为中间状态频繁加载数据
how? 1、使用 Lodash 的 debounce函数
2、在组件中应用防抖
对比: 但是(话说回来)防抖也有局限性,用户可能在停止输入后快速提交,但防抖可能导致最后一次请求被忽略。后期考虑用结合节流,在单位时间内至少发送一次请求之类的巴拉巴拉。


大概按照这个思路聊,引导面试官提问你问题 有啥需要补充面试技巧的,欢迎在评论区指出
#面试##八股##场景题#
what?
从项目背景出发:为了解决什么问题?面向用户群体?以及核心功能?可以答:比如说原生命令行交互门槛高,普通用户难以直接使用之类的巴拉巴拉,需要快速集成AI能力到应用中,但缺乏低代码交互界面之类的巴拉巴拉。频繁与AI对话,需要历史记录回溯、多轮交互支持之类的巴拉巴拉。(点回到了怎么样去做低代码交互界面,记录回溯、多轮交互支持)。
低代码交互界面通过Vue3+Vite实现高性能交互界面。
封装 :
浅一点:
1、API 请求的封装 使用 Axios + TypeScript或者是在组件中使用
2、状态管理的封装 使用 Pinia 状态管理库或者是在组件中使用
3、组件的封装 通过props和事件实现父子组件通信
深入一点:
按需加载与动态组件:(面试官可能会问按需加载和预加载哪种方案更优?)
按需加载:
why ?减少首屏加载时间,优化打包体积,提升用户体验。
how?Vue3 的动态组件,路由懒加载,第三方库按需引入
动态组件:
why?1、灵活性:根据不同条件渲染不同组件(如聊天消息类型、用户权限)
2、 复用性:避免重复代码,通过参数化控制组件行为。
3、 性能优化:配合 keep-alive缓存组件状态,避免重复渲染
how? 1、vue 的 <component :is="...">:动态绑定组件名称或实例。
2、 结合 v-if/v-else:根据条件切换组件。
3、状态管理:通过 Vuex/Pinia 管理当前激活的组件状态。
对比: 如果用预加载的话,会增加初始负载,有首屏卡顿风险和资源浪费还有实时性的冲突。预加载更适用于高频操作的内容和关键路径资源还有网络优化。后期考虑按需加载和预加载混合策略,在用户浏览历史记录时,预加载后续少量消息之类的巴拉巴拉。
性能优化:
虚拟滚动:
why? 1、避免渲染全部 DOM 节点
2、提升滚动流畅度
how? 1、使用 vue-virtual-scroller插件,结合固定高度的列表项
2、通过 windowing技术动态计算可视区域。
防抖:
why?1、减少无效请求,用户在输入框中连续输入时,每按一次键都会触发一次 API 请求,导致大量冗余请求
2、优化性能,免因频繁调用后端接口而消耗带宽和服务器资源
3、提升用户体验,用户可能输入较长的句子,无需为中间状态频繁加载数据
how? 1、使用 Lodash 的 debounce函数
2、在组件中应用防抖
对比: 但是(话说回来)防抖也有局限性,用户可能在停止输入后快速提交,但防抖可能导致最后一次请求被忽略。后期考虑用结合节流,在单位时间内至少发送一次请求之类的巴拉巴拉。
全部评论
相关推荐
点赞 评论 收藏
分享
点赞 评论 收藏
分享
白色猕猴桃:查了你就说大二是前30%呗,大三忙于工作成绩掉下来了
点赞 评论 收藏
分享
查看2道真题和解析