在前端开发中，实时更新页面是一个常见的需求。虽然 Vue.js 的响应式系统可以自动监听数据变化并更新页面，但有些情况下我们需要手动监听数据变化并进行一些操作，比如在数据变化时发起网络请求或者执行一些动画效果等。
在 Vue.js 中，我们可以使用 watch 选项来实现手动监听数据变化。watch 会监视一个表达式的变化，当该表达式的值变化时就会执行对应的回调函数。下面我们就一起来学习一下如何使用 Vue.js 中的 watch 选项实现页面实时更新。
基本使用
在 Vue.js 中，我们可以通过 watch 选项来监听一个数据的变化。watch 接受两个参数，第一个参数是要监视的数据的名称或表达式，第二个参数是一个回调函数，当该数据变化时就会执行这个回调函数。下面是一个基本的示例：
-- -------------------- ---- -------
----------
-----
------ ----------------- --
----- ------- ------
------
-----------
--------
------ ------- -
------ -
------ -
-------- ---
--
--
------ -
--------------- ------- -
-------------------- ------- ------ ------- ----- --------
--
--
--
---------在这个示例中，我们在 input 标签中绑定了 message 变量，并在 p 标签中展示了该变量。在 watch 中，我们监听了 message 变量的变化，并在控制台中输出了变化前后的值。
深度监听
在 Vue.js 中，有些数据类型是无法自动检测到其变化的，比如对象和数组。在这种情况下，我们需要使用深度监听来监听对象和数组的变化。Vue.js 提供了 deep 选项来实现深度监听。下面是一个深度监听的示例：
-- -------------------- ---- -------
----------
-----
------ --------------------- --
------ -------------------- --
----- ------ ------
------
-----------
--------
------ ------- -
------ -
------ -
------- -
----- ---
---- --
--
--
--
------ -
------- -
----- -----
--------------- ------- -
------------------- ------- ------ ------- ----- --------
--
--
--
--
---------在这个示例中，我们在 input 标签中分别绑定了 person 对象下的 name 和 age 变量，并在 p 标签中展示了整个 person 对象。在 watch 中，我们监听了 person 对象的变化，并使用了 deep 选项来实现深度监听。
立即执行
默认情况下，watch 回调函数会在数据变化之后才会执行。如果我们希望在数据变化时立即执行回调函数，可以使用 immediate 选项。下面是一个立即执行的示例：
-- -------------------- ---- -------
----------
-----
------ ----------------- --
----- ------------- ------
------
-----------
--------
------ ------- -
------ -
------ -
-------- ---
-------------- --
--
--
------ -
-------- -
---------- -----
--------------- ------- -
------------------ - --------------
--
--
--
--
---------在这个示例中，我们绑定了 message 变量，并在 p 标签中展示了该变量的长度。在 watch 中，我们使用了 immediate 选项来立即执行回调函数，并在回调函数中计算了 message 变量的长度并赋值给了 messageLength 变量。
总结
在 Vue.js 中，watch 选项可以用来手动监听数据变化，从而实现页面实时更新。通过 watch 选项的基本使用、深度监听和立即执行等特性，我们可以更灵活地控制页面的更新。如果你想进一步学习 Vue.js 的高级特性，建议多看官方文档并进行实际操作。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64c8741d5ad90b6d0413a5e6