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。内容未经允许不得转载,或转载时需注明来源: 创新互联
猜你还喜欢下面的内容