12 个 Vue 开发中的性能优化小技巧

{{项目.标题}}

3. 对列表使用唯一键

比如我有一个列表，需要在中间插入一个元素，如果不使用key或者使用索引作为key会发生什么情况呢？先看图？

如图所示，li1 和li2 没有重新渲染。对此没有争议。并且li3、li4、li5全部重新渲染。

这是因为如果不使用列表的key或者index作为key的话，每个元素对应的位置关系都会是index，所以上图中的结果会直接将后面所有元素对应的位置关系从插入的元素。因此在补丁过程中，所有内容都会被更新，然后重新渲染。

这不是我们想要的。我们想要的是渲染添加的元素而不对其他四个元素进行更改，因此我们不需要重新渲染。

当使用唯一键时，键就是每个元素对应的位置关系。 让我们看一下使用唯一键值的情况。

这样，图中的li3和li4就没有被重绘，因为元素内容没有改变，对应的位置关系也没有改变。

这就是为什么v-for需要写key，开发时不建议使用数组索引作为key。

4. 通过v-show 重用DOM

v-show：渲染组件并将组件的可见性更改为阻止或无。 v-if：渲染或不渲染组件。

因此，在条件可能频繁变化的场景中，使用v-show 可以节省性能。特别是，DOM 结构越复杂，好处就越大。

然而，这也有其缺点。这意味着在v-show 开始时，分支中的所有组件都会被渲染，并执行其相应的生命周期钩子函数，但v-if 只会加载命中的组件。决策标准不同，需要根据不同的场景使用合适的指令。

例如，下面使用v-show 来重用DOM 比v-if/v-else 更好。

作为一般规则，如果在条件发生变化时使用v-if 触发增量更新，并且发现新旧vnode 不一致，则会删除整个旧vnode，并重新创建新vnode。创建了一个新的my-components 组件，该组件经历了自初始化、渲染、打补丁等过程，但是如果v-show 条件发生变化，新旧vnode 是一致的，看起来像这样：的进程被执行。不执行删除和创建。

5、无状态组件使用函数式组件

一些纯显示组件没有响应数据、状态管理或生命周期钩子函数，因此可以将它们配置为功能组件来提高渲染性能。这些被作为函数处理，因此它们的开销非常低。

原则上，在修补过程中，不会出现功能组件渲染生成的虚拟DOM 的递归子组件初始化过程，从而显着降低渲染开销。

props 被接受，但没有创建实例，因此this.xx 不能在内部使用来检索组件的属性。

{{价值}}

//或者

Vue.component(\’我的组件\’,{

function:true,//表示该组件是功能组件

props:{…},//选项

//第二个参数是上下文。这不是

render:函数（createElement，上下文）{

//…

}

})

6. 拆分子组件

让我们从一个例子开始

{{某物（）}}

上面的代码中，每当父组件传递的数字发生变化时，就会重新渲染该数字，并重新执行someThing的耗时任务。

因此，在执行优化时，您将使用计算属性，因为它们本身具有缓存计算结果的属性。

第二种方法是将其拆分为子组件，因为Vue 更新是在组件粒度上完成的。第一次数据改变会导致父组件重新渲染，但子组件不会重新渲染。内部更改需要更长的时间，但当然任务不会重新执行，这会提高性能。这是优化后的代码：

7. 变量本地化

简单来说，就是存储被多次引用的变量。每当访问this.xx 时，由于是响应式对象，每次都会触发getter，并触发依赖于集合的关联代码。当然，变量使用的次数越多，性能就越差。

虽然对函数中的变量运行一次依赖收集就足够了，但很多人习惯性地在项目中编写大量的this.xx，而忽略了发生了什么。性能问题。

例如，在以下示例中：

{{结果

}}

8. 按需部署第三方插件

例如，按需部署Element-UI等第三方组件库，尤其可以防止项目变得过大，而不需要完整部署组件库。

//main.js

importElement3from“插件/元素3”；

Vue.use(Element3)

//元素3.js

//完整介绍

从“元素3”导入元素3。

导入“element3/lib/theme-chalk/index.css”；

//按需推荐

//导入“element3/lib/theme-chalk/button.css”;

//…

//进口{

//L按钮，

//埃尔洛，

//埃科尔，

//艾尔曼，

//…

//}来自“元素3”；

导出默认函数（应用程序）{

//完整介绍

应用程序.use（元素3）

//按需推荐

//app.use(ElButton);

}

9. 路由延迟加载

由于Vue是单页面应用，我们发现如果没有延迟加载，进入首页时需要加载的内容太多。如果时间太长，你会看到很长的白屏，不太舒服。用户体验和SEO都很糟糕。

因此，通过延迟加载的方式来拆分页面，根据需要加载相应的页面，可以分担主页加载压力，减少主页加载时间。

无需路由的延迟加载：

importHomefrom‘@/components/Home’

构造函数=newVueRouter({

路线：[

{path:‘/home’,component:Home}

]

})

使用路由延迟加载：

构造函数=newVueRouter({

路线：[

{path:‘/home’,component:()=

导入（\’@/components/Home\’）}，

{路径：“/登录”，组件：

require(\’@/components/Home\’).default}

]

})

当进入该路由时，会检索相应的组件并执行导入以编译和加载该组件。这可以理解为一种Promise解析机制。

import：Es6 语法规范在编译或结构化过程中调用，不支持变量函数之类的东西。

require：支持AMD规范、运行时调用、赋值处理、变量计算函数等。

关于前端模块化的更多内容，请参见我的另一篇文章：前端模块化规范详解。

10.Keepalive缓存页面

例如，在表单输入页面进入下一步后，返回上一步的表单页面时，应保留表单输入的内容，例如列表页、详情页、列表页。跳跃场景等

可以通过内置组件keepalives/keepalives对组件进行缓存，组件切换时不需要卸载。所以当你再次回来时，你可以快速从缓存中渲染，而不用重新渲染。以节省性能。

只需包装要缓存的组件即可

您还可以使用包含/排除来缓存/取消缓存指定的组件。

当前组件状态可以通过两个生命周期获取：激活/去激活。

11. 丢弃事件

当一个Vue组件被销毁时，它的所有指令和事件监听器都会自动解除绑定，但只有组件自己的事件被绑定。

使用addEventListener 等注册的计时器和侦听器必须在组件销毁生命周期挂钩中手动销毁或取消绑定，以避免内存泄漏。

12.图像延迟加载

最后

我的编辑同事在学习期间连续三年参加ACM-ICPC竞赛。从比赛一开始，我就计划每天回答一个算法题，但实际上每天的问题不止一个，所以一年之内我回答了600 多个问题。

凭借三年的答疑经验，他在学校招聘过程中很快就拿到了各大公司的offer。

在加入公司之前，他将自己解决问题的经验整理成一本1,121 页的PDF 书，作为礼物送给了低年级的学生。他想帮助学生学习校招常见的算法和解决问题的思路。最短的时间。

我仔细阅读了整本书。作者非常仔细地将常见的核心算法题和总结题分为四章。

对于有时间的同学，作者精心挑选了1000多个解题思路和方法，并结合很多数据结构算法书籍，供需要慢慢学习的同学参考。

以上#12 Vue开发中性能优化技巧相关内容来源网络，仅供参考。相关信息请参见官方公告。