Vue watch详解

作用

watch是Vue.js提供的一个功能，用于监听数据的变化并执行相应的操作。它可以帮助我们根据数据变化来更新界面或执行其他操作。无论是监视单个属性还是多个属性，都可以通过watch来实现。

实现原理

当我们在Vue.js中使用watch选项来监听属性时，Vue.js会在内部使用了一个叫做Watcher的类来实现。Watcher类是Vue.js响应式系统的核心之一，它负责建立依赖关系并在依赖发生变化时执行回调函数。

具体来说，当我们使用watch选项定义一个属性的监听器时，Vue.js会创建一个Watcher实例，并将该实例与当前组件实例、属性名以及回调函数进行关联。Watcher实例会负责追踪所监听的属性，并在属性发生变化时触发回调函数。

下面是Watcher类的简化版本源码示例

classWatcher {
constructor(vm, key, callback) {
this.vm=vm;
this.key=key;
this.callback=callback;
// 在这里将当前Watcher实例设置为全局活动WatcherDep.target=this;
// 触发一次属性的读取操作，建立依赖关系this.value=vm[key];
// 清空全局活动WatcherDep.target=null;
  }
update() {
constoldValue=this.value;
// 重新读取属性值，触发依赖更新this.value=this.vm[this.key];
// 调用回调函数，并传递新值和旧值this.callback(this.value, oldValue);
  }
}

在上述代码中，我们可以看到Watcher类的基本结构。构造函数接收Vue实例、属性名和回调函数作为参数，并将它们保存在Watcher实例的属性中。在构造函数中，我们将当前Watcher实例设置为全局活动Watcher，然后通过读取属性值的方式触发依赖关系的建立。接着，清空全局活动Watcher，以便后续的依赖关系建立。

当属性发生变化时，Watcher实例的update方法会被调用。在update方法中，我们首先保存旧值，然后重新读取属性值以触发依赖更新。最后，调用回调函数，并传递新值和旧值作为参数。

使用方式

在Vue.js中，我们可以通过以下方式使用watch：

watch: {
propertyName: {
handler: function(newVal, oldVal) {
// 在属性发生变化时执行的逻辑    },
deep: true,
immediate: true  }
}

参数介绍

• handler: 监听属性变化时执行的回调函数。
• deep: 一个布尔值，用于深度监听对象内部属性的变化。默认情况下，Vue只会监听对象的第一层属性变化。如果需要监听嵌套对象内部属性的变化，需要将deep设置为true。
• immediate: 一个布尔值，用于在组件初始化时立即执行一次回调函数。默认情况下，Vue会在属性发生变化后才执行回调函数。如果需要在组件初始化时立即执行一次回调函数，可以将immediate设置为true。

上述代码中，我们可以指定一个回调函数、设置是否深度监听以及是否在组件初始化时立即执行回调函数。这样就能够根据具体需求来灵活配置watch。

使用示例

<template><div><p>Count: {{ count }}</p><button@click="increment">Increment</button></div></template><script>exportdefault {
data() {
return {
count: 0,
    };
  },
watch: {
count(newVal, oldVal) {
console.log(`count changed from ${oldVal}to ${newVal}`);
    },
  },
methods: {
increment() {
this.count++;
    },
  },
};
</script>

在上述示例中，我们定义了一个计数器组件。当点击“Increment”按钮时，计数器会加一。同时，我们使用watch来监听count属性的变化，并在变化时打印出新值和旧值。

总结

通过本文的介绍，我们了解了Vue.js中的watch功能的作用、实现原理、使用方式以及示例。watch是一个非常有用的功能，可以帮助我们监听数据的变化并执行相应的操作。它基于Vue.js的响应式系统实现，通过依赖追踪技术来监听属性变化。在实际开发中，我们可以根据具体需求配置回调函数、深度监听以及立即执行等参数来灵活使用watch功能。