Observer和Dep以及wacher概念

LiuJia1112223332023-08-19 23:55

Observer（观察者）： Observer用于将一个普通的JavaScript对象转换为响应式对象。它递归地遍历对象的所有属性并使用Object.defineProperty将它们转换为getter和setter。这样，在属性被获取或修改时，就能够触发相应的操作。
Dep（依赖）： Dep是一个依赖管理器，用于管理多个Watcher实例。在Vue的响应式系统中，每个响应式对象都有一个对应的Dep实例。当属性被访问时，会将依赖收集到该属性对应的Dep实例中，而当属性被修改时，会通知该属性对应的Dep实例，然后Dep实例会通知所有依赖的Watcher更新视图。
Watcher（观察者）： Watcher用于观察响应式对象的变化，并执行相应的回调函数。在Vue中，我们可以使用watch选项或$watch方法创建一个Watcher实例，用于监听某个属性的变化。当属性发生变化时，Watcher会接收到通知，并执行相应的回调函数。

下面是一个简单的例子，展示了如何在Vue中使用Watch：

javascript 复制代码

new Vue({
  data() {
    return {
      message: 'Hello, Vue!'
    };
  },
  watch: {
    message(newVal, oldVal) {
      console.log(`message的值从 ${oldVal} 变为 ${newVal}`);
    }
  }
});

在上述代码中，我们定义了一个watch选项，它包含一个message属性的监听器函数。当message属性发生变化时，监听器函数会被调用，接收到新值和旧值作为参数。

你也可以使用$watch方法来创建一个Watcher实例：

javascript 复制代码

const vm = new Vue({
  data() {
    return {
      message: 'Hello, Vue!'
    };
  }
});

vm.$watch('message', (newVal, oldVal) => {
  console.log(`message的值从 ${oldVal} 变为 ${newVal}`);
});

通过$watch方法创建的Watcher实例可以手动销毁，使用unwatch方法：

javascript 复制代码

const unwatch = vm.$watch('message', (newVal, oldVal) => {
  console.log(`message的值从 ${oldVal} 变为 ${newVal}`);
});

// 手动销毁Watcher
unwatch();

希望以上解释对你有所帮助！