vue是如何更新视图的

Vue 是通过以下 3 个主要步骤来更新视图的：1、数据劫持，2、依赖收集，3、视图更新。Vue 使用数据劫持的方式监听数据的变化，通过依赖收集来确定哪些组件需要更新，最后通过虚拟 DOM 来高效地更新视图。

一、数据劫持

Vue 的数据劫持是通过 Object.defineProperty 来实现的。它会在数据对象的每一个属性上设置 getter 和 setter 方法，以便在数据变化时能够被检测到。

定义属性：通过 Object.defineProperty，Vue 可以为每一个数据属性定义 getter 和 setter。
监听变化：当数据变化时，setter 方法会被调用，从而通知依赖项数据发生了变化。

let data = { name: 'Vue' };
Object.defineProperty(data, 'name', {
  get() {
    // 获取数据
    return data;
  },
  set(newVal) {
    // 设置数据并通知变化
    if (newVal !== data.name) {
      data.name = newVal;
      // 通知变化
    }
  }
});

二、依赖收集

在 Vue 中，每一个组件实例都有一个与之关联的渲染函数，当组件中的数据发生变化时，该渲染函数会被重新调用。在渲染过程中，Vue 会收集依赖，即记录哪些组件依赖于哪些数据。

依赖追踪：通过收集依赖，Vue 可以知道哪些数据被哪些组件使用。
通知更新：当数据变化时，Vue 会通知依赖于该数据的组件进行更新。

class Dep {
  constructor() {
    this.subscribers = [];
  }
  depend() {
    if (Dep.target) {
      this.subscribers.push(Dep.target);
    }
  }
  notify() {
    this.subscribers.forEach(sub => sub());
  }
}
Dep.target = null;

三、视图更新

当数据发生变化时，Vue 会通过虚拟 DOM 来进行高效的视图更新。虚拟 DOM 是一个轻量级的 JavaScript 对象，它描述了 DOM 结构。当数据变化时，Vue 会创建一个新的虚拟 DOM 树，并与旧的虚拟 DOM 树进行比较，找到最小的变更，并将这些变更应用到真正的 DOM 上。

创建虚拟 DOM：在初次渲染时，Vue 会创建一个虚拟 DOM 树。
比较差异：当数据变化时，Vue 会创建一个新的虚拟 DOM 树，并与旧的虚拟 DOM 树进行比较，找到差异。
更新真实 DOM：将差异部分应用到真实的 DOM 上，从而实现高效的视图更新。

function updateComponent() {
  // 生成新的虚拟 DOM
  const vnode = render();
  // 比较新旧虚拟 DOM 并更新真实 DOM
  patch(oldVnode, vnode);
  oldVnode = vnode;
}

总结

通过数据劫持、依赖收集和虚拟 DOM，Vue 实现了高效的视图更新机制。数据劫持使得 Vue 能够监听数据的变化，依赖收集使得 Vue 能够确定哪些组件需要更新，而虚拟 DOM 则使得 Vue 能够高效地进行视图更新。为了更好地利用 Vue 的这一特性，开发者可以尽量避免直接操作 DOM，而是通过数据绑定和组件化来实现应用逻辑，从而充分发挥 Vue 的性能优势。

vue是如何更新视图的

一、数据劫持

二、依赖收集

三、视图更新

总结

相关问答FAQs：

发表回复