Vue 3源码深度解析之：`Vue`的`runtime-core`：它如何与`runtime-dom`解耦。 - 智猿学院-前后端，数据库，人工智能，云计算等领域前沿技术讲座

各位观众老爷们，大家好！今天咱们不聊妹子，来聊聊Vue 3的“基情四射”的内心世界，特别是 runtime-core 和 runtime-dom 这对好基友是如何做到“藕断丝连，却又保持独立”的。准备好了吗？系好安全带，发车啦！

开篇：为啥要解耦？这俩货是干啥的？

在开始之前，我们先搞清楚两个问题：

为啥要解耦？ 想象一下，如果你的代码像一坨意大利面一样，揉成一团，那修改起来简直是噩梦。解耦就是把这坨意大利面梳理清楚，让每一根面条（模块）都职责清晰，方便维护和扩展。Vue 3的解耦，让它不再仅仅局限于浏览器环境，还可以跑在服务端（SSR）、Weex等平台。
runtime-core 和 runtime-dom 是干啥的？
- runtime-core： 是Vue的核心运行时，负责虚拟DOM、组件、响应式系统、生命周期管理等等。简单来说，就是Vue的“大脑”，负责思考和决策。它不依赖于任何特定的平台。
- runtime-dom： 是运行在浏览器端的运行时，负责操作真实的DOM。它就像Vue的“手脚”，负责把“大脑”的想法变成现实。

如果把Vue比作一个人，runtime-core就是大脑和神经系统，负责思考和指挥；runtime-dom就是手脚，负责执行命令。大脑可以指挥不同的手脚（比如，一套机械臂），这也就是为什么Vue可以运行在不同平台的原因。

第一章：runtime-core 的核心概念

runtime-core 提供了Vue的核心功能，我们先来了解几个重要的概念：

虚拟DOM (Virtual DOM)： 一个用JavaScript对象来描述DOM结构的树。Vue使用虚拟DOM来减少对真实DOM的操作，提高性能。
组件 (Component)： Vue应用的基本构建块。组件可以包含自己的模板、逻辑和样式。
渲染器 (Renderer)： 负责将虚拟DOM渲染成真实DOM。这部分是runtime-core与平台相关的部分，需要通过平台特定的实现来完成。
响应式系统 (Reactivity System)： 让数据变化自动更新视图。Vue 3 使用了 Proxy 来实现响应式。

代码示例：一个简单的 runtime-core 组件

// @ts-nocheck  (忽略ts检查)
import { reactive, effect } from '@vue/reactivity';

// 创建一个简单的组件
function createApp(rootComponent) {
  return {
    mount(selector) {
      const container = document.querySelector(selector);
      let isMounted = false;
      let prevVNode = null;

      // 定义一个更新函数
      effect(() => {
        if (!isMounted) {
          // 初次渲染
          prevVNode = rootComponent.render();
          rootComponent.mount(prevVNode, container); //注意这里mount方法需要平台特定的实现.
          isMounted = true;
        } else {
          // 更新
          const newVNode = rootComponent.render();
          patch(prevVNode, newVNode, container);  //注意这里patch方法需要平台特定的实现.
          prevVNode = newVNode;
        }
      });
    },
  };
}

// 假设的虚拟DOM节点
function h(type, props, children) {
    return {
        type,
        props,
        children
    }
}

// 一个简单的组件实例
const MyComponent = {
    data() {
        return reactive({ count: 0 });
    },
    render() {
        return h('div', { id: 'my-component' }, [
            h('p', null, `Count: ${this.data().count}`),
            h('button', { onClick: () => this.data().count++ }, 'Increment')
        ]);
    },
    mount(vnode, container) {
        // 模拟挂载虚拟DOM到真实DOM,  这部分需要平台特定实现，这里仅做演示
        //  注意：实际的 Vue runtime-dom 会处理更复杂的情况
        const el = document.createElement(vnode.type);
        for (const key in vnode.props) {
            el.setAttribute(key, vnode.props[key]);
        }
        if (Array.isArray(vnode.children)) {
            vnode.children.forEach(child => {
                const childEl = document.createElement(child.type);
                childEl.textContent = child.children;
                el.appendChild(childEl);
            });
        }
        container.appendChild(el);
    }
};

// 模拟 patch 函数，更新虚拟DOM
function patch(oldVNode, newVNode, container) {
    // 简化的 patch 逻辑，仅用于演示
    // 实际的 Vue runtime-dom 会处理更复杂的情况
    if (oldVNode.type !== newVNode.type) {
        // 类型不同，直接替换
        container.innerHTML = '';
        MyComponent.mount(newVNode, container);
    } else {
        // 类型相同，更新属性和子节点
        // 这里省略了详细的更新逻辑
        container.innerHTML = '';  // 简单粗暴的替换
        MyComponent.mount(newVNode, container);
    }
}

// 创建并挂载应用
const app = createApp(MyComponent);
app.mount('#app');

代码解释：

createApp：创建一个Vue应用实例，接收一个根组件作为参数。
effect：创建一个响应式的副作用，当依赖的数据发生变化时，会自动执行。
MyComponent：一个简单的Vue组件，包含一个 count 数据和一个 render 函数。
render：返回虚拟DOM节点，描述组件的结构。
h: 一个创建虚拟DOM节点的辅助函数。
mount：注意！这里是一个简化版的挂载函数，用于将虚拟DOM渲染成真实DOM。真正的mount函数是在runtime-dom中实现的。
patch：注意！这里是一个简化版的更新函数，用于比较新旧虚拟DOM，并更新真实DOM。真正的patch函数也是在runtime-dom中实现的。

这个例子演示了 runtime-core 的基本结构：组件、虚拟DOM、响应式系统。但是，它缺少了将虚拟DOM渲染成真实DOM的能力，这部分需要 runtime-dom 来完成。

第二章：runtime-dom 的职责

runtime-dom 负责操作真实的DOM，它提供了平台特定的渲染器。主要职责包括：

节点操作： 创建、更新、删除DOM节点。
属性操作： 设置、移除DOM元素的属性。
事件处理： 绑定、解绑DOM元素的事件。

代码示例：runtime-dom 的核心函数

为了更好地理解 runtime-dom 的作用，我们来模拟一下它的一些核心函数：

// @ts-nocheck  (忽略ts检查)
//  模拟 runtime-dom 中的一些函数
const nodeOps = {
    createElement: (tag) => {
        console.log('Creating element:', tag);
        return document.createElement(tag);
    },
    createText: (text) => {
        console.log('Creating text node:', text);
        return document.createTextNode(text);
    },
    setText: (node, text) => {
        console.log('Setting text:', text, 'on node:', node);
        node.nodeValue = text;
    },
    insert: (child, parent, anchor = null) => {
        console.log('Inserting node:', child, 'into:', parent, 'before:', anchor);
        parent.insertBefore(child, anchor);
    },
    // ... 其他DOM操作函数
};

const patchProp = (el, key, prevValue, nextValue) => {
    if (key === 'onClick') {
        if (prevValue) {
            el.removeEventListener('click', prevValue);
        }
        if (nextValue) {
            el.addEventListener('click', nextValue);
        }
    } else {
        if (nextValue === null || nextValue === undefined) {
            el.removeAttribute(key);
        } else {
            el.setAttribute(key, nextValue);
        }
    }
};

// 创建渲染器，将 nodeOps 和 patchProp 注入到 core 中
function createRenderer(options) {
    const {
        createElement,
        createText,
        setText,
        insert,
        patchProp: platformPatchProp // 使用别名避免命名冲突
    } = options;

    const patch = (n1, n2, container) => {
        if (!n1) {
            //Mount
            mountChildren(n2, container);
        } else {
            //update
            //这里省略更新逻辑
        }
    }

    const mountChildren = (n2, container) => {
        const {type, children} = n2;
        const el = createElement(type);

        if(Array.isArray(children)){
          children.forEach(child => {
            const childNode = createText(child.children);
            insert(childNode, el)
          });
        }

        insert(el, container)
    }

    return {
        render: (vnode, container) => {
            patch(null, vnode, container);
        }
    };
}

// 使用 runtime-dom 的 API 创建一个渲染器
const renderer = createRenderer({
    createElement: nodeOps.createElement,
    createText: nodeOps.createText,
    setText: nodeOps.setText,
    insert: nodeOps.insert,
    patchProp // 这里直接使用前面定义的 patchProp
});

代码解释：

nodeOps：一个包含各种DOM操作函数的对象。这些函数是平台特定的，不同的平台需要提供不同的实现。
patchProp：一个用于更新DOM元素属性的函数。
createRenderer：一个创建渲染器的函数。它接收 nodeOps 和 patchProp 作为参数，并将它们注入到 runtime-core 中。
renderer：使用 runtime-dom 的 API 创建的渲染器实例。

第三章：runtime-core 和 runtime-dom 如何协作？

现在，我们来揭示 runtime-core 和 runtime-dom 如何一起工作的。关键在于 依赖注入。

runtime-core 定义了渲染器的接口，但不提供具体的实现。runtime-dom 实现了这些接口，并将它们注入到 runtime-core 中。这样，runtime-core 就可以使用 runtime-dom 的功能来操作真实的DOM。

代码示例：整合 runtime-core 和 runtime-dom

让我们回到之前的 runtime-core 的例子，并使用 runtime-dom 的 API 来完成渲染：

// @ts-nocheck  (忽略ts检查)
// 导入 reactivity 模块
import { reactive, effect } from '@vue/reactivity';

//  runtime-dom  的  nodeOps  和  patchProp  (前面已经定义过)
const nodeOps = {
    createElement: (tag) => {
        console.log('Creating element:', tag);
        return document.createElement(tag);
    },
    createText: (text) => {
        console.log('Creating text node:', text);
        return document.createTextNode(text);
    },
    setText: (node, text) => {
        console.log('Setting text:', text, 'on node:', node);
        node.nodeValue = text;
    },
    insert: (child, parent, anchor = null) => {
        console.log('Inserting node:', child, 'into:', parent, 'before:', anchor);
        parent.insertBefore(child, anchor);
    },
    // ... 其他DOM操作函数
};

const patchProp = (el, key, prevValue, nextValue) => {
    if (key === 'onClick') {
        if (prevValue) {
            el.removeEventListener('click', prevValue);
        }
        if (nextValue) {
            el.addEventListener('click', nextValue);
        }
    } else {
        if (nextValue === null || nextValue === undefined) {
            el.removeAttribute(key);
        } else {
            el.setAttribute(key, nextValue);
        }
    }
};

// 创建渲染器，将 nodeOps 和 patchProp 注入到 core 中
function createRenderer(options) {
    const {
        createElement,
        createText,
        setText,
        insert,
        patchProp: platformPatchProp // 使用别名避免命名冲突
    } = options;

    const patch = (n1, n2, container) => {
        if (!n1) {
            //Mount
            mountChildren(n2, container);
        } else {
            //update
            //这里省略更新逻辑
        }
    }

    const mountChildren = (n2, container) => {
        const {type, children} = n2;
        const el = createElement(type);

        if(Array.isArray(children)){
          children.forEach(child => {
            const childNode = createText(child.children);
            insert(childNode, el)
          });
        }

        insert(el, container)
    }

    return {
        render: (vnode, container) => {
            patch(null, vnode, container);
        }
    };
}

// 创建一个简单的组件
function createApp(rootComponent) {
  const renderer = createRenderer({
        createElement: nodeOps.createElement,
        createText: nodeOps.createText,
        setText: nodeOps.setText,
        insert: nodeOps.insert,
        patchProp: patchProp // 这里直接使用前面定义的 patchProp
    });

  return {
    mount(selector) {
      const container = document.querySelector(selector);
      let isMounted = false;
      let prevVNode = null;

      // 定义一个更新函数
      effect(() => {
        if (!isMounted) {
          // 初次渲染
          prevVNode = rootComponent.render();
          renderer.render(prevVNode, container); // 使用 runtime-dom 的渲染器
          isMounted = true;
        } else {
          // 更新
          const newVNode = rootComponent.render();
          // 这里需要实现真正的 patch 算法，比较新旧 VNode 并更新 DOM
          //  这里为了简化，直接重新渲染
          renderer.render(newVNode, container);
          prevVNode = newVNode;
        }
      });
    },
  };
}

// 假设的虚拟DOM节点
function h(type, props, children) {
    return {
        type,
        props,
        children
    }
}

// 一个简单的组件实例
const MyComponent = {
    data() {
        return reactive({ count: 0 });
    },
    render() {
        return h('div', { id: 'my-component' }, [
            h('p', null, `Count: ${this.data().count}`),
            h('button', { onClick: () => this.data().count++ }, 'Increment')
        ]);
    }
};

// 创建并挂载应用
const app = createApp(MyComponent);
app.mount('#app');

代码解释：

在 createApp 函数中，我们首先使用 runtime-dom 的 API 创建一个渲染器。
然后，我们将这个渲染器注入到 runtime-core 中。
在 mount 函数中，我们使用 runtime-dom 的渲染器来将虚拟DOM渲染成真实DOM。

第四章：解耦带来的好处

通过这种解耦的方式，Vue 3 获得了以下好处：

可移植性： runtime-core 可以运行在任何平台上，只要提供平台特定的渲染器。
可测试性： runtime-core 的逻辑可以独立于DOM进行测试。
可扩展性： 可以更容易地添加新的功能，而不会影响到其他部分的代码。
更小的体积： 可以根据需要选择不同的运行时，减少最终打包的体积。

第五章：总结

runtime-core 和 runtime-dom 的解耦是Vue 3架构设计的一个重要方面。它使得Vue更加灵活、可移植、可测试和可扩展。通过依赖注入的方式，runtime-core 可以使用 runtime-dom 的功能来操作真实的DOM，从而实现跨平台的能力。

表格总结：runtime-core vs runtime-dom

特性	`runtime-core`	`runtime-dom`
职责	虚拟DOM、组件、响应式系统、生命周期管理等	操作真实DOM
依赖平台	不依赖	依赖浏览器环境
核心概念	虚拟DOM、组件、渲染器接口	节点操作、属性操作、事件处理
如何协作	通过依赖注入，`runtime-core` 使用 `runtime-dom`	`runtime-dom` 实现 `runtime-core` 定义的渲染器接口
优势	可移植性、可测试性、可扩展性	专注于DOM操作，性能优化

最后：

希望今天的讲座能够帮助大家更好地理解Vue 3的 runtime-core 和 runtime-dom。记住，解耦是一种重要的编程思想，它可以让我们的代码更加清晰、易于维护和扩展。下次有机会再跟大家聊聊Vue 3的其他精彩内容！散会！

发表回复 取消回复

发表回复取消回复