vue如何变异

vue如何变异

Vue.js 的变异机制可以通过以下几个关键步骤来实现：1、数据劫持，2、依赖收集，3、派发更新，4、虚拟DOM。这些步骤共同作用，使得 Vue 能够在数据变化时高效地更新视图。

一、数据劫持

Vue.js 使用数据劫持技术，通过 Object.defineProperty 方法来拦截对对象属性的访问和修改。这个过程通常被称为“响应式系统”，它的核心目的是监控数据的变化。

Object.defineProperty：Vue.js 使用这个方法来为每个属性添加 getter 和 setter，从而在属性被访问或修改时执行特定的操作。
深度观测：Vue.js 还会递归地对嵌套对象进行观测，从而实现对整个数据对象的深度监控。

例如：

let data = { name: 'Vue' };
Object.defineProperty(data, 'name', {
  get() {
    // 依赖收集逻辑
    return value;
  },
  set(newValue) {
    // 派发更新逻辑
    value = newValue;
  }
});

二、依赖收集

依赖收集是 Vue 响应式系统的核心部分。每个数据属性都对应一个依赖管理器（Dep），它记录了哪些组件依赖于该属性。当属性被访问时，依赖管理器会将当前活动的组件添加到依赖列表中。

Dep：这是一个依赖管理器类，负责存储所有依赖于某个属性的 watcher。
Watcher：当组件渲染时，一个 watcher 对象会被创建，并在属性访问时被添加到依赖管理器中。

例如：

class Dep {
  constructor() {
    this.subs = [];
  }
  addSub(sub) {
    this.subs.push(sub);
  }
  notify() {
    this.subs.forEach(sub => sub.update());
  }
}
class Watcher {
  constructor(vm, expOrFn, cb) {
    this.vm = vm;
    this.getter = expOrFn;
    this.cb = cb;
    this.get();
  }
  get() {
    Dep.target = this;
    this.value = this.getter.call(this.vm, this.vm);
    Dep.target = null;
  }
  update() {
    this.value = this.getter.call(this.vm, this.vm);
    this.cb.call(this.vm, this.value);
  }
}

三、派发更新

当数据变化时，Vue 的响应式系统会触发相应的 setter 方法，并通过依赖管理器通知所有依赖于该属性的 watcher，从而引发视图的重新渲染。

setter：在 setter 中调用依赖管理器的 notify 方法，通知所有 watcher 更新。
更新视图：每个 watcher 都包含一个更新视图的方法，在数据变化时被调用，从而实现视图的同步更新。

例如：

let value = data.name;
Object.defineProperty(data, 'name', {
  get() {
    if (Dep.target) {
      dep.addSub(Dep.target);
    }
    return value;
  },
  set(newValue) {
    value = newValue;
    dep.notify();
  }
});

四、虚拟DOM

Vue.js 使用虚拟 DOM 来提高渲染性能。当数据变化时，Vue 会先将变化应用到虚拟 DOM，然后通过高效的 diff 算法计算出最小的变化范围，最后将变化应用到真实 DOM 上。

虚拟DOM：这是一个轻量级的 JavaScript 对象，用于描述真实 DOM 的结构。
diff 算法：Vue 使用 diff 算法比较新旧虚拟 DOM，从而找出需要更新的部分。

例如：

function createElement(tag, attrs, children) {
  return {
    tag,
    attrs,
    children
  };
}
function updateElement(parent, oldNode, newNode, index = 0) {
  if (!oldNode) {
    parent.appendChild(createElement(newNode));
  } else if (!newNode) {
    parent.removeChild(parent.childNodes[index]);
  } else if (changed(oldNode, newNode)) {
    parent.replaceChild(createElement(newNode), parent.childNodes[index]);
  } else if (newNode.tag) {
    const oldChildren = oldNode.children;
    const newChildren = newNode.children;
    const length = Math.max(oldChildren.length, newChildren.length);
    for (let i = 0; i < length; i++) {
      updateElement(parent.childNodes[index], oldChildren[i], newChildren[i], i);
    }
  }
}

总结

Vue.js 的变异机制通过数据劫持、依赖收集、派发更新和虚拟 DOM 四个步骤实现了高效的响应式系统。通过这些步骤，Vue 能够在数据变化时高效地更新视图，提供流畅的用户体验。为了更好地理解和应用 Vue 的变异机制，建议深入学习 Vue 的源码，并尝试实现简单的响应式系统。这样可以帮助开发者更好地掌握 Vue 的核心原理，从而在实际开发中更加得心应手。

一、数据劫持

二、依赖收集

三、派发更新

四、虚拟DOM

总结

相关问答FAQs：

发表回复