前言初衷：前几天发现在公司的其他Vue项目中，都是使用Decorator装饰器模式开发的。感觉整体代码还不错，所以就把笔记分享给大家，不喜勿喷。适合人群：初级前端开发，大佬绕道。这个项目是使用js和Decorator装饰器构建的。如果你的项目使用了ts，装饰器的使用方法和本文介绍的不一样。请参考ts使用装饰器。需要注意的是，使用这种模式，变量会被污染，所以不能有同名变量。什么是装饰器？Decorator装饰器是类相关的语法，所以Decorator装饰器只能用在类类中，在普通语法或表达式中是不能使用的。个人理解：装饰器可以为我们提供一层拦截，先执行装饰器中的东西，再执行我们的操作。具体可以参考阮一峰老师的《装饰器》安装组件npminstall--savevue-class-componentnpminstall--savevue-property-decorator项目根目录下的配置babel.config.js配置为遵循module.exports={presets:['@vue/app'],plugins:[['@babel/plugin-proposal-decorators',{legacy:true}],['@babel/plugin-proposal-class-properties',{loose:true}],]}在项目根目录的jsconfig.json中配置如下{"compilerOptions":{"experimentalDecorators":true}}如何使用我将介绍几种常用的方法在Vue这里，详细可以看Vue-property-decorator的生命周期、方法和数据。这些写法和以前一样，直接写就行了。看下面的案例对比一下原文的写法。装饰器Emit原写装饰器提供原创写法装饰器写法注入原写exportdefault{inject:{msg:{default:()=>"",required:true}}}decoratorimport{Vue,Component,Inject}from'vue-property-decorator'@ComponentclassHelloextendsVue{@Inject({required:true,default:()=复制代码>""})msg??}exportdefaultHelloProp原创写法decorator写法PropSync原写//父组件//子组件装饰器@PropSync的第一个参数是this.$emit("update:msg")里面的msg，该语句后跟变量看原文exportdefault{data(){return{str:123}},created(){setTimeout(()=>{this.str=12},5000)},watch:{str:function(newVal,oldVal){console.log(newVal,oldVal)}}}decoratorimport{Vue,Component,Watch}来自'vue-property-decorator'@ComponentclassHelloextendsVue{str=123created(){setTimeout(()=>{this.str=12},2000)}@Watch("str",{deep:true})测试(newVal,oldVal){console.log(newVal,oldVal)}}exportdefaultHelloComputeddecoratorexportdefault{props:{msg:{require:true}},model:{prop:"msg",event:"input"},methods:{test(e){this.$emit("input",e.target.value)}}}装饰器写法//父组//子组Ref原写法>script>exportdefault{name:'App',components:{HelloWorld},data(){return{msg:"hello蛇人"}},mounted(){console.log(this.$refs.val)},}装饰器写法Component这个方法是从组件库中导入的，如果当使用生命周期的方式，记得引入这个装饰器，否则不会生效。装饰器接收一个对象，也可以编写原生的Vue方法。extension当然你可以根据自己的需要对Decorator装饰器进行扩展封装。装饰器接收三个参数targetobjecttargetkeydescriptionobject如果对这里的description对象属性不理解，可以看我的这篇文章《深入理解JavaScript对象》上面的例子中，可以扩展自己的Decorator，相当于一层拦截函数，先执行decorator中的操作，再执行逻辑操作我们的功能本身。我这里只做一个案例，看你的需求了。感谢您在百忙之中打开这篇文章。希望对您有所帮助。如果您有任何问题，请指正。我是蛙人，如果觉得写的还可以，请点个赞。有兴趣的小伙伴可以加入前端娱乐圈交流群。欢迎大家交流讨论往期好文章《聊聊什么是CommonJs和Es Module及它们的区别》《带你轻松理解数据结构之Map》《这些工作中用到的JavaScript小技巧你都知道吗？》《【建议收藏】分享一些工作中常用的Git命令及特殊问题场景怎么解决》《解构：使数据访问更便捷！》《你真的了解ES6中的函数特性么？》
