挂载子节点与元素属性

const vnode = {
  type: 'div',
  // 使用 props 描述一个元素的属性
  props: {
    id: 'foo'
  },
  children: [
    {
      type: 'p',
      children: 'hello'
    }
  ]
}

一个简单的vnode对象如上，不做过多的解释了，将节点递归渲染，属性循环设置即可

HTML Attributes和DOM Properties

这点需要讲清楚一点，HTML Attributes指的是定义在HTML标签上面的属性，如:

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

这里的id\\type\\value等就是 HTML Attributes

而DOM Properties则指的是获取到DOM对象后，其自有的属性。

二者之间并不一一对应，可能属性名称不一致，可能某些属性只有一方拥有，也可能一方的某个属性在另一方中有多个属性对应。

正确的设置元素属性

一般来讲，我们设置一个元素的属性可以使用setAttributes(key, value)或者el[key] = value 。但是这两者是有区别的，通过这两种方法获取的属性，也是有区别的。所以我们应该针对不同的属性，进行特殊逻辑设置，抹平这种语言上的不同。

具体代码就不展开了，没有必要记，这就是个经验问题，用上的时候再查即可。

class的处理

vue中支持多种class的设置方式，字符串、数组、对象、以及支持这几个类型任意组合。所以对应class需要实现一个方法，兼容这几种类型的设置。（代码也不再展开）

但是有个需要注意的是，js中同样拥有多种设置class的方法：

1. el.className = newClassName
2. el.setAttribute('className', newClassName)
3. el.classList.add(newClassName)

既然有这么多种，那么我们应该选用哪种呢？答案是哪种性能好用哪种。以上三种方式中el.className = newClassName这种方式性能最好。

这点也表明，我们设计代码时也应当充分考虑不同实现方式的性能问题。