refactor: handle class prop and vnode type check in Vue render process

Author: RadiumAg

books/Vue.js设计与实现/2025-2/render/index-render-plus.html

@@ -38,8 +38,12 @@
       },
 
       patchProps(el, key, prevValue, nextValue) {
+        // 对 class 进行特殊处理
+        if (key === 'class') {
+          el.className = nextValue || '';
+        }
         // 使用 shouldSetAsProps 函数判断是否应该作为 DOM Properties 设置
-        if (shouldSetAsProps(el, key, nextValue)) {
+        else if (shouldSetAsProps(el, key, nextValue)) {
           const type = typeof el[key];
           // 如果是布尔类型，并且 value 是空字符串，则将值矫正为 true
           if (type === 'boolean' && nextValue === '') {

books/Vue.js设计与实现/2025-2/render/render-plus.js

@@ -6,11 +6,24 @@ function createRenderer(options) {
    * @param {*} container 容器
    */
   function patch(oldVnode, newVnode, container) {
-    // 如果 n1 不存在，意味着挂载，则调用 mountElemnet 函数完成挂载
-    if (!oldVnode) {
-      mountElement(newVnode, container);
-    } else {
-      // n1 存在，意味着打补丁
+    // 如果 oldVnode 存在， 则对比 oldVnode 和 newVnode 的类型
+    if (oldVnode && oldVnode.type !== newVnode.type) {
+      // 如果新旧 vnode 的类型不同，则直接将旧 vnode 卸载
+      unmount(oldVnode);
+      oldVnode = null;
+    }
+
+    // 代码运行到这里， 证明 oldVnode 和 newVnode 所描述的内容相同
+    const { type } = newVnode;
+
+    if (typeof type === 'string') {
+      // 如果 oldVnode 不存在，意味着挂载，则调用 mountElemnet 函数完成挂载
+      if (!oldVnode) {
+        mountElement(newVnode, container);
+      } else {
+        patchElement(oldVnode, newVnode);
+      }
+    } else if (typeof type === 'object') {
     }
   }
 
@@ -20,7 +33,11 @@ function createRenderer(options) {
     // 处理子节点，，如果子节点是字符串，代表元素具有文本节点
 
     if (typeof vnode.children === 'string') {
-      el.textContent = vnode.children;
+      options.setElementText(el, vnode.children);
+    } else if (Array.isArray(vnode.children)) {
+      vnode.children.forEach(child => {
+        patch(null, child, el);
+      });
     }
 
     // 如果 vnode.props 存在才处理下
@@ -38,19 +55,27 @@ function createRenderer(options) {
     options.insert(el, container);
   }
 
+  function unmount(vnode) {
+    const parent = vnode.el.parentNode;
+    if (parent) {
+      // eslint-disable-next-line unicorn/prefer-dom-node-remove
+      parent.removeChild(vnode.el);
+    }
+  }
+
   function render(vnode, container) {
     if (vnode) {
       // 新 vnode 存在，将其与旧 vnode 一起传递给 patch 函数，进行打补丁
-      patch(container.__vnode, vnode, container);
+      patch(container._vnode, vnode, container);
     } else {
-      if (container.__vnode) {
-        // 旧值 存在，且新 vnode 不存在，说明是卸载（unmount）操作
-        // 只需要将 container 内的 DOM 清空即可
-        container.innerHTML = '';
+      // eslint-disable-next-line no-lonely-if
+      if (container._vnode) {
+        // 调用 unmount 函数卸载 vnode
+        unmount(container._vnode);
       }
-
-      container.__vnode = vnode;
     }
+
+    container._vnode = vnode;
   }
 
   function hydrate(vnode, container) {}
@@ -61,4 +86,37 @@ function createRenderer(options) {
   };
 }
 
-export { createRenderer };
+/**
+ * 处理 class 样式
+ * @param {*} cls
+ * @returns
+ */
+function normalizeClass(cls) {
+  let result = '';
+
+  const normalizeObj = cls => {
+    for (const [className, sign] of Object.entries(cls)) {
+      if (sign) {
+        result += ` ${className}`;
+      }
+    }
+  };
+
+  if (typeof cls === 'string') {
+    result = cls;
+  } else if (Array.isArray(cls)) {
+    for (const clsObj of cls) {
+      if (typeof clsObj === 'string') {
+        result += ` ${clsObj}`;
+      } else if (typeof clsObj === 'object' && clsObj !== null) {
+        normalizeObj(cls);
+      }
+    }
+  } else {
+    normalizeObj(cls);
+  }
+
+  return result.trim();
+}
+
+export { createRenderer, normalizeClass };