Vue2 的底层实现原理 - 模拟_vue2底层原理-优快云博客

本文深入探讨了Vue2的底层实现，包括数据响应式原理，使用Object.defineProperty()实现数据劫持和视图更新。接着介绍了虚拟DOM和diff算法的简单实现，以及AST在模板编译中的应用。此外，还详细讲解了指令和生命周期的模拟，以及Mustache模板引擎的工作方式。通过这些，读者能更深入理解Vue2的核心机制。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

Vue2 的数据响应式原理

通过 Object.defineProperty() 方法对数据进行劫持，从而实现在数据发生变化时自动更新视图。

手动实现一个简单的数据响应式系统，可以按照以下步骤：

定义一个名为 Observer 的类，它接受一个对象作为参数，并可以遍历这个对象的属性，并使用 Object.defineProperty() 方法为每个属性设置 get 和 set 函数。
定义一个名为 Watcher 的类，它可以接收一个函数作为参数，当观察到数据发生变化时，调用该函数。
定义一个名为 Dep 的类，它可以收集所有需要通知更新的 Watcher 对象，并在数据发生变化时通知它们。
在 Observer 类中的 set 函数中，要通知所有收集到的 Watcher 对象，数据发生了变化，需要更新视图。可以在 set 函数中调用 Dep 类的通知函数并传递当前 Observer 实例。

下面是一个实现 Vue2 数据响应式原理的代码，并添加了详细的注释：

// 定义 Observer 类，接收一个对象作为参数
class Observer {
   
  constructor(obj) {
   
    this.obj = obj;
    // 遍历对象的属性，使用 defineReactive 方法转换成响应式数据
    this.walk(obj);
  }
  walk(obj) {
   
    Object.keys(obj).forEach(key => {
   
      this.defineReactive(obj, key, obj[key]);
    });
  }
  defineReactive(obj, key, val) {
   
    // 创建一个 Dep 对象，用于管理当前属性的所有 Watcher 对象
    const dep = new Dep();
    // 使用 Object.defineProperty() 方法进行劫持，设置 get 和 set 函数
    Object.defineProperty(obj, key, {
   
      enumerable: true,
      configurable: true,
      get() {
   
        // 如果当前有 Watcher 对象需要收集这个属性的变化，则加入到 Dep 对象中
        if (Dep.target) {
   
          dep.addWatcher(Dep.target);
        }
        return val;
      },
      set(newVal) {
   
        // 如果新值和旧值相等，则无需更新
        if (newVal === val) return;
        // 更新当前值
        val = newVal;
        // 通知 Dep 对象中所有 Watcher 对象更新视图
        dep.notify();
      }
    });
  }
}

// 定义 Watcher 类，接收一个函数作为参数
class Watcher {
   
  constructor(cb) {
   
    this.cb = cb;
  }
  // 更新 Watcher，调用传入的函数
  update() {
   
    this.cb();
  }
}

// 定义 Dep 类，管理所有需要更新的 Watcher
class Dep {
   
  constructor() {
   
    // 使用 Set 对象存储所有 Watcher 对象
    this.watchers = new Set();
  }
  // 添加 Watcher 对象
  addWatcher(watcher) {
   
    this.watchers.add(watcher);
  }
  // 通知所有 Watcher 对象更新视图
  notify() {
   
    this.watchers.forEach(watcher => watcher.update());
  }
}

// 定义一个全局对象 Dep.target，用于记录当前需要收集的 Watcher 对象
Dep.target = null;

// observe 方法，接收一个对象作为参数，将其转换成响应式数据
function observe(obj) {
   
  new Observer(obj);
}

// watch 方法，接收一个函数作为参数，创建一个 Watcher 对象并调用传入的函数
function watch(fn) {
   
  const watcher = new Watcher(fn);
  // 将 Dep.target 设置为当前 Watcher 对象，收集属性变化时使用
  Dep.target = watcher;
  watcher.update();
  Dep.target = null;
}

// 示例代码
const data = {
    message: 'Hello World!' };
observe(data);

// 监听 message 属性的变化
watch(() => {
   
  console.log(data.message);
});

// 修改 message 属性的值，触发更新
data.message = 'Goodbye World!';

虚拟 DOM 和 diff 算法

一个简单实现虚拟 DOM 和 diff 算法的示例代码，并添加详细注释：

// 定义虚拟节点类
class VNode {
   
  constructor(tag, props, children) {
   
    this.tag = tag;
    this.props = props;
    this.children = children;
  }
  // 渲染当前虚拟节点为真实 DOM 对象
  render() {
   
    const el = document.createElement(this.tag);
    Object.keys(this.props).forEach(key => {
   
      el.setAttribute(key, this.props[key]);
    });
    this.children.forEach(child => {
   
      const childEl = (child instanceof VNode) ? child.render() : document.createTextNode(child);
      el.appendChild(childEl);
    });
    return el;
  }
  // 判断两个虚拟节点是否相同
  static isSameNode(vnode1, vnode2) {
   
    return vnode1.tag === vnode2.tag;
  }
}

// 定义 diff 函数，用于比较两个虚拟节点之间的差异
function diff(oldVNode, newVNode) {