vue3模块创建runtime-dom源码解析

│  │  └─ src │  │     ├─ index.ts │  │     ├─ modules │  │     │  ├─ attr.ts  // attributes 的更新方法 │  │     │  ├─ class.ts // class 的更新 │  │     │  ├─ event.ts // 事件绑定的更新 │  │     │  └─ style.ts // style属性的更新 │  │     ├─ nodeOps.ts  // dom操作方法 │  │     └─ patchProp.ts    // 属性更新操作 

{ "name": "@vue/runtime-dom", "version": "1.0.0", "main": "index.js", "module": "dist/runtime-dom.esm-bundler.js", "unpkg": "dist/runtime-dom.global.js", "buildOptions": { "name": "VueRuntimeDOM", "formats": [ "esm-bundler", "cjs", "global" ] } } 

// runtime-dom/src/nodeOps.ts export const nodeOps = { // 1. 创建元素 createElement(tagName) { return document.createElement(tagName); }, // 创建文本节点 createText(text) { return document.createTextNode(text); }, // 2. 插入元素 insert(child, parent, anchor) { // 元素移动； // 当第二个参数为null时，插入到末尾； parent.insertBefore(child, anchor || null); }, // 3. 移除元素 remove(child) { const parent = child.parentNode; if (parent) { parent.removeChild(child); } }, // 4. 查询元素 querySelector(selector) { return document.querySelector(selector); }, parentNode(node) { return node.parentNode; }, nextSibling(node) { return node.nextSibling; }, // 5. 设置文本内容 setElementText(el, text) { el.textContent = text; }, setText(node, text) { node.nodeValue = text; }, }; 

// runtime-dom/src/patchProp.ts import { patchAttr } from "./modules/attr"; import { patchClass } from "./modules/class"; import { patchEvent } from "./modules/event"; import { patchStyle } from "./modules/style"; export const patchProp = (el, key, prevValue, nextValue) => { if (key === "class") { // 1. class 类名 patchClass(el, nextValue); } else if (key === "style") { // 2. 样式 patchStyle(el, prevValue, nextValue); } else if (/^on[^a-z]/.test(key)) { // 3. onXxx 事件 patchEvent(el, key, nextValue); } else { // 4. 其它 attributes 属性 patchAttr(el, key, nextValue); } }; 

// runtime-dom/src/modules/class.ts export const patchClass = (el, value) => { if (value == null) { el.removeAttribute("class"); } else { el.className = value; } }; 

// runtime-dom/src/modules/style.ts export const patchStyle = (el, prev, next) => { if (next) { const style = el.style; // 1. 将新的样式添加到style上，如果有重复的直接覆盖 for (let key in next) { style[key] = next[key]; } for (let key in prev) { // 2. 老的有，新的没有，要移除掉 if (next[key] == null) { style[key] = null; } } } else { el.removeAttribute("style"); } }; 

// runtime-dom/src/modules/event.ts function createInvoker(initialValue) { const invoker = (e) => invoker.value(e); // 将事件的回调绑定到 invoker.value 上，后续更新事件回调的时候，只需更新 invoker.value 即可 invoker.value = initialValue; return invoker; } export const patchEvent = (el, key, nextValue) => { const invokers = el._vei || (el._vei = {}); // _vei 是 vue event invoker 的缩写 const name = key.slice(2).toLowerCase(); // 获取事件名 const existingInvoker = invokers[name]; // 取缓存 // 1. 如果是更新事件的回调 if (nextValue && existingInvoker) { // 事件是存储到 invoker.value 上的，更新该属性即可 existingInvoker.value = nextValue; } else { // 2. 如果是绑定新的事件 if (nextValue) { // 2.1 创建 invoker（事件的回调函数），并缓存起来（本质是缓存到el._vei上） const invoker = (invokers[name] = createInvoker(nextValue)); // 2.2 绑定事件 el.addEventListener(name, invoker); } else { // 3. 如果是移除事件 // 3.1 解绑事件 el.removeEventListener(name, existingInvoker); // 3.2 清除缓存 invokers[name] = null; } } }; 

// runtime-dom/src/modules/attr.ts export const patchAttr = (el, key, value) => { if (value == null) { el.removeAttribute(key); } else { el.setAttribute(key, value); } };