vue性能优化方法## 1.代码复用性 ### css 样式复用率越高越好，可以定义一个global.css来定义公共样

1.代码复用性

css

样式复用率越高越好，可以定义一个global.css来定义公共样式,scss可以定义变量复用。但是有一些组件的单独公共css可以不用写在global.css中,因为不确定用户会不打开此页面,可以跟随该组件一起加载,缓解首屏加载压力。

组件

最能体现“懒”的地方。尽可能地提高复用率，尽量写成子组件复用在多个页面。

2.router路由懒加载

采用按需加载的方式引入组件,缓解首屏加载时间

export function creatRouter() {
  return new Router({
    mode: 'history',
    routes: [
      {
        path: '/',
        name: 'HelloWorld',
        component: Hello
      }, {
        path: '/test',
        name: 'test',
        component: () => import('@/view/test')
      }
    ]
  })
}

3.v-for

使用v-for循环时使用 :key=""

设置key可以标志DOM的唯一标识

当数组发生增删时，默认需要把发生改动的项目全部进行重绘 --- 浪费资源；当添加唯一标识之后，一旦发生增删操作之后，重绘之前会检测新绘制的元素和已有的元素是否存在相同的 key ，相同则复用 --- 不浪费性能

v-for="item in 6" :key="item"

4.防止内存泄漏

在mounted/created 钩子中绑定了DOM/BOM 对象中的事件，需要清理dom上绑定的事件监听，同时将引用的dom设置为null；
执行结束后清理定时器或者非必要不用定时器，可以使用nextTick代替；
使用了事件监听 $on，需要在beforeDestroy 中做对应解绑($ off)处理
变量先申明后使用，闭包执行完成后，将引用的局部变量赋值为null；
使用了第三方库初始化，需要在beforeDestroy 中做对应解绑处理；eg: this.map.remove()
尽量使用原型对象去定义函数，

mounted () {
  	//监听鼠标滚动事件
      window.addEventListener('scroll', this.watchScroll)
  },
  beforeDestroy () {
    window.removeEventListener("scroll", this.watchScroll)true)
  }

5.使用 keep-alive

当使用router-view切换组件时都会创建销毁组件，但是用keep-alive包裹起来后可缓存组件，大大提高加载效率

6.打包优化

修改vue.config.js中的配置项，把productionSourceMap设置为false，不然最终打包过后会生成一些map文件，如果不关掉，生成环境是可以通过map去查看源码的，并且可以开启gzip压缩，使打包过后体积变小。这是项目打包上线阶段。

productionSourceMap: false,
productionGzip: false

7.使用CDN方式引入资源

可以在index.html引入router,axios,vue,elementUI等文件，

Vue 项目*打包后的 vendor.js 过大，将导致打包速度慢，首屏加载慢。其原因是第三方库比如（vue、vue-router、vuex、axios等）都会被打包到 vendor.js 文件里面，而浏览器是在加载该文件之后，才开始显示首屏的。
CDN优化是指，把第三方库比如（vue、vue-router、vuex、axios等）通过cdn的方式引入到项目中。这样浏览器可以开启多个线程，将vendor.js、外部js、css等加载下来(bootcdn等资源，或其他服务器资源)，使得vendor.js文件减少，从而提升首屏加载速度。

8.减少图片的使用

网站加载图片会占用一部分资源，影响加载速度，所以减少使用图片或者使用雪碧图。

9.使用动画时可以用CSS启动硬件加速

CSS animations, transforms 以及 transitions 不会自动开启GPU加速，而是由浏览器的缓慢的软件渲染引擎来执行,那我们怎样才可以切换到GPU模式呢，很多浏览器提供了某些触发的CSS规则，可以用transform: translateZ(0); 来开启硬件加速，transform: translate3d(0, 0, 0)也可以。

10.图片延迟加载

//在图片标签中加入
async
defer

11.使用Object.freeze()

//Object.freeze() 
//方法可以冻结一个对象,vue就不会再劫持该数据进而更新
//应用场景：只需要展示的页面
this.users = Object.freeze(users);

12.prefetch预渲染组件

prefetch是一种利用浏览器的空闲时间加载页面将来可能用到的资源的一种机制；
通常可以用于加载非首页的其他页面所需要的资源，以便加快后续页面的首屏速度；
components: {
    MoealView: () => import(/* webpackPrefetch: true */ '@/view/ModalView.vue')
}

13.优化三方库依赖

一般我们在项目中都会用到一些三方的依赖库，比如lodash

如果我们全量的引入的话会很大，但我们可能只用到一两个函数，我们只需要引用我们需要的就好

import isEmpty from 'lodash/isEmpty'

14.图片资源压缩上传到服务器来请求

如果放到原项目里图片不会被压缩，影响加载速度

15.只渲染可视化内容插件

vue-virtual-scroller

16.正确使用watch和computed

watch

监听数据后，每一次获取该数据都会调用监听的函数，不会缓存，更适用与异步加载数据等

computed

第一次获取数据后会缓存这个计算后的值，如果依赖的数据不变就不会重新计算

所以在开销较大或者异步处理数据时应该使用watch,频繁获取数据依赖原数据时应该使用computed

17.组件懒加载

有一些组件在页面上是需要触发才显示出来比如弹出框,但是这些组件有时根本用不到,但是首屏加载的时候也会跟着父组件被一起加载,这时候就可以用到组件懒加载。

<script> 
const treeDlg = () => import('@/components/treeDlg'); 
export default { 
    name: 'tree', 
    components: { treeDlg } 
} 
</script>

持续更新------