今天深入学习h() 发现 它的第二个参数 和 setAttribute有些相似，所以写了这篇文章
MDN解释
MDN中setAttribute解释
Element 接口的 setAttribute() 方法用于设置指定元素上的某个属性值。如果属性已经存在，则更新该值；否则，使用指定的名称和值添加一个新的属性
html:```
<button>你好，世界</button>
```
const button = document.querySelector("button");
// 设置属性
button.setAttribute("name", "helloButton");
button.setAttribute("disabled", "");
MDN中setProrprity解释
setProrprity方法接口为一个声明了 CSS 样式的对象设置一个新的值
const declaration = document.style;
declaration.setProperty("margin", "1px 2px");
// 相当于:
// declaration.margin = '1px 2px';
| 方法 | 个人总结 |
|---|---|
| setAttribute | 设置属性 如：个人自定义属性、HTML属性（不推荐） |
| setProrperty | 设置css样式（包括css变量 如：--y） |
vue h()的第二个参数 与 setAttribute 相似之处
简单讲解一下 h() 创建vue虚拟节点
个人总结
h()的第二个参数和setProrperty类似地方是可以给对应的节点设置属性,但h()的第二个参数是个对象，对象值可以不是字符串，更方便优雅。
// setProrperty 设置点击事件和字体大小
element.setAttribute('onClick', '(()=> { console.log("hello div") })()');//点击事件
element.setAttribute('style', 'font-size:30px;'); // 字体大小
// h()第二个参数 设置点击事件和字体大小
<component
:is="h('div', {onclick: ()=> { console.log('hello h()') } ,style: { 'fontSize': '30px' },},'点击')">
</component>
Ai总结
- 共同点：
- 都用于设置元素的属性和事件
- 都可以处理标准 HTML 属性
- 主要区别：
-
语法结构：
setAttribute每次只能设置一个属性h()可以通过对象一次性设置多个属性
- 使用场景：
setAttribute: 用于直接 DOM 操作h(): 用于虚拟 DOM 的创建和渲染
