好的，我们开始今天的讲座，主题是 Vue VDOM 如何处理非标准 DOM 属性，例如 aria-* 和 data-*。我们会深入探讨属性设置的底层机制，确保理解其工作原理。
VDOM 简介与属性处理的总体思路
首先，回顾一下 Vue 的 Virtual DOM (VDOM)。VDOM 是一个轻量级的 JavaScript 对象，它代表了真实的 DOM 结构。当 Vue 组件的状态发生变化时，Vue 会创建一个新的 VDOM，并将其与之前的 VDOM 进行比较（diff 算法），找出差异，然后只更新需要更新的真实 DOM 部分。 这种方式避免了频繁操作真实 DOM 带来的性能开销。
在 VDOM 中，节点的属性（attributes）和属性（properties）都以某种形式存储。 对于标准属性，Vue 通常会直接使用 DOM API 进行设置，例如 element.setAttribute('id', 'my-element') 或者 element.className = 'my-class'。
但是，对于非标准属性，例如 aria-* 和 data-*，Vue 的处理方式略有不同。 总体思路是，Vue会尽可能地利用浏览器提供的原生API，同时考虑到兼容性和性能。
*`aria-` 属性的处理**
aria-* 属性用于增强 Web 内容的可访问性（Accessibility）。这些属性不会影响页面的视觉呈现，而是为屏幕阅读器等辅助技术提供额外的信息。
Vue 处理 aria-* 属性的方式通常是直接使用 setAttribute 方法。 尽管 aria-* 不是标准的 HTML 属性，但浏览器允许使用 setAttribute 来设置它们。
以下是一个简单的例子：
<template>
<button
:aria-label="buttonLabel"
:aria-disabled="isDisabled"
@click="handleClick"
>
{{ buttonText }}
</button>
</template>
<script>
export default {
data() {
return {
buttonLabel: 'Click me to perform an action',
isDisabled: false,
buttonText: 'Click'
};
},
methods: {
handleClick() {
alert('Button clicked!');
}
}
};
</script>在这个例子中，:aria-label 和 :aria-disabled 使用了 Vue 的属性绑定语法。 当 buttonLabel 或 isDisabled 的值发生变化时，Vue 会更新对应的 aria-* 属性。
底层实现大致如下（简化版）：
function updateAriaAttributes(el, newProps, oldProps) {
for (const key in newProps) {
if (key.startsWith('aria-')) {
const newValue = newProps[key];
const oldValue = oldProps ? oldProps[key] : null;
if (newValue !== oldValue) {
if (newValue === null || newValue === undefined || newValue === false) {
el.removeAttribute(key); // 如果值为null、undefined或false，移除属性
} else {
el.setAttribute(key, newValue);
}
}
}
}
// 处理旧属性的移除，如果新属性中不存在
if (oldProps) {
for (const key in oldProps) {
if (key.startsWith('aria-') && !(key in newProps)) {
el.removeAttribute(key);
}
}
}
}
// 假设 el 是一个 DOM 元素，newProps 是新的属性对象，oldProps 是旧的属性对象
// 在 Vue 的 patch 过程中，会调用类似这样的函数来更新 aria-* 属性关键点：
- Vue 会检测属性名是否以
aria-开头。 - 对于
aria-*属性，Vue 使用setAttribute方法来设置。 - 如果属性值为
null、undefined或false，Vue 会移除该属性。 - Vue 会比较新旧属性值，只有当值发生变化时才会更新 DOM。
*`data-` 属性的处理**
data-* 属性允许开发者在 HTML 元素上存储自定义的数据。 这些数据可以通过 JavaScript 来访问，而不会影响页面的呈现。
Vue 处理 data-* 属性的方式与 aria-* 属性类似，也是使用 setAttribute 方法。
以下是一个例子：
<template>
<div :data-user-id="userId" :data-username="username">
User Profile
</div>
</template>
<script>
export default {
data() {
return {
userId: 123,
username: 'JohnDoe'
};
}
};
</script>在这个例子中，:data-user-id 和 :data-username 使用了 Vue 的属性绑定语法。 当 userId 或 username 的值发生变化时，Vue 会更新对应的 data-* 属性。
底层实现与 aria-* 类似：
function updateDataAttributes(el, newProps, oldProps) {
for (const key in newProps) {
if (key.startsWith('data-')) {
const newValue = newProps[key];
const oldValue = oldProps ? oldProps[key] : null;
if (newValue !== oldValue) {
if (newValue === null || newValue === undefined) {
el.removeAttribute(key); // 如果值为null或undefined，移除属性
} else {
el.setAttribute(key, newValue);
}
}
}
}
// 处理旧属性的移除，如果新属性中不存在
if (oldProps) {
for (const key in oldProps) {
if (key.startsWith('data-') && !(key in newProps)) {
el.removeAttribute(key);
}
}
}
}
// 假设 el 是一个 DOM 元素，newProps 是新的属性对象，oldProps 是旧的属性对象
// 在 Vue 的 patch 过程中，会调用类似这样的函数来更新 data-* 属性关键点：
- Vue 会检测属性名是否以
data-开头。 - 对于
data-*属性，Vue 使用setAttribute方法来设置。 - 如果属性值为
null或undefined，Vue 会移除该属性。 - Vue 会比较新旧属性值，只有当值发生变化时才会更新 DOM。
为什么使用 setAttribute？
你可能会问，为什么 Vue 不直接使用 element.dataset API 来处理 data-* 属性？ element.dataset 提供了一种更方便的方式来访问和修改 data-* 属性。
原因主要有以下几点：
-
兼容性:
element.dataset在一些旧版本的浏览器中可能不支持。 使用setAttribute可以确保更好的兼容性。 虽然现在兼容性问题已经很小，但Vue的设计需要考虑到各种情况。 -
一致性: Vue 尽可能保持属性处理方式的一致性。 无论是标准属性还是非标准属性，都尽量使用统一的 API 来进行操作，这有助于简化代码和提高可维护性。
-
性能: 虽然
element.dataset在某些情况下可能更方便，但setAttribute在某些浏览器中性能可能更好，特别是在频繁更新属性时。 具体的性能差异取决于浏览器的实现。 Vue 会根据实际情况进行优化。 实际上， modern 的 Vue 版本在某些情况下会使用element.dataset, 这取决于具体的浏览器和属性。
深入底层：Vue 的 patch 过程
为了更好地理解 Vue 如何处理属性，我们需要了解 Vue 的 patch 过程。 Patch 过程是 Vue VDOM diff 算法的核心。 当 Vue 组件的状态发生变化时，Vue 会创建一个新的 VDOM，并将其与之前的 VDOM 进行比较，找出差异，然后将这些差异应用到真实的 DOM 上。
在 patch 过程中，Vue 会遍历 VDOM 的节点，并比较它们的属性。 对于每个属性，Vue 会执行以下操作：
-
检查属性是否存在于新的 VDOM 中。 如果属性不存在，Vue 会从真实的 DOM 中移除该属性。
-
检查属性是否存在于旧的 VDOM 中。 如果属性存在，Vue 会比较新旧属性值。 如果值不同，Vue 会更新真实的 DOM。
-
根据属性名，选择合适的更新策略。 对于标准属性，Vue 可能会直接使用
element.property = value的方式来设置。 对于aria-*和data-*属性，Vue 会使用setAttribute方法。
以下是一个简化的 patch 函数的例子：
function patch(oldVNode, newVNode) {
// ... 省略其他逻辑
const el = newVNode.el = oldVNode.el; // 复用旧的 DOM 元素
const oldProps = oldVNode.data.attrs || {};
const newProps = newVNode.data.attrs || {};
updateProps(el, newProps, oldProps);
// ... 省略其他逻辑
}
function updateProps(el, newProps, oldProps) {
// 更新属性
for (const key in newProps) {
const newValue = newProps[key];
const oldValue = oldProps[key];
if (newValue !== oldValue) {
if (key === 'className') {
el.className = newValue || ''; // 特殊处理 className
} else if (key.startsWith('aria-') || key.startsWith('data-')) {
if (newValue == null) {
el.removeAttribute(key);
} else {
el.setAttribute(key, newValue);
}
} else {
try {
el[key] = newValue; // 尝试直接设置 property
} catch (e) {
el.setAttribute(key, newValue); // 如果失败，则使用 setAttribute
}
}
}
}
// 移除旧的属性
for (const key in oldProps) {
if (!(key in newProps)) {
el.removeAttribute(key);
}
}
}这个例子只是为了演示 patch 过程中的属性更新逻辑。 真实的 Vue 代码要复杂得多，包含了更多的优化和错误处理。
属性设置的优先级与特殊情况
在 Vue 中，属性设置的优先级如下：
-
DOM Property: 如果属性是标准的 DOM property (例如
value,checked,disabled)，Vue 会优先尝试直接设置 DOM property。 这样做通常性能更好，因为直接操作 DOM property 比调用setAttribute更快。 -
setAttribute: 如果属性不是标准的 DOM property，或者直接设置 DOM property 失败，Vue 会使用setAttribute方法。 -
特殊属性处理: 某些属性有特殊的处理方式。 例如，
class属性会被转换为className，并且 Vue 会使用更高效的 class 操作 API 来更新 class。style属性会被转换为内联样式，并且 Vue 会使用 style 操作 API 来更新样式。
此外，还有一些特殊情况需要考虑：
-
布尔属性: 对于布尔属性 (例如
disabled,checked,readonly)，Vue 会根据属性值来决定是否添加或移除该属性。 如果属性值为true，Vue 会添加该属性。 如果属性值为false，Vue 会移除该属性。 -
null和undefined值: 当属性值为null或undefined时，Vue 会移除该属性。
总结：理解 Vue 属性处理机制的关键点
- Vue VDOM 利用 diff 算法高效更新 DOM。
aria-*和data-*属性通常通过setAttribute处理，兼顾兼容性和一致性。- Patch 过程是属性更新的核心，涉及新旧 VDOM 的比较和 DOM 操作。
- 属性设置有优先级，DOM Property 优先，
setAttribute作为备选。 - 特殊属性和布尔属性有特殊的处理逻辑。
希望本次讲座能够帮助你更好地理解 Vue VDOM 如何处理非标准 DOM 属性。 理解这些底层机制有助于你编写更高效、更健壮的 Vue 应用。
更多IT精英技术系列讲座，到智猿学院