Vue日常推送学习

如何算是精通Vue

1.懂原理，应对更复杂的项目
2.有全面知识框架，掌握性能优化和ssr->全局api+源码
3.应用多，思考实质性问题

前端自动化部署

Vue项目的基本优化

1.优先使用v-if

• 只有DOM频繁显示隐藏才用v-show，场景少见；
  只在『信息推送优先级』中使用过，项目中一直通过Websocket推的消息，频繁推送不同类型的通知。

2.v-for和v-if不要一起使用

• v-for的优先级高于v-if，列表渲染每一次都要进行一次v-if判断，不合理。
  使用计算属性，先将v-if不需要的值过滤掉。

3.v-for避免使用index作为key标识

原因：插入一条数据，列表中后面的数据的key都会发生变化

4.释放组件资源

5.长列表

• 新手：v-for遍历
• 升级：做一个分页，滚动道底部再去请求api
• 最佳：类似懒加载，减少DOM，有vue-virtual-scroller等库

6.图片的合理优化
懒加载：只有当存在图片的DOM出现在页面时才会进行图片加载。

实践：

• 小图标使用svg或字体图标
• 通过base64和webp加载小型图片
• 能cdn加速就cdn加速
• 大部分框架都带有懒加载图片功能

7.路由按需加载
使得在第一次加载时压力变小，不会出现超长白屏问题
两种懒加载写法

//require
component: resolve=>(require(['@/components/HelloWorld'],resolve))
//import
component: () => import('@/components/HelloWorld')

8.UI框架使用方式
按需加载，使用官方给暴露出的按需加载组件

9.首屏优化
在public下写一个加载动画放在index.html中