Vue如何做性能优化？
Vue.js应用的性能优化可以从多个层面进行，以下是一些常见的优化方案：
路由懒加载：通过动态导入（如使用import()）来延迟加载那些非初始页面的组件，直到用户访问这些路由时才加载相应的组件代码，减少首屏加载时间。
使用Keep-Alive缓存组件：对于切换频率高的页面或组件，可以使用标签包裹，这样当组件切换出去时，它的状态会被缓存下来，下次再进入时可以直接复用，避免重新渲染。
优化v-for指令：
避免在v-for内使用v-if进行条件渲染，可以考虑使用计算属性预先过滤数据。 为列表中的每一项元素提供唯一的key属性，帮助Vue更高效地进行DOM diff。 组件拆分与复用：合理拆分组件，减少不必要的渲染，提高代码复用性和可维护性。
使用事件委托：在使用v-for渲染列表时，避免为每个元素单独绑定事件监听器，可以将事件监听器绑定到父元素上并通过事件冒泡来处理，减少事件监听器的数量。
优化计算属性和侦听器：尽量使用计算属性（computed）代替方法（methods），因为计算属性有缓存机制，只有依赖发生变化时才会重新计算。对于需要监听数据变化执行的操作，合理使用watch，注意避免在其中执行耗时操作。
图片懒加载：对于长列表或页面中的大量图片，使用懒加载技术，即在图片进入可视区域时才开始加载，减少初次加载时间。
预渲染和SSR：预渲染（Prerendering）可以在构建时生成静态HTML文件，对于SEO友好且首屏加载快；服务器端渲染（Server-Side Rendering, SSR）可以进一步提升首屏加载速度和SEO。
Bundle优化：通过Webpack配置进行代码分割、压缩、Tree Shaking等，减少最终打包文件的体积。
使用Vue性能分析工具：如Vue DevTools的Performance面板，可以帮助识别性能瓶颈，比如过度渲染、长时间的渲染时间等。
限制监听器数量：避免在data上绑定过多的响应式属性，减少不必要的watcher创建。
长列表性能优化：对于展示大量数据的列表，可以使用虚拟滚动（Virtual Scrolling）技术，只渲染可视区域内的元素，大大减少DOM节点数量。
结合以上方案，可以显著提升Vue应用的性能和用户体验。
微信小程序性能优化方案！
首先在微信小程序官网里明确指出微信小程序如何做性能优化，如下图：
网址（[developers.weixin.qq.com/miniprogram…
下面我列举和总结了官网列举了性能优化方案：
微信小程序的性能优化主要围绕减少启动加载时间、提升页面渲染效率、降低内存占用等方面展开。以下是一些关键的优化策略：
分包加载：利用小程序的分包加载功能，将代码和资源按模块拆分成不同的包，使得首次加载时只下载必要的基础包，其他包按需加载，加快启动速度。
按需引入组件和接口：尽量减少页面初始化时引入的组件和API，对于不立即使用的组件和接口采用动态引入的方式。
优化资源加载：
图片懒加载：只在图片即将进入视口时加载，减少初次加载时间。 资源压缩：对图片、音频、视频等资源进行压缩，减小文件大小。 使用WebP等高效格式：相比JPEG和PNG，WebP格式通常能提供更好的压缩率。 数据预加载：在合适的时机预加载数据，如在页面切换动画期间，减少用户等待时间。
减少网络请求：
合并请求：将多个小请求合并为一个大请求，减少请求次数。 缓存策略：合理使用本地缓存，如wx.setStorageSync，避免重复请求。 优化渲染性能：
减少setData的调用：setData是导致界面更新的核心，频繁调用会阻塞UI线程。尽量批量更新数据，避免不必要的渲染。 使用WXS：WXS（WeiXin Script）是一种运行在客户端的小程序脚本语言，可以减少与逻辑层的数据传输，提升性能。 节流与防抖：在处理滚动、拖动等高频事件时，使用节流和防抖技术减少处理函数执行频率。 内存泄漏检测与处理：
注意清理不再使用的定时器、监听器等资源。 使用小程序的性能监控工具，定期检查内存使用情况，及时发现并修复内存泄漏问题。 避免使用复杂的样式和布局：尽量使用简单的布局结构和CSS样式，避免使用过于复杂的选择器和过多的层级嵌套，减少渲染计算负担。
异步任务和页面卸载处理：确保所有异步操作（如网络请求、setTimeout等）在页面卸载时能够被正确取消，避免内存泄漏和无效操作。
通过上述策略的应用，可以显著提升微信小程序的性能和用户体验。
参考大佬Valyes的文章，感谢Valyes
