---

published: true
date: 2022-2-3
tags: ‘前端框架 Vue’

mini-vue

本章在之前的章节的基础中实现了一个简单的vue框架，其中响应式的函数有略微变化不过大致原理相同。

致谢Vue Mastery非常好的课程，可以转载，但请声明源链接：文章源链接justin3go.com(有些latex公式某些平台不能渲染可查看这个网站)

<div id="app"></div>
<script>
//vdom部分
function h(tag, props, children) {return {tag,props,children,};
}
function mount(vnode, container) {const { tag, props, children } = vnode;const el = (vnode.el = document.createElement(tag));if (props) {for (let key in props) {const value = props[key];if (key.startsWith("on")) {el.addEventListener(key.slice(2).toLowerCase(), value);} else {el.setAttribute(key, value);}}}if (children) {if (Array.isArray(children)) {children.forEach((child) => {if (typeof child === "string") {el.append(child);} else if (typeof child === "object") {mount(child, el);}});} else {el.append(children);}}container.append(el);
}function patch(n1, n2) {if (n1.tag === n2.tag) {const el = (n2.el = n1.el);//diff propsconst oldProps = n1.props || {};const newProps = n2.props || {};//添加新的属性或更改原来已有但变化了的属性for (let key in newProps) {const oldValue = oldProps[key];const newValue = newProps[key];if (newValue !== oldValue) {el.setAttribute(key, newValue);}}//移除新属性中没有的属性for (let key in oldProps) {if (!(key in newProps)) {el.removeAttribute(key);}}//diff childrenconst oldChildren = n1.children;const newChildren = n2.children;if (typeof newChildren === "string") {if (typeof oldChildren === "string") {if (oldChildren !== newChildren) {el.innerHTML = newChildren;}}} else if (typeof oldChildren === "string" && Array.isArray(newChildren)) {el.innerHTML = "";newChildren.forEach((child) => mount(child, el));} else if (Array.isArray(oldChildren) && Array.isArray(newChildren)) {const minLength = Math.min(oldChildren.length, newChildren.length);for (let i = 0; i < minLength; i++) {patch(oldChildren[i], newChildren[i]);}if (oldChildren.length === minLength) {for (let i = minLength; i < newChildren.length; i++) {mount(newChildren[i], el);}} else {for (let i = minLength; i < oldChildren.length; i++) {el.removeChild(oldChildren[i].el);}}}} else {//replace}
}//reactivity部分
let activeEffect = null;
class Dep {subs = new Set();depend() {if (activeEffect) {this.subs.add(activeEffect);}}notify() {this.subs.forEach((sub) => sub());}
}function watchEffect(effect) {activeEffect = effect;effect();activeEffect = null;
}const targetMap = new WeakMap();function getDep(target, key) {if (!targetMap.has(target)) {targetMap.set(target, new Map());}const depMap = targetMap.get(target);if (!depMap.has(key)) {depMap.set(key, new Dep());}return depMap.get(key);
}const reactiveHandlers = {get(target, key, receiver) {// depconst dep = getDep(target, key);dep.depend();return Reflect.get(target, key, receiver);},set(target, key, value, receiver) {const dep = getDep(target, key);const ret = Reflect.set(target, key, value, receiver);dep.notify();return ret;},
};function reactive(raw) {return new Proxy(raw, reactiveHandlers);
}//component组件实例
//container要挂载的dom元素
function mountApp(component, container) {let isMounted = false;let oldVdom;watchEffect(() => {if (!isMounted) {//第一次挂载oldVdom = component.render();mount(oldVdom, container);isMounted = true;} else {//数据变化,要进行更新const newVdom = component.render();patch(oldVdom, newVdom);oldVdom = newVdom;}});
}const App = {data: reactive({count: 0,}),render() {return h("div", null, [h("div",{onClick: () => App.data.count++,},String(this.data.count)),]);},
};
//一个点击自增的计数器
mountApp(App, document.getElementById("app"));</script>