Vue项目中的常用优化

124 阅读2分钟

Vue优化

1.使用v-show复用组件

2.避免v-if和v-for一起使用

如果这两个混合使用就会造成性能上的浪费

3.keep-alive缓存组件

状态不需要更新的组件可以使用keep-alive缓存起来

4.长列表优化

在Vue中如果我们的数据只是为了展示,我们可以使用Object.freeze将数据冻结,这样Vue就不会对数据进行劫持,加载速度会更快。

5.路由懒加载

在路由表中进行路由懒加载的配置 image.png

6.图片懒加载

7.第三方插件按需导入

像element-ui、Vant、ant-design这些组件库,如果不需要用到很多组件可以进行按需导入,没必要全量导入组件

8.事件销毁

在页面销毁的时候在destroyed或者beforeDestroy中,对事件或者定时器进行销毁

9.SSR服务端渲染

ssr服务器渲染(server side render)

客户端渲染

  1. Vue.js构建的应用程序,默认情况下是有一个html模板页,然后通过webpack打包生成一堆js、css等等资源文件。然后塞到index.html中
  2. 用户输入url访问页面 -> 先得到一个html模板页 -> 然后通过异步请求服务端数据 -> 得到服务端的数据 -> 渲染成局部页面 -> 用户

服务端渲染

  1. 用户输入url访问页面 -> 服务端接收到请求 -> 将对应请求的数据渲染完一个网页 -> 返回给用户

可以看到服务端渲染比客户端渲染更加节省时间,能够节省白屏时间

10.标记无状态的组件

如果只是展示性的组件,可以使用functional标记为无状态组件

11.子组件分割,比较耗时的组件单独分割出一个新的组件,自己渲染自己的,互不影响

12.需要循环事件绑定的时候,尽可能手动进行事件委托进行处理

根据事件冒泡的原理,可以在其父元素上绑定事件。对事件进行捕捉, 判断target属于那个子元素,然后进行相关操作