Vue的watch调用情况详解_最核心的功能呢_watch是在什么时候被调用的

作者：网络发烧程序猿 | 发布时间：2025-06-20 |

当你在Vue组件里定义一个watcher去监视某个数据属性，一旦这个属性的值发生变化，watcher就会跳出来工作。这可是watch最核心的功能呢！来看看个例子：

``` data() { return { message: 'Hello' }; }, watch: { message(newVal, oldVal) { console.log(`旧值：${oldVal}，新值：${newVal}`); } } ```

在这个例子中，每当你改变`message`的值，控制台就会显示出来旧值和新值。

Vue的watch也能在组件第一次渲染时被触发。如果你把watch的选项设置为`immediate`，那么无论数据是否变化，组件渲染时watcher都会执行。这对于需要加载时就执行某些逻辑来说非常实用。看看这个例子：

``` data() { return { initialized: false }; }, watch: { initialized() { console.log('组件渲染完毕'); }, immediate: true } ```

在这个例子中，即使`initialized`的值没有变化，组件加载完成后也会执行watcher。

当需要监视一个对象的内部属性变化时，深度监听就派上用场了。通过将watch的选项设置为`deep`，你可以监视对象内部任意属性的变化。例如：

``` data() { return { obj: { name: 'Vue' } }; }, watch: { obj: { handler(newVal, oldVal) { console.log('obj内部属性变化了'); }, deep: true } } ```

在这个例子中，无论`obj`的哪个属性发生变化，watcher都会被触发。

除了上面说的三种情况，Vue的watch还有一些常见的用途，比如：

比如，你可以这样使用watch结合异步操作：

``` data() { return { keyword: '' }; }, watch: { keyword: debounce(function() { // 执行异步操作 }, 300) } ```

在这个例子中，当`keyword`的值发生变化时，300毫秒后执行一个防抖后的方法。

Vue的watch主要在以下几种情况下调用：

了解这些调用机制能帮助我们更好地利用Vue的响应式数据绑定特性来构建高效、动态的应用。