vue如何进行收集依赖

Vue 进行依赖收集的核心方法有以下几个：1、通过数据劫持实现依赖收集；2、通过依赖追踪机制实现依赖收集；3、通过 Vue 实例的生命周期钩子函数进行依赖收集。这三个方法共同作用，以确保 Vue 能够在数据变化时精确高效地更新视图。下面详细解释这些方法的实现原理和应用场景。

一、通过数据劫持实现依赖收集

Vue 使用数据劫持（Data Hijacking）技术，通过 Object.defineProperty 方法劫持对象属性的读写操作，从而实现对数据变化的监听。具体步骤如下：

初始化数据观察者（Observer）：

Vue 在初始化时会遍历数据对象的所有属性，并使用 Object.defineProperty 为每个属性添加 getter 和 setter 方法。
定义 getter 和 setter：

在 getter 中，Vue 会将当前的依赖（即 Watcher 实例）添加到依赖列表中；在 setter 中，Vue 会通知所有依赖该属性的 Watcher，触发视图更新。

function defineReactive(obj, key, val) {
  const dep = new Dep();
  Object.defineProperty(obj, key, {
    enumerable: true,
    configurable: true,
    get() {
      if (Dep.target) {
        dep.addSub(Dep.target);
      }
      return val;
    },
    set(newVal) {
      if (newVal === val) return;
      val = newVal;
      dep.notify();
    }
  });
}

依赖管理器（Dep）：

Dep 是一个依赖管理器，用于存储所有依赖于某个属性的 Watcher 实例，并在数据变化时通知这些 Watcher。

class Dep {
  constructor() {
    this.subs = [];
  }
  addSub(sub) {
    this.subs.push(sub);
  }
  notify() {
    this.subs.forEach(sub => {
      sub.update();
    });
  }
}

二、通过依赖追踪机制实现依赖收集

Vue 的依赖追踪机制是通过 Watcher 实例来实现的。Watcher 是一个中介对象，用于在数据和视图之间建立联系。具体实现如下：

创建 Watcher 实例：

在 Vue 实例初始化时，会为每个需要依赖追踪的属性创建一个 Watcher 实例。

class Watcher {
  constructor(vm, expOrFn, cb) {
    this.vm = vm;
    this.getter = parsePath(expOrFn);
    this.cb = cb;
    this.value = this.get();
  }
  get() {
    Dep.target = this;
    const value = this.getter.call(this.vm, this.vm);
    Dep.target = null;
    return value;
  }
  update() {
    const value = this.get();
    const oldValue = this.value;
    this.value = value;
    this.cb.call(this.vm, value, oldValue);
  }
}

依赖收集：

在 Watcher 的 get 方法中，会将当前的 Watcher 实例赋值给 Dep.target，然后读取数据，从而触发数据属性的 getter 方法，完成依赖收集。
触发更新：

当数据变化时，数据属性的 setter 方法会调用 Dep 的 notify 方法，通知所有依赖该属性的 Watcher，触发视图更新。

三、通过 Vue 实例的生命周期钩子函数进行依赖收集

Vue 提供了一系列生命周期钩子函数，在这些钩子函数中可以执行自定义逻辑，包括依赖收集和管理。常用的生命周期钩子函数有：

created：实例创建完成后调用。在这个阶段，实例已经完成了数据观测，但尚未挂载 DOM，因此可以进行数据初始化和依赖收集。
mounted：实例挂载完成后调用。在这个阶段，实例已经被挂载到 DOM 上，可以进行 DOM 操作和依赖收集。
updated：实例更新完成后调用。在这个阶段，实例的数据已经发生了变化，可以进行依赖更新。

new Vue({
  data() {
    return {
      message: 'Hello Vue!'
    };
  },
  created() {
    console.log('Instance created');
    // 自定义依赖收集逻辑
  },
  mounted() {
    console.log('Instance mounted');
    // 自定义依赖收集逻辑
  },
  updated() {
    console.log('Instance updated');
    // 自定义依赖更新逻辑
  }
});

四、依赖收集的应用场景

依赖收集在 Vue 中有广泛的应用场景，以下是几个典型的例子：

表单输入绑定：

在表单输入元素与数据模型之间建立双向绑定，当用户输入内容时，视图和数据模型会同步更新。
列表渲染：

使用 v-for 指令渲染列表数据时，Vue 会自动追踪列表数据的变化，并在数据更新时重新渲染列表项。
计算属性：

计算属性依赖于其他数据属性，Vue 会自动追踪计算属性的依赖，并在依赖变化时重新计算计算属性的值。
自定义指令：

在自定义指令中，可以使用依赖收集机制实现复杂的 DOM 操作和数据绑定。

五、依赖收集的性能优化

为了提高依赖收集的性能，Vue 进行了多项优化措施：

懒执行：

计算属性默认是惰性求值的，只有在依赖的属性发生变化时才会重新计算，避免了不必要的计算开销。
批量更新：

Vue 在数据变化时会批量更新 Watcher，而不是逐个更新，从而减少了渲染次数，提高了性能。
异步更新：

Vue 使用异步队列机制，在数据变化时不会立即更新视图，而是将更新操作放入队列中，在下一个事件循环中统一执行，从而避免了多次重复更新。

六、实例说明

以下是一个简单的实例，展示了 Vue 的依赖收集机制如何在表单输入和计算属性中发挥作用：

<div id="app">
  <input v-model="message">
  <p>{{ reversedMessage }}</p>
</div>
<script>
  new Vue({
    el: '#app',
    data() {
      return {
        message: 'Hello Vue!'
      };
    },
    computed: {
      reversedMessage() {
        return this.message.split('').reverse().join('');
      }
    }
  });
</script>

在这个实例中，message 属性通过 v-model 指令与输入框绑定，输入框的内容变化时会触发 message 属性的 setter 方法，从而通知依赖 message 的计算属性 reversedMessage 重新计算，并更新视图。

总结

Vue 的依赖收集机制通过数据劫持、依赖追踪和生命周期钩子函数等方式实现，确保了数据变化时视图的高效更新。为了优化性能，Vue 采用了懒执行、批量更新和异步更新等技术。通过了解这些机制，开发者可以更好地理解 Vue 的响应式系统，提高应用的性能和可靠性。在实际开发中，可以结合具体场景选择合适的依赖收集策略，从而实现高效的数据绑定和视图更新。