在 Vue.js 中，computed 和 watch 是两个重要的特性，它们提供了一种便捷的方式来处理数据变化的情况。本文将分别介绍 computed 和 watch 的使用场景、优缺点以及示例代码。
computed
computed 是一个计算属性，它是 Vue.js 中的一个非常有用的特性。它可以根据已有的数据计算出新的数据，并且当数据变化时自动更新。computed 可以看作是一个函数，它的返回值会被缓存，只有当依赖的数据发生变化时才会重新计算。
使用场景
computed 的使用场景非常广泛，可以用来计算任何数据。以下是一些常见的使用场景：
- 计算两个数的和、差、积、商等。
- 根据数据的状态计算出一些状态值，如是否选中、是否可用等。
- 根据数据的变化计算出一些动态的样式、类名等。
- 根据数据的变化计算出一些动态的文本、标题等。
优缺点
computed 的优点在于它具有缓存机制，只有在依赖的数据发生变化时才会重新计算，因此可以提高性能。此外，computed 的代码可读性较高，可以更加清晰地表达出计算的逻辑。
但是，computed 也存在一些缺点。由于 computed 是基于依赖的数据进行计算的，因此当依赖的数据发生变化时，computed 会被重新计算，这可能会导致一些不必要的计算。此外，当 computed 的计算逻辑比较复杂时，可能会影响页面的渲染速度。
示例代码
以下是一个计算两个数的和的示例代码：
-- -------------------- ---- -------
----------
-----
------ ------------- ---------------
------ ------------- ---------------
-------- -----------
------
-----------
--------
------ ------- -
------ -
------ -
----- --
----- -
-
--
--------- -
----- -
------ --------- - ---------
-
-
-
---------watch
watch 是一个观察者，它可以观察某个数据的变化，并在数据变化时执行一些操作。watch 可以看作是一个函数，它接收两个参数，第一个参数是要观察的数据，第二个参数是数据变化时要执行的操作。
使用场景
watch 的使用场景较为灵活，可以用来处理任何数据变化的情况。以下是一些常见的使用场景：
- 监听数据的变化，执行一些操作，如发送网络请求、更新本地存储等。
- 监听数据的变化，更新其他数据，如计算出另一个数据的值、更新另一个组件的状态等。
- 监听数据的变化，执行一些动画、样式等效果。
优缺点
watch 的优点在于它可以监听任何数据的变化，并在数据变化时执行一些操作。此外，watch 的代码可读性较高，可以更加清晰地表达出逻辑。
但是，watch 也存在一些缺点。由于 watch 是基于数据的变化进行操作的，因此可能会导致一些不必要的操作。此外，当 watch 的操作逻辑比较复杂时，可能会影响页面的渲染速度。
示例代码
以下是一个监听数据变化并更新其他数据的示例代码：
-- -------------------- ---- -------
----------
-----
------ ------------- --------------
------ --------------
------
-----------
--------
------ ------- -
------ -
------ -
---- --
------- -
-
--
------ -
----- -
----------- - -------- - --------
-
-
-
---------结论
在实际开发中，computed 和 watch 都有着各自的优缺点，需要根据具体的情况来选择使用哪个。一般来说，computed 适用于计算数据的场景，watch 适用于监听数据变化并执行一些操作的场景。在使用时需要注意，不要滥用 computed 和 watch，以免影响页面的渲染速度和性能。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/675c41b9e5138b922281408c