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

文章名称:成都网站建设:Vue使用中的小技巧
新闻来源:/news12/314112.html

成都网站建设公司_创新互联,为您提供企业网站制作Google面包屑导航网页设计公司网站维护手机网站建设

广告

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

外贸网站制作