经历
由于自己的工作需要，最近两三年都没有接触vue，一直在玩Angular，vue3出了好长一段时间，也没有系统的学习。最近刚好不忙，整理一下vue的东西。vue的核心当然是响应式的处理，数据变化更新视图，视图变化更新数据，MVVM的架构。虚拟DOM的引入，diff算法局部更新。本文简单实现vue的虚拟DOM，响应式原理。
vue响应式原理DOM更新过程
watchEffect收集数据 -> Dep实例管理收集的依赖, dep.depend -> Object.defineProperty数据变化的监听 -> 数据变化内容派发 dep.notify
虚拟DOM，挂载，diff算法对比实现, render.js
function h(tag, props, children) {
// 返回虚拟DOM
return {
tag,
props,
children
}
}
// 将虚拟DOM挂在到元素上。
function mount(vnode, container) {
const el = vnode.el = document.createElement(vnode.tag);
// 处理属性。
if (vnode.props) {
for (let key in vnode.props) {
// 处理事件。
if (key.startsWith("on")) {
el.addEventListener(key.slice(2).toLowerCase(), vnode.props[key]);
} else {
el.setAttribute(key, vnode.props[key]);
}
}
}
if (vnode.children) {
if (typeof vnode.children === "string") {
el.textContent = vnode.children;
} else {
for (let i = 0; i < vnode.children.length; i++) {
mount(vnode.children[i], el);
}
}
}
container.appendChild(el);
}
// 虚拟DOM对比，更新数据。
function patch(vnode1, vnode2) {
// 元素类型不同直接替换。
if (vnode1.tag !== vnode2.tag) {
mount(vnode2, el.parentElement);
el.parentElement.removeChild(el);
} else {
// 对比props
const el = vnode2.el = vnode1.el;
let oldProps = vnode1.props || {};
let newProps = vnode2.props || {};
for (let key in newProps) {
if (key.startsWith("on")) {
el.addEventListener(key.slice(2).toLowerCase(), newProps[key]);
} else {
el.setAttribute(key, newProps[key]);
}
}
for (let key in oldProps) {
if (key.startsWith("on")) {
// 即使绑定的事件类型和响应函数都相同，这里也要进行移除，因为函数的地址不一样。
el.removeEventListener(key.slice(2).toLowerCase(), oldProps[key]);
} else {
if (!(key in newProps)) {
el.removeAttribute(key);
}
}
}
let oldChild = vnode1.children || [];
let newChild = vnode2.children || [];
if (typeof newChild === "string") {
if (oldChild !== newChild) {
el.innerHTML = newChild;
}
} else {
if (typeof oldChild === "string") {
for (let i = 0; i < newChild.length; i++) {
mount(newChild[i], el)
}
} else {
// 都是数组的情况
let minLen = Math.min(oldChild.length, newChild.length);
for (let i = 0; i < minLen; i++) {
// 个数相同的节点部分直接进行虚拟DOM对比
patch(oldChild[i], newChild[i]);
}
if (oldChild.length > newChild.length) {
for (let i = (oldChild.length - newChild.length); i < oldChild.length; i++) {
el.removeChild(oldChild[i].el);
}
}
if (oldChild.length < newChild.length) {
for (let i = (newChild.length - oldChild.length); i < newChild.length; i++) {
mount(newChild[i], el)
}
}
}
}
}
}
响应式原理， reactive.js
let activeEffec = null;
let targetMap = new WeakMap();
class Dep {
constructor() {
// 使用Set避免重复添加依赖。
this.subscribes = new Set();
}
// depend依赖收集
depend() {
if (activeEffect) {
this.subscribes.add(activeEffect);
}
}
// 收集的依赖进行派发
notify() {
this.subscribes.forEach(effect => {
effect();
})
}
}
// 依赖收集的结构：
// let targetMap = new WeakMap();
// let depMap = targetMap.get(raw);
// let dep = depMap.get(key);
function getDep(raw, key) {
// 获取目标对象对应的Map
let depMap = targetMap.get(raw);
if (!depMap) {
depMap = new Map();
targetMap.set(raw, depMap);
}
// 获取目标对象里面的key对应的Dep
let dep = depMap.get(key);
if (!dep) {
dep = new Dep();
depMap.set(key, dep);
}
return dep;
}
// vue2实现响应式处理
function reactive(raw) {
Object.keys(raw).forEach(key => {
let dep = getDep(raw, key);
let value = raw[key];
Object.defineProperty(raw, key, {
get() {
dep.depend();
return value;
},
set(newValue) {
value = newValue;
dep.notify();
}
})
})
return raw;
}
// vue3实现响应式原理
// function reactive(raw) {
// return new Proxy(raw, {
// get(target, key) {
// const dep = getDep(target, key);
// dep.depend();
// return target[key];
// },
// set(target, key, newValue) {
// const dep = getDep(target, key);
// target[key] = newValue;
// dep.notify();
// }
// })
// }
// 依赖收集
function watchEffect(effect) {
activeEffect = effect;
// 执行函数，里面有用到响应式数据，会把该函数放到dep实例中。
effect();
activeEffect = null;
}
实例化组件，createApp实现，index.js
function createApp(rootComponent) {
return {
mount: function (select) {
let isMount = false;
let oldNode = null;
watchEffect(function () {
if (!isMount) {
oldNode = rootComponent.render();
mount(oldNode, document.querySelector(select));
isMount = true;
} else {
let newNode = rootComponent.render();
patch(oldNode, newNode);
oldNode = newNode;
}
})
}
}
}
html实例化调用createApp
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div id="app"></div>
<script src="./render.js"></script>
<script src="./reactive.js"></script>
<script src="./index.js"></script>
<script>
// 1.创建根组件
const App = {
data: reactive({
counter: 0
}),
render() {
return h("div", null, [
h("h2", null, `当前计数: ${this.data.counter}`),
h("button", {
onClick: () => {
this.data.counter++;
}
}, "+1")
])
}
}
// 2.挂载根组件
const app = createApp(App);
app.mount("#app");
</script>
</body>
</html>
