聊聊在Vue项目中使用Decorator装饰器
戳蓝字"
Web前端严选
"
关注我们哦
！
前言
初衷： 前几天我在公司其它Vue项目中，发现了是用Decorator装饰器模式开发的，看起来整体代码还不错，于是就做了一下笔记分享给大家，不喜勿喷。
本项目是使用js和Decorator装饰器搭建，如果大家项目用的是ts，那么使用装饰器方法跟本文介绍的不同，请自行参考ts 使用装饰器。需要注意的是，使用这种模式，变量会存在污染，所以不能出现重名变量。
什么是Decorator
Decorator装饰器是一种类class相关的语法，所以Decorator装饰器只能用在class类里面，在普通的语法或表达式上不能使用。个人理解：装饰器可以给我们提供一层拦截的作用，先执行装饰器里面的东西，后执行我们的操作。具体请看阮一峰老师的《装饰器》。
安装
组件
npm install --save vue-class-component
npm install --save vue-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
生命周期、methods、data
这些写法都跟原来一样，直接写就行，看如下案例对比
原写法
装饰器写法
Emit
原写法
装饰器写法
Provide
原写法
装饰器写法
Inject
原写法
export default {
inject: {
msg: {
default: () => "",
required: true
}
}
}
装饰器写法
import { Vue, Component,Inject } from 'vue-property-decorator'
@Component
class Hello extends Vue {
@Inject({ required: true, default: () => "" }) msg
}
export default Hello
Prop
原写法
装饰器写法
PropSync
原写法
// 父组件
装饰器写法
@PropSync第一个参数则是，this.$emit("update:msg")里面的msg, 语句后面则跟着变量
Watch
原写法
export default {
data() {
return {
str: 123
}
},
created() {
setTimeout(() => {
this.str = 12
}, 5000)
},
watch: {
str: function(newVal, oldVal) {
console.log(newVal, oldVal)
}
}
}
装饰器写法
import { Vue, Component, Watch } from 'vue-property-decorator'
@Component
class Hello extends Vue {
str = 123
created() {
setTimeout(() => {
this.str = 12
}, 2000)
}
@Watch("str", {deep: true})
test(newVal, oldVal) {
console.log(newVal, oldVal)
}
}
export default Hello
Computed
原写法
装饰器写法
装饰器写法
// 父组件
Ref
原写法
装饰器写法
Component
该方法是从组件库中导入，如果使用使用生命周期方法，记得引入此装饰器，否则不生效。该装饰器接收一个对象里面也可以写原生Vue方法。
扩展
当然了可以根据自己的需求扩展封装Decorator装饰器，装饰器接收三个参数
目标对象
目标key
描述对象
这里不明白描述对象属性可以看这篇文章《深入理解JavaScript对象》
上面example中，可扩展自己的Decorator装饰器，装饰器就相当于起一层拦截作用，先执行装饰器里面的操作，在执行我们函数本身的逻辑操作。我这里只做一个案例哈，具体看你们的需求。
感谢
❤️ 感谢大家
如果你觉得这篇内容对你挺有有帮助的话：
看到这里了就点个在看支持一下吧，你的[在看]是我创作的动力；
关注公众号【Web前端严选】，进交流群，定期为你推送好文。
添加个人微信，进群与小伙伴一起玩耍（已经推出）~
