前端培训丁鹿学堂：vue性能优化总结（二）

在函数中，变量本地化

其实就是在vue的方法中，如果用到了data中的数据，合适的情况下，先用本地变量保存，操作处理数据以后，直接return返回出去。
原理是，每次访问 this.xx 的时候，由于是响应式对象，所以每次都会触发 getter，然后执行依赖收集的相关代码，如果使用变量次数越多，性能就会变差。
示例代码：

export default {
  data(){
    return {
      num:10
    }
  },
  methods:{
    add(){
      let number = this.number // 保存起来    
      for (let i = 0; i < 500; i++) {   
        number += i // 避免频繁引用this.xx   
      }   
      return number 
    }
  }
};
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

按需引入第三方插件

比如 Element-UI ，vantUI这样的第三方组件库可以按需引入避免体积太大。

路由使用懒加载

这个属于首屏优化的部分。 Vue 是单页面应用，所以如果没有使用懒加载的话，就会导致进入首页时需要加载的内容过多，时间过长，就会出现长时间的白屏，很不利于用户体验，SEO 也不友好
所以可以去用懒加载将页面进行划分，需要的时候才加载对应的页面，以分担首页的加载压力，减少首页加载时间。

const router = new VueRouter({
  routes: [ 
     { path: '/home', component: () => 
    import('@/components/Home') }, 
  ]
})
1
2
3
4
5
6
7

在进入这个路由的时候才会走对应的 component，然后运行 import 编译加载组件

使用keep-alive缓存组件

常见的应用场景是：用户填写表单，输入页面进入下一步后，再返回上一步到表单页时要保留表单输入的内容。
我们都可以通过内置组件 来把组件缓存起来，在组件切换的时候不进行卸载，这样当再次返回的时候，就能从缓存中快速渲染，而不是重新渲染，以节省性能。另外对用户体验也非常友好。
代码示例：

1
2
3
4
5
6
7

注意点:

1. 可以在路由配置的页面指定是否缓存该路由对应的页面组件。
2. 可以通过两个生命周期 activated/deactivated 来获取当前组件状态。

小结：

其实在vue开发过程中还有很多的性能优化技巧，比如图片懒加载，无状态的组件通过函数式去书写。但是常见的，比较适合新手的一些性能优化技巧就是上面的内容。
希望大家在开发 过程中有意识的去使用这些技巧，让自己的代码越来越完美。