Vue.js 是一个流行的前端框架，它提供了一些方便的功能来处理数据和 UI。其中，方法和计算属性是两个常用的功能，它们都可以用来处理数据，但是它们有一些区别。在本文中，我们将介绍 Vue.js 方法和计算属性的区别及使用场景，并提供示例代码。
方法
方法是 Vue.js 中的一个常用功能，它可以用来处理数据。方法可以接受参数，可以在模板中调用，也可以在 JavaScript 代码中调用。下面是一个简单的方法示例：
-- -------------------- ---- -------
----------
-----
------- ------------------------------- --------------
--------- -- ----- ------
------
-----------
--------
------ ------- -
------ -
------ -
------ -
--
--
-------- -
--------------- -
-------------
-
-
--
---------在上面的代码中，我们定义了一个 increaseCount 方法，它会将 count 的值加一。在模板中，我们使用 @click 指令来绑定 increaseCount 方法，当用户点击按钮时，increaseCount 方法会被调用，从而更新 count 的值。
计算属性
计算属性是 Vue.js 中的另一个常用功能，它也可以用来处理数据。计算属性可以接受参数，可以在模板中使用，但不能在 JavaScript 代码中调用。下面是一个简单的计算属性示例：
-- -------------------- ---- -------
----------
-----
-------- ----- -- --------- ------
------- ----- -- -------- ------
------- ----- -- -------- ------
------
-----------
--------
------ ------- -
------ -
------ -
---------- -------
--------- -----
--
--
--------- -
---------- -
------ -------------- - - - - --------------
-
-
--
---------在上面的代码中，我们定义了一个 fullName 计算属性，它会返回 firstName 和 lastName 的拼接结果。在模板中，我们使用 {{ fullName }} 插值表达式来显示 fullName 的值，当 firstName 或 lastName 的值发生改变时，fullName 的值也会自动更新。
区别及使用场景
方法和计算属性都可以用来处理数据，但是它们有一些区别。下面是它们的区别及使用场景：
区别
- 调用方式不同：方法可以在模板和 JavaScript 代码中调用，而计算属性只能在模板中使用。
- 缓存机制不同：方法每次调用都会重新执行，而计算属性会缓存计算结果，只有在依赖的数据发生改变时才会重新计算。
- 适用场景不同：方法适用于处理事件和异步操作，计算属性适用于处理视图中的数据计算。
使用场景
- 方法适用于处理事件和异步操作：如果需要在模板中处理用户事件或异步操作，可以使用方法来实现。例如，我们可以使用方法来处理按钮的点击事件，或者使用方法来处理异步请求的数据。
- 计算属性适用于处理视图中的数据计算：如果需要在模板中计算数据并显示结果，可以使用计算属性来实现。例如，我们可以使用计算属性来计算两个数的和、差、积或商，并将结果显示在模板中。
下面是一个示例代码，它演示了方法和计算属性的区别及使用场景：
-- -------------------- ---- -------
----------
-----
------- ------------------------------- --------------
--------- -- ----- ------
------- -- --- ------
------
-----------
--------
------ ------- -
------ -
------ -
------ --
-- --
-- -
--
--
-------- -
--------------- -
-------------
--
-------------- -
------ ------ - -------
-
--
--------- -
----- -
------ ------ - -------
-
-
--
---------在上面的代码中，我们定义了一个 increaseCount 方法来处理按钮的点击事件，它会将 count 的值加一。同时，我们定义了一个 calculateSum 方法来计算 a 和 b 的和，并在模板中使用它来显示结果。另外，我们还定义了一个 sum 计算属性来计算 a 和 b 的和，并在模板中使用它来显示结果。可以看到，使用方法和计算属性都可以实现计算 a 和 b 的和，并将结果显示在模板中，但是它们的调用方式、缓存机制和适用场景有所不同。
结论
在 Vue.js 中，方法和计算属性都可以用来处理数据，但是它们有一些区别。方法可以在模板和 JavaScript 代码中调用，每次调用都会重新执行，适用于处理事件和异步操作；而计算属性只能在模板中使用，会缓存计算结果，适用于处理视图中的数据计算。在实际开发中，我们可以根据具体的场景选择使用方法或计算属性来处理数据，以达到更好的效果。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6746d995e504cb428ec74ecd