在 Vue 中，$watch 是一个非常重要的方法，它可以用来监听一个数据的变化，并且触发特定的回调函数。$watch 方法的语法如下：
---------- --------- ------ - --------- --------- --------- --------- ------ -- --------
其中，exprOrFn 可以是一个字符串，表示监听的数据路径；也可以是一个函数，用来监听一个表达式。callback 是一个回调函数，当监听的数据变化时，该函数会被触发。options 是一个可选的配置对象，用来设置一些 $watch 的选项。
$watch 的基本用法
假设我们有一个数据对象：
--- ---- - - ----- ------ ---- -- -
我们可以使用 $watch 方法来监听这个数据的变化：
--- -- - --- ----- --- ------- ----- ---- --- ---------------- -------- -------- ------- - ---------------- --------- ------- ----- -------- --
在上面的代码中，我们使用 $watch 方法来监听 data 对象中的 age 属性，当 age 属性变化时，会触发回调函数，并打印出变化前后的值。
$watch 的深度监听
$watch 方法还支持深度监听，可以监听对象或数组内部的变化。例如：
---------------- -------- -------- ------- - ---------------- --------- ------- ----- -------- -- - ----- ---- -- ---------------- -------- -------- ------- - ---------------- --------- ------- ----- -------- -- - ----- ---- --
在上面的代码中，我们分别监听了一个对象和一个数组的变化，并开启了深度监听。
$watch 的使用场景
$watch 方法的使用场景非常多，下面列举一些常用的情况：
监听路由变化
在 Vue 中，我们可以使用 vue-router 来管理路由。当我们在路由之间切换时，有时需要在当前路由发生变化时做一些操作，比如更新页面标题。这时，就可以使用 $watch 来监听路由变化：
------------------- -------- -------- ------- - -------------- - ------------------ --
在上面的代码中，我们使用 $watch 来监听 $route 变量的变化，当路由发生变化时，会触发回调函数，并更新页面标题。
双向绑定需求
当我们在 Vue 中使用双向绑定时，有时需要在数据变化的同时，做一些额外的操作，比如更新其他相关的数据。这时，就可以使用 $watch 来监听数据变化：
----------
-----
------ ---------------
------- ------- --------
------
-----------
--------
------ ------- -
------ -
------ -
----- --------
-------- --
-
--
------ -
------------ ------- -
------------ - ------- - -------
-
-
-
---------在上面的代码中，我们在 data 中定义了两个数据 text 和 newText，其中 text 是一个双向绑定的数据。在 watch 中，我们监听了 text 的变化，当 text 发生变化时，会触发回调函数，并更新 newText 的值。
监听表单变化
有时我们需要在表单填写完成后，对表单数据进行一些操作。这种情况下，就可以使用 $watch 来监听表单数据的变化：
----------
-----
------ ---------------
------ --------------
------
-----------
--------
------ ------- -
------ -
------ -
----- ---
---- --
-
--
------ -
------------ ------- -
-------------------- --------
--
----------- ------- -
------------------- --------
-
-
-
---------在上面的代码中，我们监听了两个表单数据 name 和 age 的变化，并在回调函数中打印出了数据的值。
总结
$watch 方法是 Vue 中非常重要的一个方法，可以用来监听数据的变化，并在变化时触发特定的回调函数。它可以监听简单的数据，也可以监听对象和数组的变化。$watch 方法在开发过程中非常常用，可以用来解决各种问题。
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/653741897d4982a6ebfb615f