Vue h函数设置属性方式选择 HTML attribute 和 DOM property

HTML attribute 和 DOM property

Vue 的 render 函数中的h方法用于创建虚拟DOM。

其中设置DOM属性的选项有两种：

• attrs 用于设置HTML定义的 attribute
• domProps 用于设置DOM定义的property

官方文档

attribute 和 property的关系

• 少量 HTML attribute 和 DOM property 之间有着1:1的映射，如：id
• 有些没有，如 colspan(attribute)、textContent(property)
• 说是映射，但是也有区别

attribute 和 property的区别

二者在初始化DOM时效果是一样的。

区别在于，property的值可以改变，attribute的值不能改变。

比较典型的两个案例：

value

<input value="foo" onchange="changeHandle()" />

<script>
  var input = document.querySelector('input')

  // 初始化时
  console.log(input.getAttribute('value')) // foo
  console.log(input.value) // foo

  function changeHandle() {
    console.log(input.getAttribute('value')) // foo
    console.log(input.value) // bar
  }
</script>

当浏览器渲染这个input时，会创建相应的DOM节点。

attribute 和 property的value都初始化为foo

当用户在输入框修改内容为bar后。

property的value变化了，而attribute的value保持不变。

也就是说：

• HTML attribute 指定了value的初始值
• DOM property 是value的当前值

disabled

我们可以通过设置property的disabled的值为 true/false来开启或关闭这个属性。

但是attribute无法通过设值的方式修改它，只能添加或删除这个属性。

<input id="prop" value="foo" />
<button onclick="changeDisabled()">property 启用/关闭disable</button>
<br><br>
<input disabled value="包含disabled属性就启用" />
<input disabled="false" value="attribute方式修改值无效" />
<script>
  var input = document.querySelector("input#prop")

  function changeDisabled() {
    input.disabled = !input.disabled
  }
</script>