VUE 是一个非常流行的 JavaScript 框架，它的核心思想是响应式数据绑定和插件化。在 VUE 开发过程中，组件传值 methods 与 watch 是非常重要的概念。本文将深入探讨这两个概念并提供示例代码以供学习。
methods
在 VUE 中，methods 是一个对象，其中包含一组方法。这些方法可以用于处理事件、计算属性等等。对于组件中的方法来说，其可以访问组件的内部状态和属性，可以调用其他组件中的方法等等。
示例
下面是一个简单的 VUE 组件，其中包含了一个方法 handleClick：
-- -------------------- ---- -------
----------
------- -------------------------- -----------
-----------
--------
------ ------- -
-------- -
------------- -
------------------- ----------
-
-
--
---------在此示例中，当按钮被点击时，handleClick 方法将被调用，并输出 "button clicked" 到控制台。
watch
在 VUE 中，watch 是一个对象，其中包含一个或多个属性和对应的回调函数。在组件中，watch 用于监视组件中的数据变化，并在这些数据变化时执行相关的回调函数。
示例
下面是一个简单的 VUE 组件，其中包含了一个 data 属性和一个 watch 属性：
-- -------------------- ---- -------
----------
-----
---------- -- ----- -------
------
-----------
--------
------ ------- -
------ -
------ -
------ -
--
--
------ -
--------------- --------- -
------------------ ------- ---- ----------- -- --------------
-
-
--
---------在此示例中，当 count 属性发生变化时，watch 中的回调函数将被调用。在回调函数中，我们可以获取到新值和旧值，然后执行自定义的操作。在此示例中，当 count 发生变化时，我们将输出它的新值和旧值。
methods 与 watch 的比较
在 VUE 中，methods 与 watch 都用于处理组件中的数据。它们之间的区别在于它们被触发的时机。
当使用 methods 时，其中的方法必须被显式地调用，才能执行其中的代码。
当使用 watch 时，其中的回调函数将在数据变化时自动触发。
因此，如果你需要执行某些特定的逻辑，例如当用户单击按钮时弹出窗口，那么你应该使用 methods。如果你需要在组件中监视某些数据变化，并自动执行回调函数，则应该使用 watch。
总结
在 VUE 开发过程中，理解 methods 和 watch 概念非常重要。方法与回调函数之间的延迟和数据变化的触发方式非常不同。因此，应该根据特定的场景选择从中选择一个。
在本文中，我们提供了一些示例代码来帮助你更好地理解方法和观察之间的区别。如果你想深入了解 VUE 的其他方面，请查看 VUE 的官方文档或其他相关文献。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64892c1148841e989477a023