javascript - vue2 源码编译，标签中的属性值为何要解码?

Question

// Vue-2.0.3  compiler/parser/html-parser
function decodeAttr (value, shouldDecodeNewlines) {
  // 略
  return value
    .replace(ltRE, '<')
    .replace(gtRE, '>')
    .replace(ampRE, '&')
    .replace(quoteRE, '"')
}
function handleStartTag (match) {
    for (let i = 0; i < l; i++) {
        // attrs就是解析得到的，标签中的所有attribute
        attrs[i] = {
            name: args[1],
               value: decodeAttr(
                  value,
                  options.shouldDecodeNewlines
            )
          }
    }
}

例如有如下代码

<span attr1="&gt;&lt;&amp;" attr2="><&"></span>

将编译为

不知道这么做的意义何在？这些特殊符号作为attribute的值，也发挥不了作为特殊符号的作用，即便解码为原符号又有什么用？

Answer 1

这段代码中的 decodeAttr 函数处理了在 HTML 属性中出现的字符实体，如：< 解码为 <、> 解码为 >、& 解码为 &等。由于 HTML 中特殊字符有其对应的符号表示方式，但是当这些特殊字符作为属性值时，需要进行转义处理以避免可能的解析错误。因此，decodeAttr 负责将这些字符实体还原为它们的原始形式，以确保其正确显示并避免潜在的安全风险。