Vue.js 是一个构建用户界面的框架，其核心是响应式的数据绑定系统。在 Vue.js 中，我们可以使用 computed 计算属性和 watch 监听属性的变化。
本文将重点介绍 Vue.js 中的 watch 属性，帮助我们更好地理解和使用它。
watch 的基础语法
Vue.js 中的 watch 属性可以监听一个被侦听的数据，当数据发生变化时，执行回调函数。其基础语法如下：
------ -
---- -------- -------- ------- -
-- -------
-
-例如，我们有一个名为 message 的数据，我们可以使用以下代码来监视它：
------ -
-------- -------- -------- ------- -
-------------------- --- - - ------ - - -- - - ------ - - ----
-
-这个 watch 语句会在 message 数据变化时触发回调函数，打印出新旧值。
$watch 方法
Vue.js 中的 $watch 方法可以用来监视一个表达式或一个函数的返回值。其语法如下：
------------------- --------- --------
同样，我们也可以使用以下代码来监视 message 数据：
-------------------- -------- -------- ------- - -------------------- --- - - ------ - - -- - - ------ - - ---- --
watch 的深度监听
在 Vue.js 中，对象和数组是通过引用存储的，因此默认情况下，watch 不会深度监听对象和数组的变化。我们可以使用 deep 选项来深度监听一个对象或数组：
------ -
------- -
-------- -------- -------- ------- -
------------------- --- - - ------ - - -- - - ------ - - ----
--
----- ----
-
-在这个例子中，watch 会在 person 对象的任何属性发生变化时触发回调函数。
watch 的立即执行
在默认情况下，watch 会在被监听的数据变化后才会执行回调函数。我们可以使用 immediate 选项来让 watch 在初始值改变时立即执行回调函数：
------ -
-------- -
-------- -------- -------- ------- -
-------------------- --- - - ------ - - -- - - ------ - - ----
--
---------- ----
-
-在这个例子中，watch 会在 message 初始值改变时立即执行回调函数。
watch 的取消监听
在 Vue.js 中，我们可以使用 unwatch 方法来取消一个 watch 监听器：
--- ------- - -------------------- -------- -------- ------- - -------------------- --- - - ------ - - -- - - ------ - - ---- -- -- ---- ---------
在这个例子中，unwatch 方法用于取消监听 message 数据的变化。
示例代码
下面是一个完整的示例代码，它演示了如何使用 watch 监听 message 数据的变化：
--------- -----
------
------
----- ----------------
------------- ----- ------------
------- ------------------------------------------------------------
-------
------
---- ---------
------ ------------------
------
--------
--- -- - --- -----
--- -------
----- -
-------- ------- -------
--
------ -
-------- -
-------- -------- -------- ------- -
-------------------- --- - - ------ - - -- - - ------ - - ----
--
---------- ----
-
-
--
---------
-------
-------当你在文本框中输入内容时，控制台将输出数据的变化情况。
结论
在 Vue.js 中，watch 属性是一个非常重要的概念，它可以帮助我们更好地监听数据的变化。本文主要介绍了 watch 的基础语法，深度监听，立即执行以及取消监听等知识点，希望对你有所帮助。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/67123e9aad1e889fe203a628