在 Vue 中，我们经常使用组件来构建我们的应用程序。组件是一个独立的模块，它有自己的状态和行为。在 Vue 中组件可以非常方便地进行复用，但是在实际开发中，我们经常会遇到需要在组件中添加一些额外的功能的情况。这时候，ES7 装饰器 Decorator 就可以派上用场了。
什么是装饰器 Decorator
装饰器 Decorator 是一个将函数或类作为参数，并返回一个新函数或类的函数。通过装饰器 Decorator，我们可以在不改变原有代码的情况下，给函数或类添加新的功能。在 ES7 中，装饰器 Decorator 已经被正式加入到了 JavaScript 中。
举个例子，我们有一个计算器的类：
----- ---------- -
----------------- ----- -
--------- - -----
--------- - -----
-
----- -
------ --------- - ----------
-
-我们可以使用装饰器 Decorator 来给这个类添加一个打印日志的功能：
-------- ----------- ----- ----------- -
----- -------- - -----------------
---------------- - ----------------- -
--------------- ------- ------ ----------
------ -------------------- ------
-
------ -----------
-
----- ---------- -
----------------- ----- -
--------- - -----
--------- - -----
-
----
----- -
------ --------- - ----------
-
-这样，当我们调用 add 方法时，会自动打印出日志，而不需要修改原有的代码。
Vue 中的应用
在 Vue 中，我们可以使用装饰器 Decorator 来给组件添加一些额外的功能。比如，我们可以使用装饰器 Decorator 来给组件添加一个 mixin：
------ --- ---- ------
-------- --------------- -
------ ---------------- -
----------------------------- ----------
-
-
--------
--------- -
---------------------
-
--
------ ------- ----- ----------- ------- --- -
-- ---
-这样，在 MyComponent 组件中，就会自动添加一个 created 钩子函数，并在控制台输出 组件已创建。
除了添加 mixin，我们还可以使用装饰器 Decorator 来给组件添加其他的功能。比如，我们可以使用装饰器 Decorator 来给组件添加一个数据验证的功能：
------ --- ---- ------
-------- ---------------- ----- ----------- -
----- -------- - -----------------
---------------- - ----------------- -
-- ---------------- --- --- -
---------------
-------
-
-- --------------- - - -- -------------- - ---- -
------------ - - --- -----
-------
-
------ -------------------- ------
-
------ -----------
-
------ ------- ----- ----------- ------- --- -
---------
-------- -
-- ---
-
-这样，在调用 submit 方法时，会自动进行数据验证，并在不符合要求时弹出提示框。
总结
ES7 装饰器 Decorator 是一个非常强大的工具，它可以让我们在不改变原有代码的情况下，给函数或类添加新的功能。在 Vue 中，我们可以使用装饰器 Decorator 来给组件添加一些额外的功能，比如 mixin、数据验证等。使用装饰器 Decorator 可以让我们的代码更加简洁、易于维护。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/660d07e1d10417a222d6f00f