Vue.js 中 computed 和 watch 的区别及运用场景
在 Vue.js 中，computed 和 watch 是两个非常重要的属性。它们都可以监听数据的变化，但它们的用途和运用场景不同。在本文中，我们将会深入探讨 computed 和 watch 的区别以及它们各自的使用场景，并通过示例代码来说明它们的具体使用方法。
- computed
computed 属性用来计算派生数据，可以依赖其他数据的变化而自动更新视图。computed 应该是纯函数，也就是说，computed 的值只能由 computed 中的其他属性计算而来，不能修改其它的数据。这样可以确保 computed 代码的可靠性和可预测性。
使用 computed 的场景：
- 对于需要动态计算的数据，比如列表的筛选、排序等，可以使用 computed 来处理。
- 如果一个数据的值需要基于多个数据计算才能得出，也应该使用 computed 来处理。
示例代码：
-- -------------------- ---- -------
----------
-----
------ ----------- ---------------------
----
--- ----------- -- ---------------- ---- -------
-----
------
-----------
--------
------ ------- -
------ -
------ -
----- --------- --------- ----------
----------- --
-
--
--------- -
-------------- -
------ --------------------- -- -
------ ----------------------------- --- --
--
-
-
-
---------运行效果：在输入框中输入文字，就可以动态筛选出包含该文字的水果。
- watch
watch 属性用来观察数据的变化，当数据发生变化时，会执行对应的方法。watch 用来监听数据的变化，是响应性编程的重要工具。
使用 watch 的场景：
- 监听一个数据的变化并进行一些操作，比如在某个数据发生变化后发送一个请求或更新本地存储等。
- 监听组件中的路由变化，根据路由参数获取数据并更新视图。
示例代码：
-- -------------------- ---- -------
----------
-----
------------------
------ ------------- ---------- -----------------------
------
-----------
--------
------ ------- -
------ -
------ -
-------- ------ ------
-
--
-------- -
--------------- -
------------ - --------
-
--
------ -
----------------- --------- -
----------------------------------------------
-
-
-
---------运行效果：点击按钮可以改变 message 的值，并且在控制台上会输出新旧值。
总结
通过本文的介绍，我们可以看到，computed 和 watch 都有自己的特点和运用场景。在实际开发中，要根据具体的需求来选择使用哪个属性。同时，在编写代码时，应该遵循 Vue.js 的响应式规则，保证代码的可靠性和性能的高效性。
参考文献
- Vue.js官方文档 https://cn.vuejs.org/v2/guide/computed.html#%E8%AE%A1%E7%AE%97%E5%B1%9E%E6%80%A7
- Vue.js官方文档 https://cn.vuejs.org/v2/guide/computed.html#%E5%AE%9E%E4%BE%8B%E5%A4%9A%E4%B8%AA%E8%AE%A1%E7%AE%97%E5%B1%9E%E6%80%A7
- Vue.js官方文档 https://cn.vuejs.org/v2/guide/watch.html#%E7%9B%91%E5%90%AC%E5%8D%95%E4%B8%AA%E5%A4%9A%E7%9A%84%E5%AD%97%E6%AE%B5%EF%BC%88%E6%B3%A8%E6%84%8F%E5%A4%9A%E6%AC%A1%EF%BC%89
- Vue.js官方文档 https://cn.vuejs.org/v2/guide/watch.html#%E5%A4%84%E7%90%86%E5%A4%8D%E5%90%88%E5%B1%9E%E6%80%A7
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6470842e968c7c53b0ea6206