随着互联网的发展，越来越多的公司在使用Vue。然而，随着项目的增多，不可避免地会带来一系列的性能问题。笔者也为这些问题头疼，也研究Vue的性能优化，避免性能问题和不必要的返工。

为了以后能快速找到相关的学习内容，我想在这里做个记录，方便以后查阅。同时也想把这些内容总结一下，希望能帮助更多的朋友一起学习，一起成长。打架~

这时候很多朋友可能会说，既然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官方提供了异步组件加载异步组件:

// 代码截取自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出现在太难维护的弹窗内部。

我也想过用

<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>

在上面的代码中，使用了两个标志值来控制对话框，一个是控制对话框的渲染，另一个是控制对话框的显示。当用户第一次进入页面时，不会呈现对话框元素。当用户单击该按钮时，将呈现相应的对话框。当对话框的DOM呈现完成时，对话框显示为正在使用。

注意:对话框显示在$nextTick中，以保证对话框的动画效果。如果不使用$nextTick，对话框会显得生硬。

组件内部请求数据

当你在做生意的时候，这种情况可能会发生。当您单击按钮时，您需要获取这段数据的详细信息，并将其呈现到弹出窗口或sideslip中。这种情况一定很少见。我开始做这个的时候，直接去获取点击时被点击元素的详细数据。当数据返回时，我将数据放入数据缓存，然后将其传递给组件。

这不是不可行，也是可能的，这样就有问题了。第一点是当弹窗元素过多时，侧滑或弹窗的动画效果会被卡住，有时甚至静止不动，瞬间消失。

最后，经过反复实验，将数据放入弹出窗口的内部组件中进行请求，以保证弹出窗口或侧滑出现时内置元素很少。在请求数据之前，弹出框架组件中的所有元素都需要隐藏，并通过加载来替换。当关闭弹窗或侧滑时，需要销毁显示的组件，以保证里面的数据所占用的内存被释放，这对整体优化是有帮助的。

无模板计算

由于业务情况的复杂性，难免会在某处渲染各种条件，例如:v-if = ”伊施德& amp& amp长度和长度。& amp(isA | | isB)”这里只是一个简单的例子。实际开发过程中的情况可能比这复杂得多。虽然这个表达式看起来很容易维护，但是长此以往就会暴露问题，不利于维护。

对于这种情况可以适当的使用methods或computed封装成方法，其实这样做的好处是方柏霓我们判断相同的表达式，如果其他的元素也有类似的需求可以直接使用这个方法。在这种情况下，可以适当地使用方法或computed来封装方法。事实上，这种方法的优点是我们在方柏霓判断同样的表达式。如果其他元素有类似的要求，我们可以直接使用这种方法。

v-for && ampv-bind:键

在使用v-for循环的过程中，使用:key = & # 8221item.id & # 8221这种代码对代码的性能非常不友好，因为当数据更新时，新的状态值会与旧的状态值进行比较，Vue可以用多种diff算法更快地定位虚拟DOM的元素。

其实有必要解释一下key在vue中起什么作用。关键属性其实是对vue的一种优化。如上所述，是为了更准确高效地定位虚拟DOM，相当于用一个键绑定了数组中的一个预算。如果那个键对应的数据发生变化，直接更新对应的DOM就够了。

简称为，可以直接用index作为键。但是，最好不要使用index作为大型列表的键。比如从数组中删除一个元素，这个元素后面的元素下标都前移一位，前一个键对应的数据和dom就会混淆。除非重新匹配密钥，否则很容易产生错误。如果重新匹配key，等于全部重新渲染，违背了使用key优化更新dom的初衷。但是如果有可能对于Vue玩的好的同学，可以忽略这个。

对象.冻结

如果对Vue有所了解的朋友知道，Vue通过Object.defineProperty来挟持数据人质，以最终实现对数据变化的视图响应，但是在实际开发过程中，有些页面可能不需要双向绑定，只是简单的渲染。一旦数据被绑定，您可以使用Object.freeze来解除数据绑定，而不做任何更改。

首先介绍以下Object.freeze的内置函数，用于停靠对象。被冻结的对象将不会被修改，并且新的属性不能被添加到该对象，或者现有的属性不能被删除，或者该对象的现有属性的可枚举性、可配置性和可写性不能被修改。另外，这个对象的原型冻结后是不能修改的。

当有大量数据时，这可以明显减少组件的初始化时间。这里需要注意的一点是，冻结的对象一旦被冻结，就永远无法修改。但是这里有一个问题需要注意:点击，在黑板上点击！敲黑板！敲黑板！

虽然Object.freeze可以在一定程度上帮助我们提高一些数据性能，但还是需要谨慎使用。避免数据无响应的问题。如果再次使用Object.freeze属性为其Object属性赋值，将会抛出一个不能赋给对象的只读属性*的错误。

用这种方法提升性能，如果数据量小，是感觉不到的。只有当数据量很大的时候，你才会感受到数据的明显变化。

预渲染处理

渲染数据时，后端返回的数据格式与UI设计图中要求的数据不一致。比如需要在列表中显示一个时间，但是后端返回一个时间戳，那么前端就需要处理这部分数据。一般来说，有一些方法可以处理这种情况，例如使用函数、使用过滤器以及在渲染之前处理数据。

在这里，我建议所有的数据在渲染之前都要进行处理。为什么？数据渲染后，会执行其中的函数或过滤器，对页面渲染造成明显的额外负担。如果了解Vue3.0的同学可以知道Vue3.0中去掉了滤镜的功能，建议使用computed达到同样的效果。

猜测内容:可能特别发现了滤镜给页面渲染带来的额外负担，对页面性能的提升并没有起到太大的作用。

功能的

不是很多功能组件都需要方法。在Vue中，为了表明模板应该被编译成功能组件，在模板中添加了一个功能属性。如果项目中使用的组件不是有状态的组件，那么可以使用functional属性将该组件转换为功能组件。

功能组件(不要与Vue的渲染功能混淆)是不包含状态和实例的组件。函数是没有状态或实例的组件。因为功能组件没有状态，所以不需要初始化Vue的数据响应之类的东西。组件仍然会像in-and-out props一样响应数据更新，但是功能组件本身无法知道它们的数据是否已经更改，因为它们没有维护自己的状态。在大型项目中使用功能组件后，DOM呈现有了显著的改进。

因为功能组件没有状态，所以不需要对Vue的反应系统进行额外的初始化。组件仍然会对变化做出反应，比如引入新的道具，但是在组件内部，因为它不维护自己的状态，所以不可能知道数据何时发生了变化。

在许多情况下，功能组件可能不合适。毕竟，使用JavaScript框架的目的是构建更具反应性的应用程序。在Vue中，如果没有合适的反应系统，该操作就无法执行。

假设我们的组件接受一个prop.user，它是带有firstName和的对象lastName，我们希望呈现一个显示用户全名的模板。在函数中

<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变化，组件补丁重新渲染时，重长任务将重新执行。然而，如果不与父组件相互依赖的元素可以被分割成一个组件，则当父组件需要被重新呈现时，响应性能可以被提高，因为不与父组件相互依赖的子组件将不会被重新呈现。

局部范围

在开发过程中，经常会用到一些计算属性或实用函数。如果我们用这个。***要在循环过程中连续调用计算属性，计算属性将在每次调用该值时计算一次。但是，这个值是一个固定值，造成了性能的极大浪费。

我们在使用这些属性的时候，最好的办法就是把对应的值拿出来，然后使用。

<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性能优化的方案，以及个人项目中的一些小经验。文章中的一些观点可能存在一些问题。欢迎大家在评论区指出，我们可以一起学习，一起进步。