1
<script src="https://cdn.jsdelivr.net/npm/@vue/reactivity@3.2.45/dist/reactivity.global.min.js"></script>
2
<script type="module">
3
  import { renderer } from "./render.js";
4

5
  const { effect, ref } = VueReactivity;
6

7
  const count = ref(1);
8

9
  effect(() => {
10
    renderer(
11
      `<h1>vue3 renderer times: ${count.value}</h1>`,
12
      document.getElementById("app")
13
    );
14
  });
15

16
  setTimeout(() => {
17
    count.value++;
18
  }, 2000);
19
</script>

1
/** 创建一个渲染器 */
2
function createRenderer() {
3
  const render = (vnode, container) => {
4
    // ...
5
  };
6

7
  // 后续会有各种方法
8

9
  return { render };
10
}

1
const renderer = createRenderer();
2
renderer.render(vNode, document.getElementById("app"));

1
renderer.render(vNode, document.getElementById("app"));

1
renderer.render(newVNode, document.getElementById("app"));

1
/** 创建一个渲染器 */
2
function createRenderer() {
3
  const render = (vnode, container) => {
4
    if (vnode) {
5
      // 新的node存在的情况，将其旧的vnode一起传递给patch函数进行补丁的更新
6
      patch(container._vnode, vnode, container);
7
    } else {
8
      if (container._vnode) {
9
        // 旧的vnode存在，新的vnode不存在的情况，说明是一个 unmount（卸载）的操作
10
        // 这里只需要将container内dom清空就可以, 目前暂时这样清空
11
        container.innerHTML = "";
12
      }
13
    }
14
    // 每一次都需要保存上一次的vnode，存储在container下
15
    container._vnode = vnode; // 暂时使用这段代码清空，后续会完善
16
  };
17

18
  return { render };
19
}

1
/** 浏览器端的相关api */
2
const BROWSER_APIS = {
3
  // 用于创建元素
4
  createElement(tag) {
5
    return document.createElement(tag);
6
  },
7

8
  /** 用于设置元素的文本节点 */
9
  setElementText(el, text) {
10
    el.textContent = text;
11
  },
12

13
  /** 给特定的parent下添加指定的元素 */
14
  insert(el, parent, anchor = null) {
15
    parent.insertBefore(el, anchor);
16
  },
17
};
18

19
export default BROWSER_APIS;

1
/** 创建一个渲染器 */
2
function createRenderer(options) {
3
  const { createElement, insert, setElementText } = options;
4

5
  /** 挂载 */
6
  function mountElement(vnode, container) {
7
    // ...
8
  }
9

10
  /** 更新对比 */
11
  function patch(n1, n2, container) {
12
    // ...
13
  }
14

15
  /** 渲染方法 */
16
  const render = (vnode, container) => {
17
    // ...
18
  };
19

20
  return { render };
21
}
22

23
export { createRenderer };

1
/** 挂载 */
2
function mountElement(vnode, container) {
3
  // 创建dom元素
4
  const el = createElement(vnode.type); // ➕
5
  //处理子节点, 如果子节点是字符串，代表元素具有文本节点
6
  if (typeof vnode.children === "string") {
7
    // 只需要设置元素的textContent的属性即可
8
    setElementText(e, vnode.children); // ➕
9
  }
10
  // 将元素添加到容器中
11
  insert(el, container); // ➕
12
}

1
<input id="my-input" type="text" value="foo" />

1
/** 挂载函数调用 */
2
function mountElement(vnode, container) {
3
  // 创建dom元素
4
  const el = createElement(vnode.type);
5
  console.log(el);
6
  //处理子节点, 如果子节点是字符串，代表元素具有文本节点
7
  if (typeof vnode.children === "string") {
8
    // 只需要设置元素的textContent的属性即可
9
    setElementText(el, vnode.children);
10
  } else if (Array.isArray(vnode.children)) {
11
    // 如果children是数组，则便遍历每一个字节点，然后调用patch的方法
12
    vnode.children.forEach((child) => {
13
      patch(null, child, el);
14
    });
15
  }
16

17
  // 处理props, 存在的情况下进行处理
18
  if (vnode.props) {
19
    // 遍历
20
    for (const key in vnode.props) {
21
      const value = vnode.props[key]; // 获取props对应key的value
22
      // dom properties存在的情况
23
      if (key in el) {
24
        el[key] = value;
25
      } else {
26
        // 设置的属性没有对应的DOM properties的情况，调用setAttribute将属性设置到元素上
27
        el.setAttribute(key, value);
28
      }
29
    }
30
  }
31

32
  // 将元素添加到容器中
33
  insert(el, container);
34
}

1
<p class="foo bar"></p>

1
<p :class="{ foo:true,  bar:false }"></p>

1
<p :class="['foo bar', {foo:true,  bar:false }]"></p>

1
const vNode = {
2
  type: "p",
3
  props: {
4
    class: "foo bar",
5
  },
6
};

1
const vNode = {
2
  type: "p",
3
  props: {
4
    class: normalizeClass([
5
      "foo",
6
      {
7
        foo: false,
8
        bar: true,
9
      },
10
    ]),
11
  },
12
};

1
/** 挂载函数调用 */
2
function mountElement(vnode, container) {
3
  // 创建dom元素
4
  const el = createElement(vnode.type);
5
  console.log(el);
6
  vnode.el = el; // 将其创建出来的dom添加到vnode上，建立联系 ➕
7
  //处理子节点, 如果子节点是字符串，代表元素具有文本节点
8
  if (typeof vnode.children === "string") {
9
    // ...
10
  } else if (Array.isArray(vnode.children)) {
11
    // ...
12
  }
13

14
  // 处理props, 存在的情况下进行处理
15
  if (vnode.props) {
16
    // ...
17
  }
18

19
  // 将元素添加到容器中
20
  insert(el, container);
21
}

1
/** 渲染方法 */
2
const render = (vnode, container) => {
3
  if (vnode) {
4
    // 新的node存在的情况，将其旧的vnode一起传递给patch函数进行补丁的更新
5
    patch(container._vnode, vnode, container);
6
  } else {
7
    if (container._vnode) {
8
      // 旧的vnode存在，新的vnode不存在的情况，说明是一个 unmount（卸载）的操作
9
      // 根据vnode获取要卸载的真实dom元素
10
      const el = container._vnode.el; // ➕
11
      // 获取el的父级元素
12
      const parent = el.parentNode; // ➕
13
      // 调用removeChild删除元素
14
      if (parent) parent.removeChild(el); // ➕
15
    }
16
  }
17
  // 每一次都需要保存上一次的vnode，存储在container下
18
  container._vnode = vnode;
19
};

1
/** 卸载操作 */
2
function unmount(vnode) {
3
  // 根据vnode获取要卸载的真实dom元素
4
  // 获取el的父级元素
5
  const parent = vnode.el.parentNode;
6
  if (parent) {
7
    parent.removeChild(vnode.el);
8
  }
9
}

1
const render = (vnode, container) => {
2
  if (vnode) {
3
    // 新的node存在的情况，将其旧的vnode一起传递给patch函数进行补丁的更新
4
    patch(container._vnode, vnode, container);
5
  } else {
6
    if (container._vnode) {
7
      // 旧的vnode存在，新的vnode不存在的情况，说明是一个 unmount（卸载）的操作
8
      unmount(container._vnode); // ➕
9
    }
10
  }
11
  // 每一次都需要保存上一次的vnode，存储在container下
12
  container._vnode = vnode;
13
};

1
 /** 将属性设置相关的操作封装到patchProps的函数中，并作为渲染器选项传递 */
2
  patchProps(el, key, preValue, nextValue) {
3
    // 匹配事件，以on开头
4
    if (/^on/.test(key)) { // ➕
5
      // 根据属性名称得到对应的事件名称
6
      const name = key.slice(2).toLowerCase(); // ➕
7
      // 移除上一次绑定的事件处理函数
8
      prevValue && el.removeEventListener(name, prevValue); // ➕
9
      // 绑定事件, nextvalue为事件函数
10
      el.addEventListener(name, nextValue); // ➕
11
    } else if (key === "class") {
12
      // ...
13
    } else if (shouldSetAsProps(el, key, nextValue)) {
14
       // ...
15
    } else {
16
      // ...
17
    }
18
  }

1
/** 将属性设置相关的操作封装到patchProps的函数中，并作为渲染器选项传递 */
2
function patchProps(el, key, prevValue, nextValue) {
3
  // 匹配事件，以on开头
4
  if (/^on/.test(key)) {
5
    // 定义el.vei为一个对象，存在事件名称到事件处理函数的映射
6
    const invokers = el._vei || (el._vei = {});
7

8
    // 获取该元素伪造的事件处理函数, 根据key
9
    let invoker = invokers[key];
10
    // 根据属性名称得到对应的事件名称
11
    const name = key.slice(2).toLowerCase();
12

13
    if (nextValue) {
14
      if (!invoker) {
15
        // 如果没有invoker，为首次监听，则去伪造一个缓存到el.vei中
16
        invoker = el._vei[key] = (e) => {
17
          // 如果invoker是数组的情况，需要遍历执行
18
          if (Array.isArray(invoker.value)) {
19
            invoker.value.forEach((fn) => fn(e));
20
          } else {
21
            // 这里才是处理真正的事件函数
22
            invoker.value(e);
23
          }
24
        };
25
        // 赋值事件处理函数到invoker的value上
26
        invoker.value = nextValue;
27
        // 绑定invoker
28
        el.addEventListener(name, invoker);
29
      } else {
30
        // 存在invoker说明是更新，只需要更新invoker.value值就行
31
        invoker.value = nextValue;
32
      }
33
    } else if (invoker) {
34
      // 新的事件函数不存在，需要销毁invoker
35
      el.removeEventListener(name, invoker);
36
    }
37
  } else if (key === "class") {
38
    // ...
39
  } else if (shouldSetAsProps(el, key, nextValue)) {
40
    // ....
41
  } else {
42
    // ...
43
  }
44
}

1
/** 更新子节点 */
2
function pacthElement(n1, n2) {
3
  n2.el = n1.el;
4
  const el = n2.el;
5
  const { props: oldProps } = n1;
6
  const { props: newProps } = n2;
7
  // step 1 更新props
8
  for (const key in newProps) {
9
    if (newProps[key] !== oldProps[key]) {
10
      patchProps(el, key, oldProps[key], newProps[key]);
11
    }
12
  }
13
  for (const key in oldProps) {
14
    if (!(key in newProps)) {
15
      patchProps(el, key, oldProps[key], null);
16
    }
17
  }
18

19
  // step 2：更新children
20
  pacthChildren(n1, n2, el);
21
}

1
// 加入人为的文本节点标识
2
const Text = Symbol();
3
const newVnode = {
4
  type: Text,
5
  children: "文本节点",
6
};
7
// 加入人为的注释节点标识
8
const Comment = Symbol();
9
const newVnode = {
10
  type: Comment,
11
  children: "注释的节点",
12
};