关于前端:Vue20-性能优化方案总结

随着互联网的倒退，越来越多的公司都在应用 Vue 然而随着我的项目的越来越大，不免的会带来一系列的性能问题，笔者也为了这些问题而感到头疼，也同样的针对 Vue 的性能优化进行学习，已便在我的项目之出把性能问题躲避掉，防止没有必要的返工。

为了不便当前可能疾速的找到相干学习内容，在这里做一下记录，不便当前查看，同时也想把这些内容总结一下心愿可能帮忙更多的小伙伴一起学习，一起成长。Fighting~

这个时候可能会有很多小伙伴说，当初 Vue3.0 都快公布了为什么还要优化 2.0 的我的项目？因为公司 80% 的我的项目全是 Vue2.0 的我的项目，迁徙的话老本太高，所以只能进行性能的优化调整。废话就不多赘述了，间接开始吧。

活用异步组件

Vue-cli打包的时候会把所有依赖的文件打包成一个很大的一个 js 文件中，当用户浏览网页的时候须要把整个 js 文件拉取过去，这样会导致页面在初始化的时候，页面会呈现长时间的白屏状况，这个问题的确是蛮辣手的。

构想一下如果在页面中有很多的性能点，每个性能点又对应着不同的性能弹窗或者表单，首先第一点页面中的性能很多，咱们不晓得用户想要应用哪个性能，须要弹出哪个弹窗或表单，如果异步组件的状况，Vue-cli在打包的时候会把异步组件独自打包成一个文件，当用户应用的才会去加载这个 js 文件内容，这样无论是首屏的渲染起到了肯定的优化的作用。

看下官网对于异步组件的阐明：

在大型利用中，咱们可能须要将利用宰割成小一些的代码块，并且只在须要的时候才从服务器加载一个模块。为了简化，Vue容许你以一个工厂函数的形式定义你的组件，这个工厂函数会异步解析你的组件定义。Vue 只有在这个组件须要被渲染的时候才会触发该工厂函数，且会把后果缓存起来供将来重渲染。

//  代码截取自 Vue 官网
Vue.component('async-webpack-example',
  () => import('./my-async-component')
)

Vue官网为了解决组件加载时的期待过长，提供了异步组件加载 Loading 的异步组件：

//  代码截取自 Vue 官网
const AsyncComponent = () => ({// 须要加载的组件 (应该是一个 `Promise` 对象)
  component: import('./MyComponent.vue'),
  // 异步组件加载时应用的组件
  loading: LoadingComponent,
  // 加载失败时应用的组件
  error: ErrorComponent,
  // 展现加载时组件的延时工夫。默认值是 200 (毫秒)
  delay: 200,
  // 如果提供了超时工夫且组件加载也超时了，// 则应用加载失败时应用的组件。默认值是：`Infinity`
  timeout: 3000
})

应用异步组件须要留神以下几点：

如果只是须要异步的加载一些组件，先加载一部分，再加载一部分，那么就能够间接应用 Vue 官网的那种写法间接应用 setTimeOut 也不是未尝不可的。
如果是点击加载的话，肯定要写 v-if，不然会报错，说test 组件未注册。v-if是惰性的，只有当第一次值为 true 时才会开始初始化。

初始化缩小 DOM 的渲染

依然时下面所说的状况，页面中性能点很多，然而又很多弹窗什么的，其实对于这些弹窗最开始的时候思考所有的弹窗只应用一个弹窗，为了节约页面初始化的渲染，然而在理论开发过程中，尽管解决了一部分问题，好像在开发过程中并不是那么乐观，在弹窗外部呈现了大量的 v-if 和v-show对于保护来说太难了。

也有想过应用 <component/> 组件，然而一个 <component/> 所接受的压力可想而知不是一点半点的。然而这个问题任然是存在的须要失去解决。没有方法的状况下，最初应用了两个 flag 去管制弹窗的显示与暗藏。

<template>
    <div>
        <el-dialog title="提醒"
                   v-if="isRenderDialog"
                   :visible.sync="isShowDialog"></el-dialog>
        <el-button @click="onShowDialog">Render Dialog</el-button>
    </div>
</template>

<script>
export default {data:() => ({
        isRenderDialog:false,
        isShowDialog:false
    }),
    methods: {onShowDialog(){!this.isRenderDialog && (this.isRenderDialog = true);
            this.$nextTick(() => {this.isShowDialog = true;})
        }
    }
}
</script>

上述代码中应用两个 flag 值管制 Dialog 一个是管制 Dialog 的渲染，一个管制 Dialog 的显示，当用户首次进入页面的时候则 dialog 元素不会被渲染，当用户点击按钮，对应的 Dialog 才会被渲染进去，当 Dialog 的DOM渲染实现应用在应用显示Dialog。

注：在 $nextTick 中显示 dialog 是为了保障 dialog 的动画成果，如果不应用 $nextTick 则dialog就会很僵硬的呈现。

组件外部申请数据

大家在做业务的时候，可能会有这种状况，当点击按钮之后，须要获取到该条数据的详情渲染到弹窗或者侧滑中，这种状况肯定不在少数啦。笔者在开始做这个的时候就是，在点击的时候间接去获取点击的元素的详情数据，当数据返回之后把数据放到 data 中缓存，之后再传到组件中。

这样做不是不可行的，也是能够的，这样就会面临一个问题，第一点就是当弹窗中的渲染的元素过多的状况下，侧滑或者弹窗的动画成果会很卡，有的时候甚至是不动，霎时就隐没了。

最初通过重复的试验，把数据放到弹窗外部组件中去申请，保障弹窗或者侧滑呈现的时候内置元素较少，当数据没有申请回来之前须要把弹框组件内的所有元素暗藏，应用 loading 代替，当弹窗或者侧滑敞开的应用须要把显示的组件销毁掉，保障外面的数据所占用的内存被开释，这样对于整体优化还是有一些帮忙的。

tamplate 少计算

因为业务状况的复杂程度，难免会某一个中央增加各种条件的渲染，例如：v-if="isHide && selectList.length && (isA || isB)"，这里也只是举一个简略的栗子可能在理论的开发过程中的状况远比这个要简单的多，这种表达式看上去尽管说是能够保护的，然而长此以往上来就会裸露问题，这样做是很不利于保护的。

对于这种状况能够适当的应用 methods 或computed封装成办法，其实这样做的益处是方柏霓咱们判断雷同的表达式，如果其余的元素也有相似的需要能够间接应用这个办法。

v-for && v-bind:key

在应用 v-for 循环过程中，应用 :key="item.id" 这样的代码对于代码的性能是很不敌对的，因为当 data 数据更新的时候，新的状态值会和旧的状态值做比照，Vue在多 diff 算法的时候可能更快的定位到虚构 DOM 的元素上。

其实说到这里就须要阐明以下 key 在vue中到底起到一个什么样的作用，key属性其实是 vue 的一个优化，上文也说了就是为了更精准高效的定位到虚构 DOM，相当于应用key 给数组中某个估算绑定到了一起，如果那个 key 对应的数据产生了变动，间接更新对应的 DOM 就能够了。

对于简短的 for 来说能够间接应用 index 作为 key 然而，如果大型列表的话最好还是不要应用 index 作为 key 了。举个栗子，例如数组删除了一个元素，那么这个元素前方元素的下标全都前移了一位，之前 key 对应的数据和 dom 就会乱了，除非从新匹配 key，那就容易产生谬误。如果从新匹配key，等于全副从新渲染一遍，违反了应用key 来优化更新 dom 的初衷。然而如果对于 Vue 玩的很透的同学来说能够能够疏忽这一条。

Object.freeze

如果对 Vue 有肯定理解的小伙伴都晓得 Vue 是通过 Object.defineProperty 对数据进行挟持，来最终实现视图响应数据的变动，然而在理论的开发过程中，页面中有一部分可能不须要进行双向绑定，只是做单纯的渲染，数据一旦绑定之后不须要再做出任何扭转的时候能够应用 Object.freeze 对数据做解绑。

先介绍以下 Object.freeze 内置函数，用于对接对象，解冻后的对象不会在被批改, 不能对这个对象进行增加新属性, 不能删除已有属性, 不能批改该对象已有属性的可枚举性, 可配置性, 可写性. 此外解冻一个对象后该对象的原型也不能进行批改。

当数据量大的时候，这可能很显著的缩小组件初始化的工夫，这里有一个须要留神的点就是一旦被解冻的对象就再也不能被批改了。然而这里有一个问题须要留神的是，嗒嗒嗒，敲黑板！敲黑板！敲黑板！

尽管 Object.freeze 在肯定水平上可能帮忙咱们晋升一部分的数据性能，然而在应用的时候依然须要审慎应用。防止造成数据无奈响应的问题。如果应用 Object.freeze 这个属性再次给其对象属性赋值时，则会抛出谬误 不能调配给对象的只读属性 *。

用这种办法去晋升性能如果数据量小的状况是无奈感觉进去的。只有数据量大的时候，才会感觉到数据的显著变动。

渲染前解决

在渲染数据的时候，后端所返回的数据和 UI 设计图中所须要的数据格式不统一，比方：列表中须要展现一个工夫，然而后端返回的是一个工夫戳，那么前端就须要对这部分数据进行解决。一般来说解决这种状况有一些方法，应用函数，应用filter，还有就是在渲染之前把数据处理好。

笔者这里比拟倡议在渲染之前把所有的数据处理好，为什么？数据渲染之后实现之后才会去执行外面的函数或者是过滤器，这样会给页面渲染造成很显著的额定的累赘。如果对 Vue3.0 理解的同学能够晓得，在 Vue3.0 中曾经把 filter 这个性能曾经去掉了，举荐应用 computed 来实现雷同雷同的成果。

猜想内容：可能尤大大也发现了 filter 给页面渲染带来的额定的累赘，并没有对页面的性能晋升起到很大的作用。

functional

不是很多函数组件都须要办法，Vue中为了示意一个模板应该被编译成一个性能组件，在模板中增加了 functional 属性。如果我的项目中的所应用的组件不是有状态的组件，那么就能够应用 functional 属性把这个组件抓换成性能组件。

性能组件（不要与 Vue 的 render 函数混同）是一个不蕴含状态和实例的组件。性能组件是一个没有状态或实例的组件。因为性能组件没有状态，因为不须要为 Vue 的数据响应之类的货色做初始化动作。性能组件依然会像出入的 props 一样对数据更新做出响应，然而性能组件的本身，因为它不保护本人的状态，同时也因而无奈晓得本人的数据是否曾经产生了扭转。在大型项目中应用性能组件当前，在对于 DOM 渲染有重大的改良。

因为性能组件没有状态，因而不须要为 Vue 的反馈零碎之类的货色进行额定的初始化。性能组件依然会像传入的新道具那样对更改做出反馈，然而在组件自身内，因为它不保护本人的状态，因而无奈晓得何时数据已更改。

在许多状况下，性能组件可能不适合。毕竟，应用 JavaScript 框架的目标是构建更具反馈性的应用程序。在 Vue 中，如果没有适当的反馈零碎，则无奈执行此操作。

假如咱们的组件承受一个 prop.user，该对象是带有firstName 和的对象 lastName，并且咱们想要出现一个显示用户全名的模板。在性能<template> 组件中，咱们能够通过在组件定义上提供一个办法，而后应用 $optionsVue 提供的属性来拜访咱们的非凡办法来做到这一点：

<template functional>
    <div>{{$options.userFullName(props.user) }}</div>
</template>
<script>
export default {
    props: {user: Object},
    userFullName(user) {return `${user.firstName} ${user.lastName}`
    }
}
</script>

子组件中解决业务

页面中也会有很多的列表，列表中也会有各种各样的简单的状况，这个时候能够把一些比拟沉重的业务解决寄存到其子组件中。

代码比照：

<template>
  <div :style="{opacity: number / 300}">
    <div>{{heavy() }}</div>
  </div>
</template>

<script>
export default {props: ['number'],
  methods: {heavy () {
      const n = 100000
      let result = 0
      for (let i = 0; i < n; i++) {result += Math.sqrt(Math.cos(Math.sin(42)))
      }
      return result
    },
  },
}
</script>

优化后:

<template>
  <div :style="{opacity: number / 300}">
    <ChildComp/>
  </div>
</template>

<script>
export default {props: ['number'],
  components: {
    ChildComp: {
      methods: {heavy () {/* 长工作在子组件里。*/}
      },
      render (h) {return h('div', this.heavy())
      }
    }
  }
}
</script>

当组件随着 props:number 的变动，组件 patch 从新渲染的时候，heavy长工作也会从新执行。然而如果能将没有与父组件相互依赖的元素，拆成一个组件，在父组件须要从新渲染的时候，因为与父组件没有依赖子组件并不会跟着从新渲染，响应的性能也能失去晋升。

部分作用域

开发过程中会常常应用到一些计算属性或者 Util 函数，如果咱们在循环过程中，一直的应用 this.*** 去调用一个计算属性的时候，每次调用这个值计算属性都会计算一次，然而这个值确是一个固定不变的值，就造成了很大的性能的节约。

如果当咱们应用这些属性的时候，最好的形式是把对应的值取出来，而后再去应用。

<template>
  <div :style="{opacity: start / 300}">{{result}}</div>
</template>
<script>
export default {props: ['start'],
  computed: {base () {return 42},
    result ({base, start}) {
      let result = start
      for (let i = 0; i < 1000; i++) {result += Math.sqrt(Math.cos(Math.sin(base))) + base * base + base + base * 2 + base * 3
      }
      return result
    },
  },
}
</script>

总结

以上是我通过考察材料以及集体我的项目中的一些小教训得出的对于 Vue 性能优化的一些计划，可能文章中一些见解存在一些问题，欢送大家在评论区指出，大家一起学习，一起提高。

关于前端:Vue20-性能优化方案总结

Just My Socks（注册教程 内含优惠码）

Just My Socks（注册教程内含优惠码）