如何进阶学习封装Vue函数技巧？

本文共计1130个文字，预计阅读时间需要5分钟。

在日常生活中，频繁的机械劳动会消耗我们的时间和精力，降低工作效率。同样，在代码世界中，编写重复的代码会导致代码冗余，降低页面性能，增加后期维护成本。

在生活中，重复的机械劳动会消耗我们的时间和精力，提高生产成本，降低工作效率。同样，在代码世界中，编写重复的代码会导致代码的冗余，页面性能的下降以及后期维护成本的增加。由此可见将重复的事情复用起来是提高生产效率、降低维护成本的不二之选。

在 Vue 项目中，每一个页面都可以看作是由大大小小的模块构成的，即便是一行代码、一个函数、一个组件都可以看作是一个个自由的模块。那么提高代码的复用性的关键便在于编写可复用的模块，也就是编写可复用的代码、函数和组件等。

## 一个简单的例子

let person = []; for (let i = 0; i < data.obj.items.length; i++) { person.push({ name: data.obj.items[i].name, age: data.obj.items[i].age }); } 不知道上方代码给你的第一印象是什么？总之给我的印象是糟糕的，因为出现了重复性的代码片段 `data.obj.items`，可能这样的代码在我们团队开发中随处可见，这也说明了重复编码现象其实无处不在。
面对自己编写的代码，我们应该保持一颗去重的心，发现重复的地方就相当于找到了可以复用的模块。