Vue.js 是一款流行的前端框架，它可以通过数据绑定实现数据与视图的同步更新。Vue.js 中的 computed 和 watch 是两种重要的数据监听方式，本文将详细解释它们的原理、用法以及应用案例。
computed
computed 是一种计算属性，它会根据其依赖的属性进行计算，并返回一个新的值。computed 的用法如下：
--- -----
--------- -
-- -- ------------- --------- - --------
--------- -------- -- -
------ -------------- - - - - -------------
-
-
--在上面的示例中，fullName 的值是通过计算得到的，它依赖于 firstName 和 lastName 两个属性。computed 在以下情况下会被调用：
- 当计算属性第一次被访问时
- 当计算属性所依赖的属性发生改变时
computed 在处理简单的计算时非常方便，它可以将重复的代码封装成一个函数，使得代码更加简洁易读。同时，computed 的数据是可以缓存的，当 computed 所依赖的属性没有发生改变时，计算结果会被缓存起来，这样可以提高应用的性能。
watch
watch 是一种监听属性的方式，它会根据其所监听的属性发生改变时执行相应的操作。watch 的用法如下：
--- -----
------ -
-- - --------- ---------
---------- -------- -------- ------- -
---------------------- ------- ------ ------- ----- -------
-
-
--在上面的示例中，当 firstName 改变时，会调用一个函数并打印信息。watch 也可以监听一个对象中的属性，甚至可以监听一个数组的变化。
使用 watch 的场景包括：
- 监听某个数据的变化，然后执行一些操作；
- 处理一些异步操作，例如通过 AJAX 获取数据，然后更新视图；
- 监听数组变化，然后对数组进行操作。
需要注意的是，watch 不适合处理复杂的计算，如果需要进行计算，应该使用 computed。
应用案例
下面是一个应用案例，它演示了如何使用 computed 和 watch 对数据进行处理：
---- --------- ---------- -------- ------ ---------------- ---- ---------- -------- ------ ------------------ ---- ------ ------------------ ------
--- -----
--- -------
----- -
------ ---
-------- --
--
--------- -
----------- -------- -- -
------ ----------------------- - ----------------------------- - ---------------
-
--
------ -
------ -------- -------- ------- -
------------------ ------- ------ ------- ----- --------
--
-------- -------- -------- ------- -
-------------------- ------- ------ ------- ----- --------
-
-
--在上面的应用案例中，用户可以输入价格和税率，然后计算出总价。其中，computed 用来计算总价，watch 用来监听 price 和 taxRate 的变化。当 price 或 taxRate 发生变化时，Vue.js 会自动重新计算 totalPrice 并更新视图。同时，watch 回调函数中打印出了价格和税率的变化信息。
总结
本文详细介绍了 Vue.js 中的 computed 和 watch 两种数据监听方式。computed 可以用来处理简单的计算，watch 可以用来监听属性的变化。通过应用案例介绍了它们的用法和应用场景，并给出了示例代码。在实际开发中，应根据具体需求选择合适的数据监听方式，以优化应用性能并提高开发效率。
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/652b5fc87d4982a6ebd5083a