Skip to content

Commit a6fc361

Browse files
committed
feat: add prop validation logic in Vue.js renderer
1 parent 381c411 commit a6fc361

File tree

2 files changed

+25
-12
lines changed

2 files changed

+25
-12
lines changed

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

Lines changed: 24 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -14,6 +14,14 @@
1414
<script type="module">
1515
import { createRenderer } from './render-plus.js';
1616

17+
function shouldSetAsProps(el, key, value) {
18+
// 特殊处理
19+
if (key === 'form' && el.tagName === 'INPUT') return false;
20+
21+
// 兜底
22+
return key in el;
23+
}
24+
1725
const renderer = createRenderer({
1826
createElement(tag) {
1927
return document.createElement(tag);
@@ -28,6 +36,22 @@
2836
// eslint-disable-next-line unicorn/prefer-modern-dom-apis
2937
parent.insertBefore(el, anchor);
3038
},
39+
40+
patchProps(el, key, prevValue, nextValue) {
41+
// 使用 shouldSetAsProps 函数判断是否应该作为 DOM Properties 设置
42+
if (shouldSetAsProps(el, key, nextValue)) {
43+
const type = typeof el[key];
44+
// 如果是布尔类型,并且 value 是空字符串,则将值矫正为 true
45+
if (type === 'boolean' && nextValue === '') {
46+
el[key] = true;
47+
} else {
48+
el[key] = nextValue;
49+
}
50+
} else {
51+
// 调用 setAttribbute 将属性设置到元素上
52+
el.setAttribute(key, nextValue);
53+
}
54+
},
3155
});
3256

3357
renderer.render(

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

Lines changed: 1 addition & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -29,20 +29,9 @@ function createRenderer(options) {
2929
// eslint-disable-next-line no-restricted-syntax
3030
for (const key in vnode.props) {
3131
// 获取该 DOM Properties 的类型
32-
const type = typeof el[key];
3332
const value = vnode.props[key];
34-
// 如果是布尔类型,并且 value 是空字符串,则将值矫正为 truue
35-
if (type === 'boolean' && value === '') {
36-
el[key] = true;
37-
} else {
38-
el[key] = value;
39-
}
40-
// 调用 setAttribbute 将属性设置到元素上
41-
el.setAttribute(key, vnode.props[key]);
33+
options.patchProps(el, key, null, value);
4234
}
43-
} else {
44-
// 如果要设置的属性没有对应的 DOM Properties,则使用setAttribute 函数设置属性
45-
el.setAttribute(key, vnode.props[key]);
4635
}
4736

4837
// 将元素添加到容器中

0 commit comments

Comments
 (0)