Vue VDOM如何处理非标准DOM属性（如`aria-*`/`data-*`）：属性设置的底层机制

Vue VDOM 与非标准 DOM 属性处理：一场深入解析

大家好，今天我们来深入探讨 Vue 的虚拟 DOM (VDOM) 如何处理非标准 DOM 属性，比如 aria-* 和 data-*。理解这个机制对于我们更好地利用 Vue 的特性，编写更健壮、更具可访问性的应用至关重要。

什么是 VDOM？为什么需要它？

在深入非标准属性之前，我们先简单回顾一下 VDOM 的概念。传统的 DOM 操作通常比较昂贵，频繁操作真实 DOM 会导致性能问题。VDOM 是一个轻量级的 JavaScript 对象，代表了真实 DOM 的结构。Vue 使用 VDOM 作为中间层，通过计算 VDOM 的差异 (diffing)，然后将差异应用到真实 DOM 上，从而减少直接 DOM 操作，提高性能。

VDOM 的核心：patch 算法

VDOM 的核心在于 patch 算法。patch 算法比较新旧 VDOM 树，找出需要更新的部分，然后将这些更新应用到真实 DOM。这个过程涉及到多种情况，包括：

• 创建新的 DOM 节点
• 删除旧的 DOM 节点
• 更新 DOM 节点的属性
• 更新 DOM 节点的文本内容

我们今天主要关注的是“更新 DOM 节点的属性”这个环节，特别是当属性是非标准属性时。

非标准属性：aria-* 和 data-*

aria-* 属性用于增强 Web 内容的可访问性。它们提供了关于元素用途和状态的附加信息，可以被屏幕阅读器等辅助技术读取，从而帮助残疾人更好地理解和使用 Web 应用。

data-* 属性允许开发者在 HTML 元素上存储自定义数据。这些数据可以被 JavaScript 代码访问，用于实现各种功能，而无需使用额外的 JavaScript 对象或数据结构。

这两个属性都属于非标准属性，因为它们不是 HTML 标准中预定义的属性。

Vue 如何处理标准属性？

在了解 Vue 如何处理非标准属性之前，我们先看看它是如何处理标准属性的。Vue 通过 VDOM 对象的 props 属性来管理 DOM 属性。当 Vue 组件的状态发生变化时，会生成新的 VDOM，然后 patch 算法会比较新旧 VDOM 的 props 属性，找出需要更新的属性。

对于标准属性，Vue 会直接使用 setAttribute 方法来更新 DOM 节点的属性。例如：

// 新的 VNode
const newVNode = {
  tag: 'div',
  props: {
    id: 'my-div',
    class: 'container',
    title: 'This is a div'
  },
  children: []
};

// 假设 oldVNode 存在，且 id, class, title 都不同

// 在 patch 过程中...
const el = document.createElement('div'); // 假设 el 是 div 元素

// 更新属性
el.setAttribute('id', newVNode.props.id);
el.setAttribute('class', newVNode.props.class);
el.setAttribute('title', newVNode.props.title);

这段代码展示了 Vue 如何使用 setAttribute 方法来设置标准属性。

Vue 如何处理非标准属性？

对于非标准属性，Vue 的处理方式基本相同，仍然是通过 setAttribute 方法。因为 setAttribute 方法可以设置任何属性，无论它是否是 HTML 标准中定义的。

// 新的 VNode
const newVNode = {
  tag: 'div',
  props: {
    'aria-label': 'Close dialog',
    'data-id': '12345'
  },
  children: []
};

// 假设 oldVNode 存在，且 aria-label, data-id 都不同

// 在 patch 过程中...
const el = document.createElement('div'); // 假设 el 是 div 元素

// 更新属性
el.setAttribute('aria-label', newVNode.props['aria-label']);
el.setAttribute('data-id', newVNode.props['data-id']);

这段代码表明，对于 aria-label 和 data-id 这样的非标准属性，Vue 仍然使用 setAttribute 方法进行设置。

为什么 Vue 不使用 el.ariaLabel 或 el.dataset.id？

你可能会问，为什么 Vue 不使用 el.ariaLabel 或 el.dataset.id 这样的属性访问方式呢？

• 兼容性： el.ariaLabel 这样的属性访问方式并非所有浏览器都支持。使用 setAttribute 方法可以保证更好的跨浏览器兼容性。
• 一致性： Vue 尽量保持属性设置方式的一致性，无论是标准属性还是非标准属性，都使用 setAttribute 方法。这简化了代码逻辑，也方便了维护。
• 动态性： setAttribute 方法可以动态地设置任何属性，而 el.ariaLabel 这样的属性访问方式只能设置预定义的属性。

属性设置的底层机制：patchProps 函数

在 Vue 的源码中，负责更新 DOM 属性的是 patchProps 函数。这个函数会比较新旧 VNode 的 props 属性，然后根据差异更新真实 DOM。

patchProps 函数的简化版本如下：

function patchProps(el, oldProps, newProps) {
  if (oldProps === newProps) {
    return;
  }

  oldProps = oldProps || {};
  newProps = newProps || {};

  // 处理新的属性
  for (const key in newProps) {
    const oldValue = oldProps[key];
    const newValue = newProps[key];

    if (newValue !== oldValue) {
      // 设置属性
      el.setAttribute(key, newValue);
    }
  }

  // 处理需要移除的属性
  for (const key in oldProps) {
    if (!(key in newProps)) {
      // 移除属性
      el.removeAttribute(key);
    }
  }
}

这个函数首先比较新旧 props，然后遍历新的 props，如果属性值发生了变化，就使用 setAttribute 方法设置属性。接着，遍历旧的 props，如果属性在新 props 中不存在，就使用 removeAttribute 方法移除属性。

特殊情况：布尔属性

对于布尔属性，比如 disabled 和 checked，Vue 的处理方式略有不同。如果属性值为 true，则设置属性；如果属性值为 false，则移除属性。

// 新的 VNode
const newVNode = {
  tag: 'button',
  props: {
    disabled: true
  },
  children: []
};

// 在 patch 过程中...
const el = document.createElement('button');

if (newVNode.props.disabled) {
  el.setAttribute('disabled', 'disabled'); // 或者 el.disabled = true;
} else {
  el.removeAttribute('disabled');
}

这是因为布尔属性的存在与否决定了其行为。

示例代码：使用 aria-* 和 data-*

下面是一个使用 aria-* 和 data-* 属性的 Vue 组件示例：

<template>
  <button
    @click="handleClick"
    :aria-label="buttonLabel"
    :data-button-id="buttonId"
  >
    {{ buttonText }}
  </button>
</template>

<script>
export default {
  data() {
    return {
      buttonLabel: 'Click me',
      buttonId: '42',
      buttonText: 'Press'
    };
  },
  methods: {
    handleClick() {
      alert(`Button ${this.buttonId} clicked!`);
    }
  }
};
</script>

在这个例子中，aria-label 属性提供了按钮的文本描述，用于增强可访问性。data-button-id 属性存储了按钮的 ID，可以在 JavaScript 代码中使用。

注意事项

• 属性名： 在 Vue 模板中，可以使用 kebab-case (短横线命名) 或 camelCase (驼峰命名) 来命名属性。Vue 会自动将 camelCase 转换为 kebab-case。例如，ariaLabel 会被转换为 aria-label。
• 属性值： 属性值可以是字符串、数字、布尔值或表达式。
• 动态属性： 可以使用 v-bind 指令动态地绑定属性值。

总结：Vue 如何处理非标准属性

属性类型	处理方式	使用的 API	优点	缺点
标准属性	使用 setAttribute 方法设置属性值。对于布尔属性，根据值添加或移除属性。	setAttribute	兼容性好，简单易懂，可以动态设置任何属性。	某些浏览器可能存在性能问题。
非标准属性	使用 setAttribute 方法设置属性值。	setAttribute	兼容性好，简单易懂，可以动态设置任何属性，保持代码一致性。	某些浏览器可能存在性能问题。
布尔属性	如果属性值为 true，则设置属性；如果属性值为 false，则移除属性。	setAttribute, removeAttribute	语义清晰，符合布尔属性的特性。	需要额外的判断逻辑。

总而言之，Vue 使用 setAttribute 方法来处理包括 aria-* 和 data-* 在内的所有属性，保证了跨浏览器兼容性和代码一致性。 通过 patchProps 函数比较 VNode 的属性差异并更新真实 DOM，实现了高效的 DOM 操作。

进一步思考：性能优化

虽然 setAttribute 方法可以处理所有属性，但在某些情况下，直接使用属性访问方式可能会更高效。例如，对于频繁更新的属性，可以考虑直接操作 DOM 节点的属性。

此外，还可以使用 Vue 的 v-once 指令来缓存静态属性，避免不必要的更新。

<div v-once :aria-label="staticLabel">...</div>

保持可访问性，提升用户体验

正确使用 aria-* 属性可以显著提高 Web 应用的可访问性，帮助残疾人更好地使用 Web 应用。同时，合理使用 data-* 属性可以简化 JavaScript 代码，提高开发效率。理解 Vue 如何处理这些属性，有助于我们编写更健壮、更具可访问性的应用。

更多IT精英技术系列讲座，到智猿学院