vue-性能优化

1.路由懒加载

懒加载简单来说就是延迟加载或按需加载，即在需要的时候的时候进行加载

常用的懒加载方式有两种：即使用vue异步组件 和 ES中的import

vue异步组件

 {
      path: "/login",
      name: "Login",
      meta: { title: "登录" },
      component: resolve => require(["@/views/Login"], resolve)
    },

　

ES中的import

const router = new VueRouter({
  routes: [
    { path: '/foo', component: () => import('./Foo.vue') }
  ]
})

　　　

2.keep-alive缓存页面

<template>

  <div id="app">

    <keep-alive>

      <router-view/>

    </keep-alive>

  </div>

</template>

　　

3.使用v-show复用DOM

4.v-for 遍历避免同时使用 v-if

v-for比v-if优先，如果每一次都需要遍历整个数组，将会影响速度，尤其是当之需要渲染很小一部分的时候。如果连用的话会把 v-if 给每个元素都添加一下,会造成性能问题。一般时候把v-if放在外层，如果不符合就不去执行了。

5.长列表性能优化

我们应该都知道 vue 会通过 object.defineProperty 对数据进行劫持，来实现视图响应数据的变化，然而有些时候我们的组件就是纯粹的数据展示，不会有任何改变，我们就不需要 vue 来劫持我们的数据，在大量数据展示的情况下，这能够很明显的减少组件初始化的时间。

所以，我们可以通过 object.freeze 方法来冻结一个对象，这个对象一旦被冻结，vue就不会对数据进行劫持了。

export default {
  data: () => ({
    list: []
  }),
  async created() {
    const list = await axios.get('xxxx')
    this.list = Object.freeze(list)
  },
  methods: {
    // 此处做的操作都不能改变list的值
  }

　　

另外需要说明的是，这里只是冻结了 list 的值，引用不会被冻结，当我们需要 reactive 数据的时候，我们可以重新给 list 赋值。

6.图片懒加载

对于图片过多的页面，为了加速页面加载速度。所以很多时候我们需要将页面内未出现在可视区域内的图片先不做加载， 等到滚动到可视区域后再去加载

vue-lazyload

main.js

import Vue from 'vue'
import App from './App.vue'
import VueLazyload from 'vue-lazyload'
 
Vue.use(VueLazyload)
 
// or with options
Vue.use(VueLazyload, {
  preLoad: 1.3,
  error: 'dist/error.png',
  loading: 'dist/loading.gif',
  attempt: 1
})
 
new Vue({
  el: 'body',
  components: {
    App
  }
})

　　

template：

<ul>
  <li v-for="img in list">
    <img v-lazy="img.src" >
  </li>
</ul>

　　

7.第三方插件按需引入

像element-ui这样的第三方组件库可以按需引入，避免体积太大

import Vue from 'vue';
 
import { Button, Select } from 'element-ui';

 Vue.use(Button)

 Vue.use(Select)

　　

8.无状态的组件标记为函数式组件

Vue 中的无状态组件其实就是函数组件。但函数组件又是啥呢? 要回答这个问题，咱们首先必须理解什么是函数式编程。

与将程序分解为对象的面向对象方法不同，函数式编程鼓励将程序分解为小函数，这些小函数用于形成更高级的程序。我们创建的函数不依赖于或可以改变任何外部状态，这导致另一个观察结果，对于给定的输入，它们总是返回相同的输出。

因此，函数组件是没有状态的组件，并且可以更改它。函数组件输出总是基于给定的输入。在 Vue 方面，这类组件会根据给定的props给出不同的输出。

Vue 提供了一种定义函数组件的简单方法。咱们只需要给个 functional 关键字就可以。在 2.5.0 及以上版本中，如果使用了单文件组件，那么基于模板的函数式组件可以这样声明：

<template functional>
  <div> 函数/无状态组件 </div>
</template>

　　

9.变量本地化

不要频繁引用this.data ,使用const  data = this.data 代替

10.事件的销毁

Vue 组件销毁时，会自动解绑它的全部指令及事件监听器，但是仅限于组件本身的事件

组件销毁时，注意清除定时器

created() {
  this.timer = setInterval(this.refresh, 2000)
},
beforeDestroy() {
  clearInterval(this.timer)
}

　　

11.服务端渲染 - SSR