Vue.js 是一个流行的前端框架，它提供了多种方法来处理数据，在这些方法中，watch 是一种非常有用的方法，它可以监听数据的变化并执行相关的操作。本文将介绍如何使用 watch，并探讨它在实际开发中的应用场景。
watch 的基本用法
在 Vue 实例中使用 watch，可以通过将一个函数作为响应式数据的参数来定义一个 watcher。watcher 将会监听该数据的变化，并在数据变化时执行相应的操作。下面是一个简单的示例代码：
--- -----
----- -
--------- ------- -------
--
------ -
--------- -------- -------- ------- -
--------------------- ------- ---- --------- -- ------------
-
-
---在这个例子中，我们定义了一个 Vue 实例，并在其 data 中定义了一个字符串型变量 greeting。在 watch 中定义了一个 watcher，当 greeting 数据发生变化时，watcher 的回调函数将会被执行。在本示例中的回调函数中，我们通过 console.log 输出了 greeting 变化前后的值。
需要注意的是，watch 的回调函数中有两个参数，分别代表了新的和旧的变量值。这样我们就可以在回调函数中对这两个值进行比较，并执行相应的操作。
watch 的深度监听
默认情况下，watch 只会监听对象或数组的引用变化。也就是说，如果我们对数组或对象的某一项进行修改，watcher 并不会监听到这个变化。为了使 watch 监听对象或数组中的变化，我们需要将其设置为深度监听。
在 Vue 中，我们可以设置一个 boolean 值来控制是否进行深度监听：
--- -----
----- -
--------- -
----- -------
---- --
-
--
------ -
--------- -
----- -----
-------- -------- -------- ------- -
--------------------- ----------
-
-
-
---在这个例子中，我们将 deepData 设置为深度监听。在 watch 的回调函数中，如果没有使用 deep: true，那么只有当 deepData 这个对象本身的引用发生变化时，watcher 才会被触发。但是设置了 deep: true 之后，如果 deepData 中的某个属性值发生变化，watcher 也会被触发。在回调函数中，我们只需要对 deepData 所有的属性做相应的操作即可。
watch 的应用场景
watch 的应用场景非常广泛，下面我们将介绍几个常见的应用场景。
表单数据校验
在一个表单中，如果有多个输入框需要进行数据校验，我们可以将这些输入框的值绑定到同一个对象中，并使用 watch 来监听这个对象的变化。这样，当输入框的值被修改时，watch 回调函数将会被执行，我们可以在回调函数中对输入框的值进行校验，并相应地显示错误信息。
----------
-----
------ --------------------
------ -------------------
---- ----------------- ----- --------
------
-----------
--------
------ ------- -
---- -- -
------ -
----- -
----- ---
---- --
--
------ --
--
--
------ -
----- -
----- -----
-------- -------- -------- ------- -
-- -------------- -
---------- - ------- ----- ---- ------
- ---- -- --------------------------- -
---------- - ------- ----- - ----- -----
- ---- -
---------- - ---
-
-
-
-
--
---------在这个例子中，我们将两个输入框的值绑定到了 user 对象中，并使用 watch 来监听它的变化。在回调函数中，我们根据输入框的值对 error 变量进行赋值，并在模板中使用 v-show 来控制错误信息的显示和隐藏。
异步操作
在开发中，有时候我们需要执行一些异步操作，比如从服务器获取数据或者保存数据。这些异步操作会产生延迟，并且可能会出现错误。为了处理这些异步操作，我们可以使用 watch。
----------
-----
------ ----------------
------- ---------------------------
------
-----------
--------
------ ------- -
---- -- -
------ -
------ ---
------- -----
--
--
------ -
------ -
-------- -------- -------- ------- -
----------- - -----
------------- -- -
------------------- ------------
----------- - ------
-- ------
-
-
--
-------- -
----- -------- -- -
----------- - -----
------------- -- -
------------------- ----------------
----------- - ------
-- ------
-
-
--
---------在这个例子中，我们有一个输入框和一个保存按钮。将输入框的值绑定到了 input 变量中，并使用 watch 来监听它的变化。当我们在输入框中输入内容时，watch 回调函数将会执行，我们使用 setTimeout 来模拟一个异步操作，并在执行完成后修改 saving 变量的值。
此外，我们还可以在保存按钮的 click 事件中编写保存操作的代码，并在代码执行完成后修改 saving 的值。这样，当我们点击保存按钮时，保存操作将会立即执行，并且不受异步操作的影响。
总结
watch 是一个非常有用的方法，它可以监听响应式数据的变化，并在数据变化时执行相应的操作。在 Vue.js 中，我们可以通过设置 deep: true 来进行深度监听，也可以在 watch 的 handler 回调函数中执行异步操作。除此之外，watch 还可以用于表单数据校验和其他多种应用场景。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/6646039fd3423812e4413d7e