前端的兄弟姐妹们五一假期快乐，谁还没在 Vue3 项目上栽过跟头？满心欢喜写好的组件，一到实际场景就频频崩溃，页面加载慢得像蜗牛，操作卡顿到让人想砸电脑。用户疯狂吐槽，领导脸色难看，自己改代码改到怀疑人生！别以为这是个例，不少人在复杂表单、大数据列表这些场景下，都被 Vue3 的性能问题折磨得苦不堪言。别急，今天分享 7 个超硬核的实战技巧，实测能让组件性能暴涨 400%，轻松解决你的 “心腹大患”！

最近摄影入魔，已经很久没有在园里写技术博文了。想想玩是不能玩物丧志，误了正业。在此分享之前在项目重构时遇到的一个技术小矛盾，希望对大家遇到类似问题时有所帮助。

lazyload

相信大家对“懒加载”都非常熟悉了，比如微信文章里的图片、电商网站的产品详情图等等。而懒加载，用得最多的插件就莫过于 jquery.lazyload.js 了，示例如下

<img src="__PIMG__/loading.gif" data-original="__IMG__/1.jpg"  />
<script src="__PJS__/jquery.lazyload.js"></script>
<script>
$("img").lazyload({effect:"fadeIn"});
</script>

使用vanilla-lazyload实现懒加载

给主题配置一个全新的lazyload库，来自

介绍

vue-lazyload是一个基于Vue的延迟加载插件，用于延迟加载Vue组件或者图像。

Github