vue装饰器写法,vue3 装饰器
Decorator是一种与类相关的语法糖，用于封装或修改类或类的方法。实际上，decorator是decorator模式在设计模式中的一种实现。下面这篇文章主要介绍在Vue中使用decorator的相关信息，有需要的朋友可以参考一下。
目录
前言什么是装修工？decorator的使用：js中使用decorator，vue中不使用decorator，一些常用的decorators 1。功能节流防抖2。正在加载3。确认框摘要
前言
我相信你一定已经满足了开发中第二个弹框确认的相关需求。不管你用的是UI框架的二级弹性框架组件，还是自己打包的弹性框架组件。无法避免多次使用时出现大量重码的问题。这些代码的积累导致项目可读性差。项目的代码质量也变得很差。那么我们如何解决第二个子弹盒的代码重复问题呢？使用装饰器
什么是装饰器？
Decorator是ES7的新语法。Decorator修饰类、对象、方法和属性。给它添加一些其他的行为。通俗地说，就是对一段代码的二次包装。
装饰器的使用
方法简单。我们定义一个函数。
const decorator=(目标，名称，描述符)={
var oldValue=descriptor.value
descriptor.value=function(){
警报(哈哈)
return oldValue.apply(this，参数)
}
返回描述符
}
//然后直接@decorator到函数，类或者对象。
装饰器的目的是重用代码。我们先来看一个小例子。
js中使用装饰器
//定义装饰器
常量日志=(目标，名称，描述符)={
var oldValue=descriptor.value
descriptor.value=function() {
console.log(`调用${name} with `，arguments)；
返回oldValue.apply(this，arguments)；
};
返回描述符；
}
//计算类
类计算{
//使用装饰器
@log()
函数减法(a，b){
返回a - b
}
}
const operate=new Calculate()
运算.减法(5，2)
不使用装饰器
常量日志=(函数)={
if(typeof(func)！==函数){
抛出新错误(`参数必须是函数`)；
}
返回(.参数)={
console . info(` $ { func . name } invoke with $ { arguments . join(，)} `)；
func(.论据)；
}
}
常数减法=(a，b)=a b；
const subtractionLog=log(减法)；
减法对数(10，3)；
这样，你会发现使用装饰器后，代码的可读性变得更强了。Decorator不关心你内部代码的实现。
vue 中使用装饰器
如果您的项目是使用vue-cli构建的，并且vue-cli的版本高于2.5，则无需任何配置即可使用。如果您的项目也包含eslit，那么您需要在eslit中打开与支持decorators相关的语法检查。
//在eslintignore中添加或修改以下代码：
语法分析选项：{
ECM功能：{
//支持装饰器
legacyDecorators: true
}
}
添加这段代码后，eslit支持decorator语法。
通常在项目中，我们经常使用第二个项目符号框来删除：
//decorator.js
//假设项目中已经安装了element-ui
从“元素-用户界面”导入{ MessageBox，Message }
/**
*确认框
* @ param { String } title-标题
* @ param { String } content-内容
* @ param { string } Confirm button Text-确认按钮名称
* @param {Function}回调-确认按钮名称
* @返回
**/
功能确认(标题、内容、确认按钮文本=确定){
返回函数(目标，名称，描述符){
const originValue=descriptor . value
descriptor.value=函数(.args) {
MessageBox.confirm(内容，标题，{
dangerouslyUseHTMLString: true，
distinguishCancelAndClose: true，
确认按钮文本：确认按钮文本
}).然后(originValue.bind(这个，args))。catch(错误={
if(error=== close error=== cancel ){
Message.info(用户取消了操作))
}否则{
Message.info(错误)
}
})
}
返回描述符
}
}
如上面的代码所示，在确认方法中执行了element-ui中的MessageBox组件。当用户取消时，消息组件将提示用户取消操作。
让我们用装饰器来装饰test()方法。
从 @/util/decorator 导入{ confirm }
导入axios表单 axios
导出默认值{
名称：“测试”，
data(){
返回{
戴尔列表：“/商家/商店列表/委托商店”
}
}
},
方法：{
@confirm(删除商店，确定要删除商店吗？)
测试(id){
const {res，data}=axios.post(this.delList，{id})
If (res.rspcd== 0000) this。$ message.info(操作成功！)
}
}
此时，用户点击一个商店来删除它。装修工会干活。如下图所示：
当我单击取消时：
温馨提示：用户取消了操作.被修饰的test方法不会执行。
当我们单击“确定”时：
调用接口，弹出消息。
一些常用的装饰器
下面小编列举了几个小编在工程中常用的装饰，方便大家参考。
1. 函数节流与防抖
功能节流和防抖的应用场景相当广泛。一般要调用的函数都是用throttle或者去抖方法打包的。现在，这两个功能都可以用上面提到的内容打包成decorators。防抖节流使用lodash提供的方法，你也可以自己实现节流防抖功能。
从“lodash”导入{ throttle，debounce }
/**
*函数节流装饰器
* @ param {number}毫秒的等待限制
* @param {Object}选项节流选项对象
*[options . leading=true](boolean):指定在限制开始之前调用。
*[options . trailing=true](boolean):指定限制后调用。
*/
export const throttle=function(wait，options={}) {
返回函数(目标，名称，描述符){
descriptor . value=throttle(descriptor . value，等待，选项)
}
}
/**
*功能防抖装饰器
* @ param {number}等待的毫秒数。
* @param {Object} options选项对象
*[options . leading=false](boolean):指定在延迟开始之前调用。
* [options.maxWait] (number):设置func允许延迟的最大值。
*[options . trailing=true](boolean):指定在延迟结束后调用。
*/
export const de bounce=function(wait，options={}) {
返回函数(目标，名称，描述符){
descriptor . value=de bounce(descriptor . value，wait，options)
}
}
封装后，在程序集中使用它。
从“@/decorator”导入{去反跳}
导出默认值{
方法：{
@去抖(100)
调整大小(){}
}
}
2. loading
在加载数据时，为了给每个用户一个友好的提示，防止用户继续操作，通常会在请求前显示一个加载，请求结束后关闭加载，一般写为
导出默认值{
方法：{
异步getData() {
const loading=Toast.loading()
尝试{
const data=await loadData()
//其他操作
}catch(错误){
//异常处理
Toast.fail(加载失败)；
}最后{
loading.clear()
}
}
}
}
我们可以使用decorator重新打包上面的加载逻辑，如下面的代码所示
从“vant”导入{ Toast }
/**
*加载装饰器
* @param {*}消息提示信息
* @param {function} errorFn异常处理逻辑
*/
export const loading=function(message= loading . ，errorFn=function() {}) {
返回函数(目标，名称，描述符){
const fn=描述符.值
descriptor.value=异步函数(.休息){
const loading=Toast.loading({
消息：消息，
禁止点击：真
})
尝试{
返回await fn.call(this，休息)
} catch(错误){
//当调用失败，用户定义了失败的回调函数，就会执行。
errorFn errorFn.call(this，error，休息)
console.error(错误)
}最后{
loading.clear()
}
}
}
}
然后修改上面的组件代码。
导出默认值{
方法：{
@loading (loading )
异步getData() {
尝试{
const data=await loadData()
//其他操作
}catch(错误){
//异常处理
Toast.fail(加载失败)；
}
}
}
}
3. 确认框
点击删除按钮时，通常需要弹出一个提示框，让用户确认是否删除。这时，常规写法可能是这样的
从“vant”导入{ Dialog }
导出默认值{
方法：{
deleteData() {
对话框.确认({
标题：“提示”，
消息：“您确定要删除数据吗？此操作无法回滚。
}).然后(()={
Console.log(在此删除)
})
}
}
}
我们可以提出上面的确认过程来制作一个装饰器，代码如下
从“vant”导入{ Dialog }
/**
*确认提示框装饰器
* @param {*}消息提示信息
* @param {*} title标题
* @param {*} cancelFn取消回调函数。
*/
导出功能确认(
Message=您确定要删除数据吗？此操作无法回滚。
Title=提示，
cancelFn=function() {}
) {
返回函数(目标，名称，描述符){
const originFn=descriptor.value
descriptor.value=异步函数(.休息){
尝试{
等待对话框确认({
消息，
标题：标题
})
originFn.apply(this，rest)
} catch(错误){
取消Fn取消Fn(错误)
}
}
}
}
然后在使用确认框的时候，可以这样使用。
导出默认值{
方法：{
//可以使用默认参数，而不是传递参数。
@确认()
deleteData() {
Console.log(在此删除)
}
}
}
不是瞬间简单很多吗？当然，你可以继续包很多装饰品。
总结
Decorator用于重新打包一段代码。在代码中添加一些行为操作和属性。使用装饰器可以大大减少代码重复。增强代码可读性。
这就是这篇关于在Vue中使用装饰器的文章。关于在Vue中使用decorators的更多信息，请搜索我们以前的文章或者继续浏览下面的相关文章。希望你以后能支持我们！
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。