《Vuejs设计与实现》8.3 正确的设置元素属性

携手创作，共同成长！这是我参与「掘金日新计划 · 8 月更文挑战」的第28天，点击查看活动详情

在了解到HTML Attributes 与 DOM Properties之后，我才能看vueJs中如何去设置元素属性。其实对于浏览器来说，当你的html文件被加载解析之后，浏览器就会自动解析HTML Attributes并设置好对应DOM Properties，它甚至可以自动纠错，但是这一规则被现代框架破坏了。

比如react,vue这类运行时框架，它往往是把dom转换为了js代码，在index.html中，只有一个根DOM和一个script标签，后续的渲染都会由框架负责，这就导致了浏览器无法直接解析后续的HTML Attributes，框架必须完成这部分工作，并正确的设置好DOM Properties，也就有了今天的这篇文章，如何正确的设置元素属性。

我们这里有一个比较现成的例子，button有个disable属性，表示这个按钮是否不可点击。

<button disable>123</button>

如果按照我们上一篇文章所写，我们可以写出这样一个vnode

const vnode = {
    type:'button',
    disable:''
}

当我们解析到disable:''的时候，我们会调用el.setAttribute('disable','')，这样做没问题，可以实现我把按钮禁用的需要，但事实上，在我们写vue代码时，这里大概率不是字符串，而是布尔型,也就是说，vnode应该是这样

const vnode = {
    type: 'button',
    disable: false
}

disable = false表示我们不想让按钮禁用，然后我们调用el.setAttribute('disable',false),然后你会发现按钮被禁用了，这与我们意图是不符合的。你可以看一下渲染出来的DOM，它应该是这样<button disable="false">123</button>,布尔型被渲染成了字符串，意思就南辕北辙了.

解决这个问题，有一个简单的思路，就是当元素对应的属性有DOM Properties,我们优先设置DOM Properties，比如上面那个例子我们可以直接写成el.disable = false.

但是这时候你又会发现，el.disable = ''应该是不可点击的，但是在js中'' == false，又是可点击了。这时候就需要我们手动矫正一下，当属性的值为空字符时，让el.disable = true.

这只是一个简单的例子，就能看出来解析HTML有多麻烦，实际上这部分操作完全可以由浏览器去完成，但是由于框架的介入，我们需要手动实现这部分，但是框架带给了我们更好的开发体验，可以说是有利有弊吧，各有取舍吧