成都网站建设：Vue使用中的小技巧

2024-01-17 分类：网站建设

在 Vue 的使用过程中会遇到各种场景，当普通使用时觉得没什么，但是优化一下可以更高效更优美地进行开发。接下来就由成都网站建设工程师给大家分享Vue使用时的小技巧吧。

1. 多图表resize事件去中心化

1.1 一般情况

有时候我们会遇到这样的场景，一个组件中有几个图表，在浏览器 resize 的时候我们希望图表也进行 resize，因此我们会在父容器组件中写：

成都网站建设

这样子图表组件如果跟父容器组件不在一个页面，子组件的状态就被放到父组件进行管理。为了维护方便，我们自然希望子组件的事件和状态由自己来维护，这样在添加删除组件的时候就不需要去父组件挨个修改。

1.2 优化

这里使用了 lodash 的节流 throttle 函数，也可以自己实现，这篇文章也有节流的实现可以参考一下。以 Echarts 为例，在每个图表组件中：

成都网站建设

1.3 再次优化

这里因为多个 chart 实例都使用同一套初始化逻辑，可以使用 extends 来考虑复用，因此我想到了 Vue 提供的 Mixins，所以我在这里做了点优化，可以让每个同类型的 chart 组件更优雅一点，新建一个 mixin.js 文件：

成都网站建设

然后在每个 chart 组件中：

成都网站建设

这样就可以在每个图表组件中混入之前在 mixin.js 中定义的 resize 事件逻辑，且自动初始化，并在 destroyed 的时候自动销毁事件。

当然可以进一步优化一下，比如一个页面有多个图表的话，上面的代码就不能满足了，这里需要重构一下，具体代码可以参照 chartinitMixin - GitHub 的实现。

以上关于Vue 使用中的小技巧属成都网站建设工程师的个人观点，大家如果对此有着不同的见解，可以关注公众号“创新互联派”给我留言，大家可以交流一下自己的心德体会，共同学习进步。

声明：本网站发布的内容（图片、视频和文字）以用户投稿、用户转载内容为主，如果涉及侵权请尽快告知，我们将会在第一时间删除。文章观点不代表本网站立场，如需处理请联系客服。电话：028-86922220；邮箱：631063699@qq.com。内容未经允许不得转载，或转载时需注明来源：创新互联

猜你还喜欢下面的内容