前言
Vue.js 是当今最流行的前端框架之一，它提供了一套完整的响应式系统，使得前端开发人员能够更加高效地构建复杂的页面和应用程序。
在 Vue.js 中，我们经常需要监听某些数据的变化，并在数据变化时执行一些操作。这时，我们就可以使用 Vue.js 提供的 watch 功能。
本文将详细介绍 Vue.js 中使用 watch 监听数据的方法，包括 watch 的基本用法和进阶用法，以及如何使用 watch 来实现一些常见的应用场景。
watch 的基本用法
在 Vue.js 中，我们可以使用 $watch 方法来监听某个数据的变化。$watch 方法的基本语法如下：
vm.$watch(key, callback, [options])
其中，
- key 表示要监听的数据的键名，可以是一个计算属性或一个方法名；
- callback 是一个回调函数，当数据变化时会被调用；
- options 是一个可选的选项对象，用于指定 watch 的一些行为。
例如，假设我们有一个响应式对象 data，它包含一个名为 count 的属性，我们想要监听 count 的变化，可以这样写：
-- -------------------- ---- -------
--- ---- - - ------ - -
--- -- - --- -----
----- -----
------ -
------ -------- -------- ------- -
------------------ ---------- ------- ----- -------
-
-
--
---------- -- --- ----- -------- - -- -在这个例子中，我们通过在 Vue 实例中定义一个 watch 对象来监听 count 的变化。当 count 发生变化时，回调函数会被调用，其中参数 newVal 和 oldVal 分别表示 count 的新值和旧值。
watch 的进阶用法
除了基本用法之外，Vue.js 的 watch 还提供了一些进阶用法，让我们能够更加灵活地监听数据变化。
深度 watch
默认情况下，Vue.js 的 watch 只会监听被直接挂载在实例上的属性变化，而不会监听对象的深层属性变化。例如，假设我们有一个响应式对象 data，它包含一个名为 obj 的属性，其中又包含一个名为 value 的属性，我们想要监听 value 的变化，可以这样写：
-- -------------------- ---- -------
--- ---- - - ---- - ------ - - -
--- -- - --- -----
----- -----
------ -
------------ -------- -------- ------- -
---------------------- ---------- ------- ----- -------
-
-
--
-------------- -- -------在这个例子中，我们使用了字符串形式的表达式来监听 obj.value 的变化。但是，当我们修改 vm.obj.value 的值时，watch 回调却没有被触发，这是为什么呢？
这是因为默认情况下，Vue.js 的 watch 只会监听被直接挂载在实例上的属性变化，而不会监听对象的深层属性变化。如果我们要监听深层对象的属性变化，可以使用 deep 选项来实现。例如，我们可以这样修改代码：
-- -------------------- ---- -------
--- ---- - - ---- - ------ - - -
--- -- - --- -----
----- -----
------ -
------------ -
-------- -------- -------- ------- -
---------------------- ---------- ------- ----- -------
--
----- ----
-
-
--
-------------- -- --- --------- -------- - -- -在这个例子中，我们将 obj.value 的监听函数改为一个对象，其中包含 handler 和 deep 两个选项。其中，handler 表示回调函数，deep 表示是否要深度监听对象（true 表示是，false 表示否），这样就可以正常监听 obj.value 的变化了。
立即执行 watch
默认情况下，Vue.js 的 watch 回调函数是在下一次 数据更新 循环结束之后才执行的。例如，如果我们在 watch 回调函数中修改了数据，那么这个修改不会立即生效，而是要等到下一次循环才会生效。这样虽然保证了数据的稳定性，但也会带来一些不便。
如果我们想要在数据更新后立即执行 watch 回调函数，可以使用 immediate 选项来实现。例如，我们可以这样修改代码：
-- -------------------- ---- -------
--- ---- - - ------ - -
--- -- - --- -----
----- -----
------ -
------ -
-------- -------- -------- ------- -
------------------ ---------- ------- ----- -------
--
---------- ----
-
-
--
---------- -- --- ----- -------- - -- -在这个例子中，我们将 count 的监听函数改为一个对象，其中包含 handler 和 immediate 两个选项。其中，immediate 表示是否要立即执行回调函数，将其设置为 true 就可以实现立即执行了。
指定监听器的唯一标识符
在 Vue.js 中，如果我们在 watch 对象中定义了多个属性的监听函数，那么它们都会被合并成一个监听队列。如果我们不想让不同属性的回调函数混淆在一起，可以为每个回调函数指定一个唯一标识符。
例如，我们可以这样修改代码：
-- -------------------- ---- -------
--- ---- - - ---- -- ---- - -
--- -- - --- -----
----- -----
------ -
---- -
-------- -------- -------- ------- -
---------------- ---------- ------- ----- -------
--
--- -----
--
---- -
-------- -------- -------- ------- -
---------------- ---------- ------- ----- -------
--
--- -----
-
-
--
-------- -- --- --- -------- - -- -
-------- -- --- --- -------- - -- -在这个例子中，我们为 foo 和 bar 的监听函数各指定了一个唯一标识符（id），这样就可以让它们在监听队列中互相独立了。
实际应用场景
除了基本用法和进阶用法之外，Vue.js 的 watch 还可以实现许多实际的应用场景。下面，我们将介绍几个常见的应用场景，并演示如何使用 watch 来实现它们。
表单验证
表单验证是在前端开发中比较常见的一项任务。在 Vue.js 中，我们可以利用 watch 的特性来实现表单验证。
例如，假设我们有一个登录页面，其中包含一个用户名输入框和一个密码输入框。当用户名或密码不合法时，我们希望能够在页面上显示相应的错误信息。可以这样写：
-- -------------------- ---- -------
---- ---------
------
-----
------ ---------------------------
------ ----------- ------------- -------------------
----- -------------------------------------
------
-----
------ --------------------------
------ --------------- ------------- -------------------
----- ------------------------------------
------
-----
------- ------------- ------------------------------------
------
-------
-------- -------------------- ---- -------
--- -- - --- -----
--- -------
----- -
--------- ---
--------- --
--
------ -
--------- -------- -------- ------- -
-------------------- - -----------------------
--
--------- -------- -------- ------- -
-------------------- - -----------------------
-
--
--------- -
------------ -------- -- -
------ -------------------- -- --------------------
-
--
-------- -
---------------- -------- ---------- -
-- ---
--
---------------- -------- ---------- -
-- ---
-
-
--在这个例子中，我们利用 watch 进行了表单验证。当用户名或密码发生变化时，watch 回调函数会被触发，从而更新相应的验证状态（isUsernameValid 和 isPasswordValid）。同时，在 isFormValid 计算属性中，我们根据 isUsernameValid 和 isPasswordValid 的值来判断表单是否合法，从而确定提交按钮的状态。
节流和防抖
在前端开发中，我们经常需要对一些高频事件进行节流和防抖操作，以避免事件过于频繁而导致页面性能下降。
在 Vue.js 中，我们可以利用 watch 的特性来实现节流和防抖操作。例如，假设我们有一个输入框，当用户输入时需要发起网络请求，并在请求完成后更新页面数据。如果用户输入过快，可能会导致网络请求过多，这时我们可以使用节流和防抖来优化代码。
在下面的例子中，我们使用 lodash.js 库中的 _.throttle 和 _.debounce 函数来实现节流和防抖操作。但是，注意到 Vue.js 也提供了一个内置的 throttle 和 debounce 工具函数，分别是 $throttle 和 $debounce，可以直接使用。
<div id="app">
<label for="input">输入：</label>
<input type="text" id="input" v-model="value">
<div>结果：{{ result }}</div>
</div>-- -------------------- ---- -------
--- -- - --- -----
--- -------
----- -
------ ---
------- --
--
------ -
------ ------------------- -------- ------- -
-- ------
------------------- -- -
--------- - ------- - ------
-- -----
-- ----
-
--在这个例子中，我们使用 _.throttle 函数来对 value 进行节流操作。当用户输入时，watch 回调函数不会立即执行，而是等待 500 毫秒后才执行。如果用户一直在输入，watch 回调函数不会被频繁地调用，从而保证了页面性能。注意到上面的例子使用的是外部库Lodash.js，如果不引入就会报错，请不要吝啬自己哦~（卑微广告：如果您是Python爱好者，欢迎尝试我的BotStarAI!）
总结
在本文中，我们详细介绍了 Vue.js 中使用 watch 监听数据的方法，包括 watch 的基本用法和进阶用法，以及如何使用 watch 来实现一些常见的应用场景。通过学习本文，相信读者已经掌握了 Vue.js 中 watch 的相关技能，并能够在实际开发中灵活运用。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/652fba3e7d4982a6eb0e9607