在 Vue 中使用 Watch 可以非常方便地监测数据变化并进行相应的操作。本文将会详细介绍 Watch 的使用方法以及一些注意事项。
Watch 的基本用法
在 Vue 实例的 data 中定义一个初始值，然后在 watch 中对此值进行监测：
-- -------------------- ---- -------
--- -----
----- -
-------- -------
--
------ -
-------- ---------------- ------- -
-------------------- ------- ---- - - ------ - - -- - - -------
-
-
--上述代码中，我们通过 watch 监测 message 的变化。当 message 发生变化时，watch 中的回调函数将会被执行。
Watch 的高级用法
在上述例子中，watch 的回调函数中只使用了 newVal 和 oldVal。除此之外，回调函数还可以接收三个参数：immediate，deep，handler。
immediate
如果希望在创建 Vue 实例时立即执行一次 watch 回调函数，可以将 immediate 属性设置为 true。
-- -------------------- ---- -------
--- -----
----- -
-------- -------
--
------ -
-------- -
---------- -----
-------- ---------------- ------- -
-------------------- ------- ---- - - ------ - - -- - - -------
-
-
-
--deep
当数据变化是引用类型的数据（比如数组、对象）时，如果需要深层监测数据变化，可以将 deep 属性设置为 true。
-- -------------------- ---- -------
--- -----
----- -
---- --- -- --
--
------ -
---- -
----- -----
-------- ---------------- ------- -
---------------- ------- ---- - - ------ - - -- - - -------
-
-
-
--handler
handler 属性指定 watch 的回调函数，如果回调函数非常复杂，可以将它单独定义。这样可以使代码逻辑更加清晰。
-- -------------------- ---- -------
--- -----
----- -
-------- -------
--
------ -
-------- ---------------
--
-------- -
-------------- ---------------- ------- -
-------------------- ------- ---- - - ------ - - -- - - -------
-
-
--Watch 的使用注意事项
在使用 Watch 时，需要注意一些细节问题：
- 避免在回调函数中修改监测的数据，这会导致无限循环的情况发生。
- 在监听数组或对象时，需要使用深度监测，否则监测的变化是无法触发的。
- 如果需要在 Vue 实例销毁时取消 Watch，可以使用
unwatch方法，但是在 Vue 版本 2.0 之后，unwatch方法已被废弃，可以使用$watch方法并保存返回的句柄，在需要取消 Watch 时使用句柄即可。
Watch 的应用实例
在实际的项目中，Watch 可以帮助我们实现一些非常便捷的功能。这里简单举一个例子。当我们需要在用户输入内容时，实时地将内容转换为大写显示时，可以使用 Watch 来实现：
-- -------------------- ---- -------
----------
------ ------------------
-------------------------------
-----------
--------
------ ------- -
------ -
------ -
-------- --
-
--
--------- -
------------------ -
------ --------------------------
-
--
------ -
------------ -
------------ - -----------------
-
-
-
---------上述代码中，在实现大写转换的计算属性 uppercaseMessage 中，我们仅仅是将用户输入的内容转换为大写字母。而在 Watch 的回调函数中，我们将用户输入的内容直接改写为了大写字母。这样，用户输入的内容永远都是大写的。这个例子仅仅是为了让大家更好地理解 Watch 的使用，实际上，这个场景完全可以通过计算属性完成，无须使用 Watch。
总结
Watch 是 Vue 中非常重要的一个特性，它可以帮助我们方便地监测数据变化。在使用 Watch 时，需要注意一些细节问题，避免可能产生的无限循环等问题。在实际开发中，Watch 可以帮助我们实现一些非常便利的功能。为了让代码更加清晰易懂，我们可以将 Watch 的回调函数单独定义，并在 watch 中调用。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/645adec9968c7c53b0d2ae21