Vue.js 是一个流行的前端框架，它提供了丰富的工具和组件，使得开发前端应用变得更加简单和高效。其中，watch 监听器是 Vue.js 的一个重要功能之一，它能够用来监听对象或数组的变化，从而在变化发生时触发相应的操作。
监听对象变化
Vue.js 中的监听器是通过 $watch API 来实现的。它可以在组件实例中使用，也可以在 Vue 实例中使用。如果想要监听一个对象的变化，可以使用以下方法：
-- -------------------- ---- -------
------ ------- -
---- -- -
------ -
------- -
----- --------
---- --
-
-
--
------ -
-------------- -------- ----- ------- -
------------------ ------- ----- ----
--
------------- -------- ----- ------- -
------------------ ------- ----- ----
-
-
-这里，我们监听了 person 对象的 name 和 age 两个属性。当任意一个属性发生变化时，都会触发相应的回调函数。回调函数中的参数 val 表示属性的新值，oldVal 表示属性的旧值。
监听数组变化
如果想要监听一个数组的变化，可以使用以下方法：
-- -------------------- ---- -------
------ ------- -
---- -- -
------ -
-------- --- -- --
-
--
------ -
-------- -
-------- -------- ----- ------- -
------------------ ------- ----- ----
--
----- ----
-
-
-这里，我们监听了 numbers 数组的变化。当数组中有元素被添加、删除、修改时，都会触发相应的回调函数。handler 回调函数中的参数 val 表示数组的新值，oldVal 表示数组的旧值。
需要注意的是，如果想要监听数组中的每个元素的变化，需要设置 deep 选项为 true。这时，Vue.js 会深度遍历整个数组，监听每个元素的变化。但是，这会带来性能问题，不建议在大型数组中使用。
总结
Vue.js 的 watch 监听器是一个非常强大的功能。它可以帮助我们实时监测对象和数组的变化，从而更加精细地控制应用的状态。但是，过度使用监听器会带来性能问题，需要根据实际情况选择合适的监听方式。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64701d6e968c7c53b0e41616