在 Vue.js 中，我们可以使用 watch 来监听数据的变化，从而在数据变化时执行一些操作。本文将详细介绍 Vue.js 中 watch 的使用方法，并提供示例代码，帮助读者更好地理解和使用该功能。
watch 的基本用法
在 Vue.js 中，我们可以使用 watch 来监听一个数据的变化。watch 的基本用法如下：
watch: {
myData: function (newValue, oldValue) {
// 在 myData 变化时执行的操作
}
}在上面的代码中，我们通过 watch 监听了一个名为 myData 的数据。当 myData 发生变化时，会执行一个回调函数，该回调函数的第一个参数为新的值，第二个参数为旧的值。
如果我们想要监听多个数据，可以使用对象的方式：
-- -------------------- ---- -------
------ -
-------- -------- ---------- --------- -
-- - ------- --------
--
-------- -------- ---------- --------- -
-- - ------- --------
--
-- ---
-watch 的深度监听
在默认情况下，watch 只会监听数据的第一层变化。如果我们要监听一个对象或数组内部的变化，可以使用深度监听。如下：
watch: {
myData: {
handler: function (newValue, oldValue) {
// 在 myData 变化时执行的操作
},
deep: true
}
}在上面的代码中，我们通过 deep: true 来开启了深度监听。这样，当 myData 内部的数据发生变化时，也会触发回调函数。
watch 和 computed 的区别
在 Vue.js 中，除了 watch，还有一个功能类似的概念，那就是 computed。它们的区别在于：
- computed 适用于计算一个新的值，而 watch 适用于在数据变化时执行一些操作。
- computed 只有在依赖的数据变化时才会重新计算新的值，而 watch 每次数据变化都会执行回调函数。
因此，如果需要计算一个新的值并将其绑定到模板中，应该使用 computed；如果需要在数据变化时执行一些操作，应该使用 watch。
watch 的使用示例
下面是一个使用 watch 监听数据变化的示例：
-- -------------------- ---- -------
----------
-----
------ -------------- --
----- -------- ------
------
-----------
--------
------ ------- -
------ -
------ -
----- ---
--------- --
-
--
------ -
----- -------- ---------- --------- -
------------- - ------- -------------
-
-
-
---------在上面的代码中，我们监听了一个名为 name 的数据。当 name 发生变化时，我们通过回调函数将新的值拼接成一个问候语，并将其赋值给 greeting。最终，在模板中显示出来。
总结
本文介绍了 Vue.js 中使用 watch 监听数据变化的方法，包括基本用法、深度监听、与 computed 的区别以及使用示例。通过学习本文，读者可以更好地使用 watch 功能，提高 Vue.js 应用程序的开发效率。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/658e850eeb4cecbf2d468303