总结一些Vue的性能优化

前言

你们好啊，我是 _像个男孩❤ 最近公司真的是太闲了，才想着把以前总结的整理成流水帐，没事的时候康一康，都是平时写项目的一些小经验还有从各位大佬那里偷学来的，废话很少，开始个人表演~~

代码优化

1. 模块化、组件化

• 组件是把经常使用的东西封装起来，最重要的就是复用。
• 模块是把同一功能或业务的代码进行分离，下降模块间的耦合性，能够独立运行和管理。
• 包括css也能够经过less和sass来减小重复代码。

2. vFor 的 key

在使用v-for渲染元素列表时，为每一项都设置惟一的key值，为了让Vue内部更快的定位到该条数据。

咱们都知道尽可能不要使用index下标做为key值，例如：

let arr = [
 { id: 1, title: 'one' },  { id: 2, title: 'two' },  { id: 3, title: 'three' } ] arr.splice(1, 1) console.log(arr) 复制代码

这时index发生了变化，列表中全部的key值都发生了变化，此时v-for会对key变化的元素从新渲染，但其实除了删除的元素其余都没有发生变化，致使vue用错误的旧子节点，作不少没有必要的工做。因此尽可能不要使用index做key值，使用id等字段更好，也不要用随机数做为key，删掉旧节点，建立新节点，你的老板会被气嗝屁。

3. vFor 和 vIf

官方都告诉咱们啦，当和v-if一块儿使用时，v-for的优先级更高，显然每一次渲染列表时都须要进行一次判断，更好的办法是用computed将不须要的值过滤掉。

还想多巴巴一句的是，v-if是对销毁和重建DOM进行元素的显示和隐藏，有更高的切换消耗，而v-show是经过display的简单操做，初始渲染消耗更高，频繁切换DOM时适用。(发现本身大部分项目都是直接用v-if的)

4. 懒加载

4.1 路由懒加载

能够加快首屏渲染的速度。

{
 path: "/tips",  name: "tips",  component: resolve => require(["@/views/tips"], resolve),  meta: {  title: "路由懒加载"  } } 复制代码

关于首屏优化，过大的项目可能会由于没有加载完出现白屏的状况，能够加个loading加载提示或者启动页。

4.2 图片懒加载

• 大多数框架都有图片懒加载的功能，多多使用。
• 使用Base64加载小图片
• 图标尽量使用svg和字体图标

5. keep-alive缓存

keep-alive是用来缓存组件从而节省性能的抽象组件，被包裹在keep-alive中的组件其状态会被保留，避免从新渲染。

<!-- 和 `<transition>` 一块儿使用 -->
<transition>  <keep-alive>  <component :is="view"></component>  </keep-alive> </transition> 复制代码

利用include、exclude属性，两者均可以用逗号分隔字符串、正则表达式或一个数组来表示。 include属性表示只有name属性为a，b的组件会被缓存，其它组件不会被缓存，exclude属性表示除了name属性为c的组件不会被缓存，其它组件都会被缓存。

<!-- 注意是组件的名字，不是路由的名字 -->
<keep-alive include="a,b">  <router-view></router-view> </keep-alive> <keep-alive exclude="c">  <router-view></router-view> </keep-alive> 复制代码

6. 钩子hook

实不相瞒以前我这只菜狗一直觉得hook是react专属，直到我用了这个回调hook，嗯~真香！

(1) 同一个组件中

mounted() {
 // 在Vue组件中，能够用$on,$once去监听全部的生命周期钩子函数  // 能够经过hook监听组件销毁钩子函数，并取消监听事件  this.$once("hook:beforeDestroy", () => {  // 官方建议咱们 私有property名 以$_开头  window.removeEventListener("resize", this.$_handleListen);  }); }, 复制代码

(2) 父子组件中

<!-- 组件的全部生命周期钩子均可以经过@hook:钩子函数名 来监听触发 -->
<component @hook:updated="$_handleListen" /> 复制代码

平时大多数功能不须要hook也能实现，但当第三方组件库尚未实现@change回调时，hook真的是贼香了！

7. Object.freeze()

若是你有一个超大的Array或Object，而且确信数据不会修改，使用Object.freeze()可让性能大幅提高。

mounted() {
 let arr = [1, 2, 3, 4, 5]  Object.freeze(arr) } 复制代码

当数据是滚动加载时，也是能够用concat添加数据的，合理地使用Object.freeze()能够节省不少渲染性能。

8. watch监听

好比一个列表页，咱们但愿用户在搜索框输入搜索关键字的时候，能够自动触发搜索，能够经过watch监听搜索关键字的变化。

data() {
 return {  serachValue: ''  }; }, watch: {  // 在值发生变化以后，从新加载数据  searchValue: {  // 经过handler来监听属性变化, 初次调用 newValue为""空字符串， oldValue为 undefined  handler(newValue, oldValue) {  if (newValue !== oldValue) {  console.log('作了一些事');  }  },  // 当即触发 如须要初始化加载数据  immediate: true,  // 深度监听 指定deep属性为true, watch会监听对象里面每个值的变化  deep: true  } }, 复制代码

9. 函数式组件

纯展现性的业务组件，只须要将外部传入的数据进行展示，不须要有内部状态，不须要在生命周期钩子函数里面作处理，这时候就能够考虑使用函数式组件。(偷学来的没作过实践，以后再补充吧)

// 因为函数式组件没有建立组件实例，全部传统的经过this来调用的属性，在这里都须要经过context来调用
Vue.component('my-functional-button', {  functional: true,  render: function (createElement, context) {  return createElement('button', context.data, context.children)  } }) 复制代码

项目优化

1. 按需引入

使用UI框架尽可能按需引入，减小多余的开销，合理的及时止损。

2. 使用cdn的方式外部加载一些资源

• 没必要要打包的外部引用模块能够经过cdn引入。
• 还有一些经过cdn加速的大图

3. vue.config.js配置

若是不设置打包会生成一些map文件，生产环境能够经过map去查看源码。

module.exports = {
 productionSourceMap: false, } 复制代码

官方config参考文档

4. 删除多余的代码，减小图片的使用

• 删除一些注释和打印的代码...
• 图片会占很大一部分体积，一些图片效果能够经过css3来实现...

后记

项目优化是十分重要的，每一点小优化都是对本身提高对项目负责，关于项目优化毫不是这么简单，还有不少须要咱们学习的东西，但愿你们多多尝试，一块儿学习呀。

❝

若是以为文章还不错，点个赞给点鼓励被，也但愿你们能在评论指出不足我好及时改正，大佬们有什么好方法也评论出来让我学习学习呀~ (这这这这皮肤也太太太太好看了吧！)

❞

本文使用 mdnice 排版