Vue 3源码极客之：`Vue`的`runtime-core`：它如何与平台无关，例如`@vue/runtime-dom`和`@vue/runtime-test`。 - 智猿学院-前后端，数据库，人工智能，云计算等领域前沿技术讲座

观众朋友们，大家好！今天咱们开讲“Vue 3源码极客之：Vue的runtime-core，以及它如何做到平台无关性”。这可是Vue 3架构设计的精髓之一，理解了它，你就能更深入地玩转Vue，甚至可以自己定制一套Vue渲染器！

咱们开始吧！

开场：话说Vue的野心和无奈

话说Vue，野心勃勃，想一统江湖，在各种平台都能跑。但江湖规矩，Web有Web的玩法（DOM操作），小程序有小程序的套路（WX API），Node.js有Node.js的规矩（服务端渲染），这可咋办？

Vue的开发者们很聪明，他们发现虽然不同平台API不一样，但组件的逻辑，数据驱动视图的核心思想，那都是共通的啊！

所以，Vue就搞了个runtime-core，它只负责组件的生命周期管理、虚拟DOM的Diff算法、响应式系统等核心逻辑，而把具体的平台操作（比如DOM操作）甩给了不同的runtime-xxx模块。

第一幕：runtime-core——Vue的心脏

runtime-core，顾名思义，是Vue运行时的核心。它干了些啥呢？

虚拟DOM（Virtual DOM）: 用JavaScript对象来描述真实的DOM结构，diff算法就在这里面。
组件生命周期管理: 组件的创建、更新、卸载，都是它说了算。
响应式系统: reactive、ref这些API，都和它息息相关，数据变了，视图才能跟着变。
渲染器（Renderer）: 虽然它不直接操作DOM，但它定义了渲染的抽象接口，告诉不同的平台该怎么渲染。
调度器（Scheduler）: 控制更新的顺序，避免不必要的重复渲染，性能优化的一大利器。

简而言之，runtime-core就是Vue的大脑，负责思考和决策，但不负责动手干活。

第二幕：runtime-xxx——Vue的手和脚

有了大脑，还得有手和脚才能走路啊。runtime-xxx就是Vue在不同平台上的手和脚，它们负责把runtime-core的指令翻译成对应平台的操作。

@vue/runtime-dom: 这是Vue在Web平台上的手脚，它负责操作DOM API，把虚拟DOM渲染成真实的DOM节点。
@vue/runtime-test: 这是一个用于测试的运行时，它不会操作真实的DOM，而是把渲染结果保存在内存中，方便进行单元测试。

还有其他的runtime-xxx吗？当然有！理论上，只要实现了runtime-core定义的渲染接口，你就可以把Vue移植到任何平台。比如，有人就做了@vue/runtime-canvas，让Vue可以在Canvas上渲染。

第三幕：平台无关的奥秘——抽象和策略模式

runtime-core是如何做到平台无关的呢？答案是：抽象和策略模式。

抽象渲染接口: runtime-core定义了一组抽象的渲染接口，比如createElement、patchProp、insert、remove等。这些接口描述了渲染的基本操作，但没有指定具体的实现。
策略模式: 不同的runtime-xxx根据自己的平台特点，实现这些抽象的渲染接口，这就是策略模式的应用。runtime-core只需要调用这些接口，就能完成渲染，而不用关心具体的平台实现。

咱们看个例子，runtime-core中可能有这样的代码：

// 假设的渲染函数
function render(vnode, container) {
  const { type, props, children } = vnode;

  // 1. 创建元素
  const el = renderer.createElement(type);

  // 2. 设置属性
  for (const key in props) {
    renderer.patchProp(el, key, null, props[key]);
  }

  // 3. 处理子节点
  if (typeof children === 'string') {
    renderer.setText(el, children);
  } else if (Array.isArray(children)) {
    children.forEach(child => render(child, el));
  }

  // 4. 插入到容器中
  renderer.insert(el, container);
}

这里的 renderer 就是一个包含了各种平台特定渲染函数的对象。 runtime-core 并不知道 renderer.createElement 到底是操作 DOM，还是操作 Canvas，它只知道调用这个函数可以创建一个元素。

在 @vue/runtime-dom 中，可能会有这样的实现：

// @vue/runtime-dom 的实现
const renderer = {
  createElement: (type) => {
    return document.createElement(type);
  },
  patchProp: (el, key, prevValue, nextValue) => {
    // 处理DOM属性更新
    if (key === 'class') {
      el.className = nextValue;
    } else if (key.startsWith('on')) {
      // ... 处理事件监听
    } else {
      el.setAttribute(key, nextValue);
    }
  },
  insert: (el, container) => {
    container.appendChild(el);
  },
  remove: (el) => {
    el.parentNode.removeChild(el);
  },
  setText: (el, text) => {
    el.textContent = text;
  }
};

而在 @vue/runtime-test 中，可能会有这样的实现：

// @vue/runtime-test 的实现
const renderer = {
  createElement: (type) => {
    return { type, props: {}, children: [] }; // 模拟一个元素
  },
  patchProp: (el, key, prevValue, nextValue) => {
    el.props[key] = nextValue;  // 记录属性
  },
  insert: (el, container) => {
    container.children.push(el); // 模拟插入
  },
  remove: (el) => {
     //模拟删除
  },
  setText: (el, text) => {
    //模拟设置文本
  }
};

可以看到，不同的 runtime-xxx 实现了相同的接口，但具体的操作完全不同。这就是策略模式的精髓：定义一组算法，将每个算法都封装起来，并且使它们可以互换。

第四幕：响应式系统的平台无关性

Vue的响应式系统也是平台无关的。reactive、ref等API，只负责数据的劫持和依赖收集，当数据发生变化时，它只会触发更新，而不会直接操作DOM。

具体的更新操作，还是由runtime-core调用渲染器来完成。

第五幕：源码剖析——createRenderer

Vue 3源码中，createRenderer函数是实现平台无关性的关键。它接收一个options对象，这个options对象包含了平台特定的API，比如createElement、patchProp等。

createRenderer函数会返回一个render函数，这个render函数就是用来渲染虚拟DOM的。

咱们简化一下createRenderer的实现：

function createRenderer(options) {
  const {
    createElement,
    patchProp,
    insert,
    remove,
    setText
  } = options;

  function render(vnode, container) {
    if (vnode === null) {
      if (container._vnode) {
        // 卸载之前的vnode
        unmount(container._vnode);
      }
      return;
    }

    patch(container._vnode || null, vnode, container);
    container._vnode = vnode;
  }

  function patch(n1, n2, container, anchor = null) {
    // ... Diff算法，比较新旧vnode
    //  (这里省略了复杂的Diff算法)

    if (n1 === null) {
      // 新增节点
      mountElement(n2, container, anchor);
    } else {
      // 更新节点
      patchElement(n1, n2);
    }
  }

  function mountElement(vnode, container, anchor) {
    const { type, props, children } = vnode;
    const el = createElement(type);

    if (props) {
      for (const key in props) {
        patchProp(el, key, null, props[key]);
      }
    }

    if (typeof children === 'string') {
      setText(el, children);
    } else if (Array.isArray(children)) {
      children.forEach(child => {
        mountElement(child, el);
      });
    }

    insert(el, container, anchor);
    vnode.el = el; // 记录真实DOM节点
  }

  function patchElement(n1, n2) {
    const el = n2.el = n1.el;
    const oldProps = n1.props || {};
    const newProps = n2.props || {};

    patchProps(el, newProps, oldProps);
    patchChildren(n1, n2, el);

  }

  function patchProps(el, newProps, oldProps) {
    //比较新旧Props，进行更新
    for (const key in newProps) {
      if (newProps[key] !== oldProps[key]) {
        patchProp(el, key, oldProps[key], newProps[key]);
      }
    }

    for (const key in oldProps) {
      if (!(key in newProps)) {
        patchProp(el, key, oldProps[key], null); // 移除旧属性
      }
    }

  }

   function patchChildren(n1, n2, container) {
     // 比较新旧children，进行更新
   }

  function unmount(vnode) {
    //卸载组件
  }

  return {
    render
  };
}

可以看到，createRenderer函数接收一个options对象，这个options对象就是平台特定的API。runtime-dom会传入操作DOM的API，runtime-test会传入模拟DOM的API。

第六幕：表格总结

为了更清晰地理解runtime-core和runtime-xxx的关系，咱们用一个表格来总结一下：

组件	职责	平台依赖性
`runtime-core`	1. 虚拟DOM 2. 组件生命周期管理 3. 响应式系统 4. 渲染器接口定义 5. 调度器	无
`@vue/runtime-dom`	1. 实现`runtime-core`定义的渲染接口 2. 操作DOM API，将虚拟DOM渲染成真实的DOM节点	有
`@vue/runtime-test`	1. 实现`runtime-core`定义的渲染接口 2. 模拟DOM操作，将渲染结果保存在内存中，用于单元测试	无
自定义`runtime-xxx`	1. 实现`runtime-core`定义的渲染接口 2. 根据平台特点，实现具体的渲染操作，比如操作Canvas API，操作小程序API等	有

第七幕：实际应用——自定义渲染器

理解了runtime-core的平台无关性，你就可以自己定制一套Vue渲染器，让Vue在各种平台上运行。

比如，你想让Vue在Canvas上渲染，可以这样做：

创建一个@vue/runtime-canvas模块。
实现runtime-core定义的渲染接口，比如createElement、patchProp、insert等，用Canvas API来实现这些接口。
使用createRenderer函数，传入你实现的渲染接口，创建一个render函数。
使用这个render函数来渲染你的Vue组件。

这样，你就可以在Canvas上使用Vue了！

第八幕：注意事项

性能优化: 不同的平台有不同的性能特点，在实现渲染接口时，要根据平台特点进行优化。
兼容性: 不同的平台有不同的API，在实现渲染接口时，要考虑兼容性问题。
测试: 在实现渲染接口后，要进行充分的测试，确保渲染结果正确。

总结：Vue的架构之美

Vue 3的runtime-core架构，充分体现了抽象和策略模式的强大之处。它将核心逻辑和平台操作分离，使得Vue可以轻松地移植到各种平台，同时也为开发者提供了更大的灵活性。

理解了runtime-core的平台无关性，你就能更深入地理解Vue的架构，更好地使用Vue，甚至可以自己定制一套Vue渲染器，让Vue在各种平台上发光发热！

好了，今天的讲座就到这里，希望大家有所收获！谢谢大家！

发表回复 取消回复

发表回复取消回复