微客导航 » 文章资讯 » 在 Typescript 中使用可被复用的 Vue Mixin功能

在 Typescript 中使用可被复用的 Vue Mixin功能

2023-09-14 03:45:04 294

转到用Typescript写Vue应用以后，经过一轮工具链和依赖的洗礼，总算蹒跚地能走起来了，不过有一个很常用的功能mixin，似乎还没有官方的解决方案。

既想享受mixin的灵活和方便，又想收获ts的类型系统带来的安全保障和开发时使用IntelliSense的顺滑体验。

vuejs官方组织里有一个'vue-class-component'以及连带推荐的'vue-property-decorator'，都没有相应实现。翻了下前者的issue，有一条挂了好些时间的待做feature就是mixin的支持。

也不是什么复杂的事，自己写一个吧。

后注：vue-class-component6.2.0开始提供mixins方法，和本文的实现思路相似。

实现

importVue,{VueConstructor}from'vue'
exporttypeVClass={
new():T
}&Pick
/**
*mixinsforclassstylevuecomponent
*/
functionMixins(c:VClass):VClass
functionMixins(c:VClass,c1:VClass):VClass
functionMixins(c:VClass,c1:VClass,c2:VClass):VClass
functionMixins(c:VClass,...traits:Array>):VClass{
returnc.extend({
mixins:traits
})
}

声明VClass可作为T的类构造器。同时通过Pick拿到Vue的构造器上的静态方法（extend/mixin之类），如此才能够支持下面这段中的真正实现，通过调用一个Vue的子类构造器上的extend方法生成新的子类构造器。

functionMixins(c:VClass,...traits:Array>):VClass{ returnc.extend({ mixins:traits }) }

至于ABC这个纯粹是类型声明的体力活了。

使用

实际使用时:

import{Component,Vue}from'vue-property-decorator' import{Mixins}from'../../util/mixins' @Component classPageMixinextendsVue{ title='TestPage' redirectTo(path:string){ console.log('callingreidrectTo',path) this.$router.push({path}) } } interfaceIDisposable{ dispose(...args:any[]):any } classDisposableMixinextendsVue{ _disposables:IDisposable[] created(){ console.log('disposablemixincreated'); this._disposables=[] } beforeDestroy(){ console.log('abouttocleardisposables') this._disposables.map((d)=>{ d.dispose() }) deletethis._disposables } registerDisposable(d:IDisposable){ this._disposables.push(d) } } @Component({ template:`

{{title}}

Counted:{{counter}}

` }) exportdefaultclassTimerPageextendsMixins(PageMixin,DisposableMixin){ counter=0 mounted(){ consttimer=setInterval(()=>{ if(this.counter++>=3){ returnthis.redirectTo('/otherpage') } console.log('countto',this.counter); },1000) this.registerDisposable({ dispose(){ clearInterval(timer) } }) } } countto1 countto2 countto3 callingreidrectTo/otherpage abouttocleardisposables

注意到直接extendsVue的DisposableMixin并不是一个有效的Vue组件，也不可以直接在mixins选项里使用，如果要被以Vue.extend方式扩展的自定义组件使用，记住使用Component包装一层。

constExtendedComponent=Vue.extend({ name:'ExtendedComponent', mixins:[Component(DisposableMixin)], })

Abstractclass

在业务系统中会使用到的Mixin其实多数情况下会更复杂，提供一些基础功能，但有些部分需要留给继承者自行实现，这个时候使用抽象类就很合适。

abstractclassAbstractMusicPlayerextendsVue{ abstractaudioSrc:string playing=false togglePlay(){ this.playing=!this.playing } } classMusicPlayerAextendsAbstractMusicPlayer{ audioSrc='/audio-a.mp3' } classMusicPlayerBextendsAbstractMusicPlayer{ staticBase='/statics' getaudioSrc(){ return`${this.staticBase}/audio-b.mp3` } }

但抽象类是无法被实例化的，并不满足{new():T}这个要求，因此只能被继承，而不能被混入，由于同样的原因，抽象类也无法被'vue-class-component'的Component函数装饰。

这时候只好将实现了的功能写入Mixin中，待实现的功能放到接口里，让具体类来实现。

interfaceIMusicSourceProvider{ audioSrc:string } /** *@implementsIPlayerImplementation */ classPlayerMixinextendsVue{ /**@abstract*/ audioSrc:string logSrc(){ console.log(this.audioSrc) } } interfaceIPlayerImplementationextendsIMusicSourceProvider{} classRealPlayerextendsMixins(PlayerMixin)implementsIPlayerImplementation{ audioSrc='/audio-c.mp3' }

这种欺骗编译器的方式其实还是比较拙劣的，如果一个具体类继承了PlayerMixin，却没有显示声明实现IPlayerImplementation，编译器无法告诉你这个错误。我们只能在代码里小心翼翼写上注释，期待使用者不要忘了这件事。

总结

以上所述是小编给大家介绍的在Typescript中使用可被复用的VueMixin功能，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对毛票票网站的支持！

上一篇
vue iview实现动态路由和权限验证功能下一篇
RecyclerView索引溢出异常的解决方法

热门推荐

1 毛坯房验收经验和常识看了之后再验房心里有底

2 二手房收房如何交接二手房收房注意问题

3 专业验收毛坯房的价格商品房验收合格的标准

4 精装房怎么验收精装房请验房师有用吗

5 一般要到哪里找验房师验房师有哪些作用呢

6 请人验房一般是多少钱验房师费用是多少

7 怎样测量房子面积建筑面积和使用面积怎么算

8 收房需要注意什么仔细检查不松懈

9 收房时三书一证一表是什么主要作用介绍

10 交房时交房税费有哪些本文为你一一讲解

11 验房都需要验什么要做哪些准备呢

12 毛坯房验房师有必要请吗毛坯房装修完如何验收

13 地下室防水工程质量验收规范详解

14 水性涂料、油性涂料区别介绍

15 零基础布艺DIY工坊教你做超萌猫头鹰钥匙包

16 三棵树漆怎么样？三棵树漆官方网站

17 家庭“装修套餐”中猫腻你知道吗？

18 小空间大浴望卫浴间装修巧支招

随机推荐

评论小品祝福语大全简短

幼儿祝福语押韵的话简短

小住户的祝福语简短

加盟的祝福语大全简短

大外甥高考祝福语简短

体育学校开业祝福语简短

虎年群友祝福语大全简短

寿宴文案短句祝福语简短

儿子调剂上岸祝福语简短

跨年酒场祝福语大全简短

拜年优美祝福语大全简短

月底晚安祝福语大全简短

虎年祝福语台词简短英语

中秋晚会文案祝福语简短

康复走路祝福语简短句

乔迁换新仪式祝福语简短