1、從入口文件看實現
項目入口文件
import { createApp } from 'vue'
import './style.css'
import App from './App.vue'createApp(App).mount('#app')
文件位置core\packages\runtime-dom\src\index.ts
保證了render的唯一性
// // rendererOptions 是patchProp 和nodeOps的合集，包含了dom操作和節點對比方法
const rendererOptions = /*#__PURE__*/ extend({ patchProp }, nodeOps)function ensureRenderer() {return (renderer ||(renderer = createRenderer<Node, Element | ShadowRoot>(rendererOptions)))
}
createApp中主要調用了ensureRenderer創建返回的App，ensureRenderer中返回createRenderer
createRenderer核心方法baseCreateRenderer 主要包含了創建渲染器和更新和渲染的一系列方法，接下來開始從使用到實現吧~
2、兩種渲染器的使用
import { createRenderer ,render,h} from "/node_modules/@vue/runtime-dom/dist/runtime-dom.esm-browser.js";// 1、createRenderer 我們可以自己創建渲染器（自己提供渲染方式）// 2、render 內置的渲染器 （渲染dom元素）// 3、h 方法可以創建一個虛擬dom （type,propsOrChildren,children）console.log(createRenderer,render,h);let ele = h("h1","hello render")// render(ele,app) 用提供的api去渲染// 自定義渲染器const renderer = createRenderer({// 創建一個節點createElement(type){return document.createElement(type)},// 節點的展示setElementText(el,text){el.textContent = text},// 節點內容insert(el,container){container.appendChild(el)}})renderer.render(ele,app)// runtime-dom 提供一系列操作dom的API// @vue/runtime-dom是針對瀏覽器的 --> @vue/runtime-core 是跨平臺的 --> @vue/reactivity
3、renderOptions實現
renderOptions主要包含兩個部分：
dom節點的操作- 屬性的操作
const renderOptions = Object.assign({ patchProp }, nodeOps);
export { renderOptions };
3.1 nodeOps
export const nodeOps = {insert: (child, parent, anchor) => {// 添加節點parent.insertBefore(child, anchor || null);},remove: (child) => {// 節點刪除const parent = child.parentNode;parent && parent.removeChild(child);},createElement: (tag) => document.createElement(tag), // 創建節點createText: (text) => document.createTextNode(text), // 創建文本setText: (node, text) => (node.nodeValue = text), // 設置文本節點內容setElementText: (el, text) => (el.textContent = text), // 設置文本元素中的內容parentNode: (node) => node.parentNode, // 父親節點nextSibling: (node) => node.nextSibling, // 下一個節點querySelector: (selector) => document.querySelector(selector), // 搜索元素
};
3.2 patchProp
export default function patchProp(el, key, prevValue, nextValue) {if (key === "class") {return patchClass(el, nextValue);} else if (key === "style") {return patchStyle(el, prevValue, nextValue);} else if (/^on[^a-z]/.test(key)) {return patchEvent(el, key, nextValue);}else{return patchAttr(el, key, nextValue)}
}3.2.1 patchClass
export default function patchClass(el, value) {if (value) {el.className = value;} else {el.removeAttribute("class");}
}
3.2.2 patchStyle
export default function patchStyle(el, prevValue, nextValue) {let style = el.style;// 把新的加進來for (let key in nextValue) {style[key] = nextValue[key];}// 把多余的刪掉if (prevValue) {for (let key in prevValue) {if (nextValue[key] == null) {style[key] = null;}}}
}
3.2.3 patchEvent
// 創建一個調用器，執行value值，value可以改變
function createInvoker(value) {const invoker = (e) => invoker.value();invoker.value = value; // 修改value可以修改方法對應的調用函數return invoker;
}export default function patchEvent(el, name, nextValue) {const invokers = el._vei || (el._vei = {});const eventName = name.slice(2).toLowerCase();const existingInvoker = invokers[name];// 如果之前存在同名方法 則修改函數if (nextValue && existingInvoker) {return (existingInvoker.value = nextValue);}if (nextValue) {// 如果之前沒有同名方法， 則給方法賦值const invoker = (invokers[name] = createInvoker(nextValue));return el.addEventListener(eventName, invoker);}if (existingInvoker && !nextValue) {el.removeEventListener(eventName);invokers[name] = undefined;}
}3.2.4 patchAttr
export default function patchAttr(el,key, value) {if (value) {el.setAttribute(key, value);} else {el.removeAttribute(key)}
}
)
)
