深度解析：Vue中watch用法全揭秘，从基础到深度监听！

Vue中的watch是用于监听数据变化的方法，当数据发生变化时，watch会执行相应的回调函数。 watch的使用方法如下： ```javascript Vue.prototype.$watch = function (path, handler, options) { if (options === void 0) options = {}; var vm = this; var handlerFn = handler; if (typeof handler === 'function') { handlerFn = handler.bind(vm); } var unwatch = vm.$watch(path, function (newVal, oldVal) { handlerFn(newVal, oldVal); }, options); return function () { unwatch(); }; }; ``` 其中，path参数是要监听的数据的路径，handler参数是当数据发生变化时要执行的回调函数，options参数是可选的配置对象，可以设置一些选项，例如deep、immediate等。 watch的使用示例如下： ```javascript var vm = new Vue({ data: { message: 'Hello Vue!' }, watch: { message: function (newVal, oldVal) { console.log('Message was updated from', oldVal, 'to', newVal); } } }); ``` 在这个示例中，当message数据发生变化时，会执行回调函数，并打印出新的值和旧的值。 watch还可以设置deep选项，用于深度监听嵌套对象的变化。例如： ```javascript var vm = new Vue({ data: { user: { name: 'John', age: 30 } }, watch: { user: { handler: function (newVal, oldVal) { console.log('User data was updated'); }, deep: true } } }); ``` 在这个示例中，当user对象的任何属性发生变化时，都会执行回调函数。 ######[AI写代码神器 | 388点数解答 | 2023-11-09 01:34:29]