feat: add prop validation logic in Vue.js renderer

Author: RadiumAg

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

@@ -14,6 +14,14 @@
   <script type="module">
     import { createRenderer } from './render-plus.js';
 
+    function shouldSetAsProps(el, key, value) {
+      // 特殊处理
+      if (key === 'form' && el.tagName === 'INPUT') return false;
+
+      // 兜底
+      return key in el;
+    }
+
     const renderer = createRenderer({
       createElement(tag) {
         return document.createElement(tag);
@@ -28,6 +36,22 @@
         // eslint-disable-next-line unicorn/prefer-modern-dom-apis
         parent.insertBefore(el, anchor);
       },
+
+      patchProps(el, key, prevValue, nextValue) {
+        // 使用 shouldSetAsProps 函数判断是否应该作为 DOM Properties 设置
+        if (shouldSetAsProps(el, key, nextValue)) {
+          const type = typeof el[key];
+          // 如果是布尔类型，并且 value 是空字符串，则将值矫正为 true
+          if (type === 'boolean' && nextValue === '') {
+            el[key] = true;
+          } else {
+            el[key] = nextValue;
+          }
+        } else {
+          // 调用 setAttribbute 将属性设置到元素上
+          el.setAttribute(key, nextValue);
+        }
+      },
     });
 
     renderer.render(

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

@@ -29,20 +29,9 @@ function createRenderer(options) {
       // eslint-disable-next-line no-restricted-syntax
       for (const key in vnode.props) {
         // 获取该 DOM Properties 的类型
-        const type = typeof el[key];
         const value = vnode.props[key];
-        // 如果是布尔类型，并且 value 是空字符串，则将值矫正为 truue
-        if (type === 'boolean' && value === '') {
-          el[key] = true;
-        } else {
-          el[key] = value;
-        }
-        // 调用 setAttribbute 将属性设置到元素上
-        el.setAttribute(key, vnode.props[key]);
+        options.patchProps(el, key, null, value);
       }
-    } else {
-      // 如果要设置的属性没有对应的 DOM Properties,则使用setAttribute 函数设置属性
-      el.setAttribute(key, vnode.props[key]);
     }
 
     // 将元素添加到容器中