js装饰器作用

JavaScript 装饰器（Decorator）是一种语法特性，可以用于修改类和类的属性或方法。它是 ES2017 引入的新特性，在 Vue 3 和 Angular 等现代框架中广泛使用。

装饰器可以让我们在不改变类或类成员定义的情况下，动态地修改它们的行为或功能。常见的装饰器有类装饰器、属性装饰器和方法装饰器等。

下面是一个示例，演示了如何使用装饰器为类添加一些额外的功能：

function log(target) {
  const original = target.prototype.render;
  target.prototype.render = function(...args) {
    console.log(`Rendering component ${target.name}...`);
    return original.apply(this, args);
  }
}

@log
class MyComponent {
  render() {
    return '<div>Hello World</div>';
  }
}

在这个示例中，我们定义了一个 log 装饰器函数，它接受一个参数 target，表示要修饰的类。在装饰器函数内部，我们首先保存了类的原始 render 方法，然后重写了它，添加了一个日志输出的功能。最后，我们返回了修饰后的类。

在 MyComponent 类定义上方，我们使用了 @log 装饰器，表示要对 MyComponent 类进行装饰。这样，我们就成功地为 MyComponent 类添加了一个日志输出的功能。

当我们调用 MyComponent 类的 render 方法时，就会在控制台输出一条日志，告诉我们正在渲染哪个组件。然后，它会调用原始的 render 方法，渲染组件并返回结果。

除了这个简单的示例，装饰器还可以用于更复杂的场景，例如为方法添加缓存、为属性添加校验等。它可以让我们更灵活地扩展和定制类的行为，提高代码的可维护性和可重用性。