Vue.js 是一个流行的 JavaScript 前端框架，它提供了一种响应式的数据绑定机制，使得开发者可以更加方便地管理和更新数据。在 Vue.js 中，我们可以使用 $watch 来监听数据的变化，从而触发相应的操作。
$watch 的基本用法
$watch 是 Vue.js 中的一个实例方法，它可以用来监听某个数据的变化。它的基本用法如下：
vm.$watch('dataName', function(newValue, oldValue) {
// 在数据变化时执行的操作
})其中，vm 是 Vue 实例，dataName 是要监听的数据的名称，newValue 和 oldValue 分别是数据变化前后的值。
下面是一个简单的示例，演示了如何使用 $watch 监听数据变化：
-- -------------------- ---- -------
---- ---------
----- ------- ------
------- ------------------------------------
------
--------
--- -- - --- -----
--- -------
----- -
-------- ------ --------
--
-------- -
-------------- ---------- -
------------ - ------ -------
-
-
--
-------------------- ------------------ --------- -
-------------------- - -------- - - -- - - ---------
--
---------在这个示例中，我们定义了一个 Vue 实例 vm，它包含一个 message 属性和一个 updateMessage 方法。当用户点击“更新消息”按钮时，updateMessage 方法会将 message 属性的值改为“Hello World!”，从而触发 $watch 方法中的回调函数，将旧值和新值输出到控制台。
监听对象的变化
除了监听简单的数据类型外，$watch 还可以监听对象的变化。在这种情况下，我们需要使用深度监听选项 deep，以便监听对象内部属性的变化。
vm.$watch('obj', callback, {
deep: true
})下面是一个示例，演示了如何使用 $watch 监听对象的变化：
-- -------------------- ---- -------
---- ---------
----- --------- ------
----- -------- ------
------- -----------------------------------
------
--------
--- -- - --- -----
--- -------
----- -
----- -
----- ------
---- --
-
--
-------- -
----------- ---------- -
-------------- - -------
------------- - --
-
-
--
----------------- ------------------ --------- -
-------------------- - ------------------------ - - -- - - -------------------------
-- -
----- ----
--
---------在这个示例中，我们定义了一个 user 对象，包含 name 和 age 两个属性。当用户点击“更新用户信息”按钮时，updateUser 方法会将 user 对象的属性值分别改为“Jerry”和 20，从而触发 $watch 方法中的回调函数，将旧值和新值输出到控制台。
监听数组的变化
除了监听对象的变化外，$watch 还可以监听数组的变化。在这种情况下，我们需要使用数组变异方法来修改数组，以便触发监听器。
vm.$watch('array', callback)下面是一个示例，演示了如何使用 $watch 监听数组的变化：
-- -------------------- ---- -------
---- ---------
----
--- ----------- -- --------- ---- -------
-----
------- ----------------------------------
------
--------
--- -- - --- -----
--- -------
----- -
------ --- -- -- -- --
--
-------- -
------------ ---------- -
-------------------- -- -- --
-
-
--
------------------ ------------------ --------- -
-------------------- - ------------------------ - - -- - - -------------------------
--
---------在这个示例中，我们定义了一个 array 数组，包含 1 到 5 五个元素。当用户点击“更新数组”按钮时，updateArray 方法会使用 splice 方法将数组中第三个元素（即 3）替换为 6 和 7 两个元素，从而触发 $watch 方法中的回调函数，将旧值和新值输出到控制台。
总结
$watch 是 Vue.js 中非常重要的一个方法，它可以用来监听数据的变化，从而触发相应的操作。在使用 $watch 时，需要注意以下几点：
- $watch 可以监听简单的数据类型，也可以监听对象和数组的变化。
- 监听对象和数组的变化时，需要使用深度监听选项 deep。
- 监听数组的变化时，需要使用数组变异方法来修改数组，以便触发监听器。
希望这篇文章能够帮助你更好地理解和使用 Vue.js 中的 $watch 方法。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/66183724d10417a22285f79f