1、代码层面的优化使用 v-if 与 v-show 减少初始化渲染和切换渲染的性能开销；（v-if其实是重复的销毁与创建，v-show只是基于简单的CSS进行切换）v-for 加上 key提高 Diff 算法的速度；图片的大小优化以及懒加载（vue-lazyload）；
不同格式的图片对比
转载
2023-06-27 21:14:38
70阅读
优势： 1.Vue两大特点：响应式编程、组件化 2.Vue的优势：轻量级框架、简单易学、双向数据绑定、组件化、数据和结构的分离、虚拟DOM、运行速度快 3.Vue是单页面应用，使页面局部刷新，不用每次跳转页面都要请求所有数据和DOM，这样大大加快了访问速度和提升用户体验。而且他的第三方ui库很多节省开发时间。缺点： 1.Vue不缺入门教程，可是缺乏高
转载
2023-07-21 12:38:30
87阅读
最近用 vue-cli 3.0 开发的移动端项目在最近两年新出的安卓手机上没问题，在三四年前的旧手机上出现白屏问题。分析一下应该是安卓系统版本的原因，目前已知的是Android 6.0 以上都 OK，6.0 以下就不行了。同时，页面在IOS10左右的版本中，也会显示异常低版本安卓系统内置的 webview 不支持 ES6 语法等一些新特性，所以报错。但在手机上调试不方便，受一篇文章的启发
转载
2023-07-31 14:18:05
561阅读
开场白： 个人认为性能优化可以从三个方面来进行： 代码层面的优化 项目大包的优化 项目部署的优化 1. 优化循环 大多数循环使用一个从0开始、增加到某个特定的迭代器。在很多情况下，从最大值开始在循环中不断减值的迭代器更加高效。使用后测试循环——最常用for循环和while循环都是前测试循环，do-w ...
转载
2021-10-21 16:10:00
294阅读
2评论
标记组件为 functional，这意味它是无状态 (没有响应式数据)，无实例 (没有 this 上下文)。
原创
2022-11-23 00:07:24
71阅读
(目录)
Vue性能优化的必要性：
Vue框架通过双向数据绑定和虚拟DOM技术，帮我们处理了前端开发中最脏最累的DOM操作部分，其本身的性能已经非常强大了，但是在一个Vue项目中还是有一定的优化空间的，性能优化可以使整个网站的访问速度更快，运行更加流程，资源占用消耗更少，降低后续运营成本，所以Vue性能优化还是很有必要的。
Vue项目优化工具
webpack-bundle-analyzer
官
原创
2023-07-25 17:24:32
97阅读
在 beforeDestory 生命周期中执行，避免内存泄露，页面会越来越卡，最终卡死。
原创
2024-04-25 10:16:56
0阅读
前言一般来说，你不需要太关心vue的运行时性能，它在运行时非常快，但付出的代价是初始化时相对较慢。在最近开发的一个Hybrid APP里，Android Webview初始化一个较重的vue页面竟然用了1200ms ~ 1400ms，这让我开始重视vue的初始化性能
转载
2023-05-10 19:31:36
73阅读
编码优化：事件代理keep-alive拆分组件key 保证唯一性路由懒加载、异步组件防抖节流Vue 加载性能优化第三方模块按需导入（ babel-plugin-component ）图片懒加载用户体验app-skeleton 骨架屏shellap p 壳pwaSEO 优化预渲染
原创
2022-03-25 10:31:25
183阅读
最近用Vuejs重构了公司的一个项目，项目是个Web的素材管理系统，相当于Web版windows的资源管理器，遇到了不少性能的瓶颈，优化过程中积累了一些经验，特记录下来以供各位园友参考： 1. 慎用deep watch： 第一次遇到性能问题是文件夹数据量稍大时，操作素材会感觉到明显的延迟和卡顿，通过chrome的performance分析发现是使用watch时，配置了deep等于true，由
转载
2024-04-01 13:32:27
40阅读
Vue 框架通过数据双向绑定和虚拟 DOM 技术，帮我们处理了前端开发中最脏最累的 DOM 操作部分， 我们不再需要去考虑如何操作 DOM 以及如何最高效地操作 DOM；但 Vue 项目中仍然存在项目首屏优化、Webpack 编译配置优化等问题，所以我们仍然需要去关注 Vue 项目性能方面的优化，使项目具有更高效的性能、更好的用户体验。接下来我们提供一些 vue 性能优化的方法。&nb
转载
2023-07-05 09:10:55
108阅读
我们在浏览网站的时候，不可避免的需要消耗自身计算机资源，比如带宽、cpu、存储等等，这些资源会随着访问时间的延长而产生一定的数据碎片，在我们没有关闭浏览器的时候，这些碎片会一直存在的，那么作为开发者我们开发的网站是否优质，是否对用户计算机负担小，打开是否未低时延这些就是我们用来衡量网站是否卓越的指标了。vue作为一款很卓越的前端开发框架，开发起来很舒服，那性能怎样呢？这个时候就需要使用性能检测相关
推荐
原创
2022-04-15 00:12:46
4875阅读
点赞
Vue 3 相较于 Vue 2 在底层进行了诸多优化（例如使用了 Proxy 进行响应式系统重构、编译时优化等），但开发者仍需遵循最佳实践才能发挥其最大性能。以下是 Vue 3 性能优化的核心技巧和最佳实践：一、 编译时和渲染优化1\. 使用 v-if 代替 v-show (按需渲染)优化点： 减少初始渲染和内存消耗。做法： 当组件或元素在运行时很少切换或初始状态为隐藏时，使用 v-if。
v-i
Vue常用性能优化 Vue常用的一些优化方式，主要是在构建项目过程需要注意的方面。 编码优化 避免响应所有数据 不要将所有的数据都放到data中，data中的数据都会增加getter和setter，并且会收集watcher，这样还占内存，不需要响应式的数据我们可以直接定义在实例上。 <templat
原创
2022-05-27 19:42:43
333阅读
vue性能优化方法 1、路由懒加载的设置 const Home=()=>import('@/components/Home') 2、keep-alive 缓存页面 对组件进行缓存，从而节省性能。 <keep-alive exclude="Profile,User"> <router-view/> < ...
转载
2021-10-10 01:00:00
143阅读
2评论
Vue 是一款流行的JavaScript框架，用于构建现代化的单页面应用程序（SPA）。然而，在构建大规模应用时
原创
2023-09-24 21:59:51
0阅读
1.<keep-alive></keep-alive>,接收include，exclude，max三个值，可以缓存组件状态，避免组件的重新渲染，exclude的优先级大于include，max为可缓存组件数目的最大值，超过会调用最近最少使用算法2.组件懒加载Vue.component('Home',function(resolve){reuqire(['./home'],resolve)})Vue.component('Home',()=>import('
原创
2021-09-03 13:32:51
163阅读
满怀欣喜的开发vue项目，快要完成的时候，测试人员发现在app中首次加载慢的跟便秘一样，无奈要优化，于是开始各种找办法！
原创
2021-07-29 13:51:45
428阅读
vue调试工具vue-devtools1.作用：可以查看vue组件里面的data里面的变量，methods里面的函数，和一些全局对象 比如说:$refs,$route，可以查看vuex里面的变量及变化。对数据结构进行解析和调试。牛的地方就是可以直接修改 能看到的差不多都能改解决vue-devtools在Chrome中无效问题终极方案
2.使用：直接在Chrome安装拓展程序 网上有的是3.注意
转载
2023-06-25 14:48:14
302阅读
