Vue组件中的`inheritAttrs: false`的底层实现：属性传递与VNode属性挂载的控制 - 智猿学院-前后端，数据库，人工智能，云计算等领域前沿技术讲座

Vue 组件 `inheritAttrs: false` 的底层实现：属性传递与 VNode 属性挂载的控制

大家好，今天我们来深入探讨 Vue 组件中 inheritAttrs: false 这个配置项的底层实现原理。理解这个配置项的作用，有助于我们更好地控制组件的属性传递行为，构建更加灵活和可维护的 Vue 应用。

什么是 `inheritAttrs` 以及它的作用

默认情况下，Vue 组件会将父组件传递给它的所有非 props 声明的属性（attributes）应用到组件的根元素上。这被称为“属性继承”。例如：

// ParentComponent.vue
<template>
  <ChildComponent class="my-class" data-id="123" />
</template>

// ChildComponent.vue
<template>
  <div>Hello, I'm a child!</div>
</template>

在这个例子中，ChildComponent 会渲染成：

<div class="my-class" data-id="123">Hello, I'm a child!</div>

class 和 data-id 属性都被自动添加到了 ChildComponent 的根 div 元素上。

inheritAttrs: false 的作用就是阻止这种默认的属性继承行为。当你在组件中设置 inheritAttrs: false 时，Vue 不会自动将这些属性应用到组件的根元素上。

// ChildComponent.vue
<template>
  <div>Hello, I'm a child!</div>
</template>

<script>
export default {
  inheritAttrs: false
}
</script>

现在，ChildComponent 会渲染成：

<div>Hello, I'm a child!</div>

class 和 data-id 属性不再被自动继承。

为什么要使用 `inheritAttrs: false`

使用 inheritAttrs: false 主要有以下几个原因：

更好的控制组件结构： 有时，我们不希望父组件的属性直接影响子组件的根元素。例如，我们可能需要将这些属性应用到子组件内部的某个特定元素上，或者根据属性的值进行一些逻辑处理。
避免属性冲突： 如果父组件传递的属性与子组件内部的属性发生冲突，可能会导致意外的行为。inheritAttrs: false 可以避免这种冲突。
更清晰的组件接口： 通过显式声明 props 和控制属性继承，我们可以更好地定义组件的公共接口，提高代码的可读性和可维护性。

底层实现原理：VNode 与属性处理

要理解 inheritAttrs: false 的底层实现，我们需要了解 Vue 的 VNode (Virtual DOM Node) 结构以及 Vue 如何处理组件的属性。

VNode 的创建：

当 Vue 渲染组件时，它首先会创建一个 VNode 树，表示组件的虚拟 DOM 结构。每个 VNode 节点都包含有关该节点的信息，例如标签名、属性、子节点等。

在上面的例子中，ParentComponent 会创建一个 ChildComponent 的 VNode。这个 VNode 会包含父组件传递的 class 和 data-id 属性。
属性的分类：

在创建 VNode 的过程中，Vue 会对属性进行分类，主要分为以下几类：
- props： 通过 props 选项声明的属性。
- attrs： 所有没有被声明为 props 的属性，也就是“非 props 属性”。
- domProps： 对应于 DOM 元素的属性，例如 innerHTML、value 等。
- on： 事件监听器，例如 click、input 等。
- directives： 指令，例如 v-model、v-if 等。
inheritAttrs 主要影响的是 attrs 这一类属性的处理。
inheritAttrs 的作用：

当 inheritAttrs 为 true (默认值) 时，Vue 会将 VNode 的 attrs 对象中的所有属性合并到组件根元素的 VNode 的属性中。这意味着这些属性会被应用到组件的根元素上。

当 inheritAttrs 为 false 时，Vue 不会自动将 VNode 的 attrs 对象中的属性合并到组件根元素的 VNode 的属性中。
$attrs 的暴露：

当 inheritAttrs 为 false 时，Vue 会将 VNode 的 attrs 对象暴露给组件实例，可以通过 $attrs 属性访问。这使得组件可以手动处理这些未继承的属性。

例如：
```
// ChildComponent.vue
<template>
  <div :class="$attrs.class" :data-id="$attrs['data-id']">Hello, I'm a child!</div>
</template>

<script>
export default {
  inheritAttrs: false
}
</script>
```
在这个例子中，ChildComponent 通过 $attrs 访问 class 和 data-id 属性，并将它们应用到组件内部的 div 元素上。

源码分析 (简化版)

虽然直接阅读 Vue 的完整源码比较复杂，但我们可以通过一个简化的例子来理解 inheritAttrs: false 的实现原理。

假设我们有一个 createComponentVNode 函数，用于创建组件的 VNode。这个函数会接收组件的配置对象和属性作为参数。

function createComponentVNode(component, props) {
  const { inheritAttrs = true, render } = component;
  const attrs = {};
  const domProps = {};
  const on = {};

  // 分离 props 和 attrs
  const componentProps = component.props || {};
  for (const key in props) {
    if (componentProps[key]) {
      // 是 props
    } else {
      attrs[key] = props[key]; // 非 props 属性
    }
  }

  const vnode = {
    component,
    type: 'Component',
    props: {}, // 存储 props
    attrs: attrs, // 存储 attrs
    domProps: domProps,
    on: on,
    children: []
  };

  // 如果 inheritAttrs 为 true，则将 attrs 合并到根元素的 props 中
  if (inheritAttrs) {
      // 假设 getRootVNode 获取组件根元素的 VNode
      const rootVNode = getRootVNode(vnode);
      if (rootVNode) {
          for (const key in attrs) {
              rootVNode.props[key] = attrs[key];
          }
      }
  } else {
      // 将 attrs 暴露给组件实例
      vnode.component.instance = vnode.component.instance || {};
      vnode.component.instance.$attrs = attrs;
  }

  return vnode;
}

// 模拟获取组件根元素的 VNode (简化版)
function getRootVNode(vnode) {
    // 实际实现会更复杂，需要遍历 VNode 树
    if (vnode.component && vnode.component.render) {
        // 假设 render 函数返回根元素的 VNode
        return vnode.component.render();
    }
    return null;
}

// 示例组件
const MyComponent = {
    props: ['name'],
    inheritAttrs: false,
    render() {
        // 模拟返回根元素的 VNode
        return {
            tag: 'div',
            props: {},
            children: ['Hello']
        };
    }
};

// 创建 MyComponent 的 VNode
const props = { name: 'World', class: 'my-class' };
const componentVNode = createComponentVNode(MyComponent, props);

console.log(componentVNode);
console.log(componentVNode.component.instance.$attrs);

在这个简化的例子中，我们可以看到：

createComponentVNode 函数会分离 props 和 attrs。
如果 inheritAttrs 为 true，attrs 会被合并到根元素的 props 中。
如果 inheritAttrs 为 false，attrs 会被暴露给组件实例的 $attrs 属性。

需要注意的是，这只是一个非常简化的例子，实际的 Vue 源码要复杂得多。 例如，Vue 还会处理属性的优先级、合并策略等问题。

使用场景示例

以下是一些使用 inheritAttrs: false 的常见场景：

自定义组件的样式：

假设我们有一个自定义的按钮组件，我们希望完全控制按钮的样式，而不是让父组件传递的 class 属性影响按钮的样式。

// MyButton.vue
<template>
  <button class="my-button" :class="customClass">
    <slot></slot>
  </button>
</template>

<script>
export default {
  inheritAttrs: false,
  props: {
    customClass: {
      type: String,
      default: ''
    }
  },
  mounted() {
    console.log(this.$attrs); // 可以访问到父组件传递的 class 属性
  }
}
</script>

<style scoped>
.my-button {
  /* 自定义按钮样式 */
  background-color: #4CAF50;
  color: white;
  padding: 10px 20px;
  border: none;
  cursor: pointer;
}
</style>

在这个例子中，inheritAttrs: false 阻止了父组件传递的 class 属性直接应用到 button 元素上。我们通过 customClass 属性来控制按钮的额外样式。

将属性传递给子组件：

有时，我们需要将父组件传递的属性传递给子组件，而不是应用到当前组件的根元素上。

// MyWrapper.vue
<template>
  <div class="wrapper">
    <MyInput v-bind="$attrs" />
  </div>
</template>

<script>
import MyInput from './MyInput.vue';

export default {
  inheritAttrs: false,
  components: {
    MyInput
  }
}
</script>

// MyInput.vue
<template>
  <input type="text" />
</template>

在这个例子中，MyWrapper 组件接收父组件传递的所有属性，并将它们通过 v-bind="$attrs" 传递给 MyInput 组件。

处理第三方组件的属性：

如果你的组件包裹了一个第三方组件，而你希望控制传递给第三方组件的属性，inheritAttrs: false 也会很有用。

// MyCustomSelect.vue
<template>
 <div>
   <select v-bind="$attrs">
     <option v-for="item in options" :key="item.value" :value="item.value">{{ item.label }}</option>
   </select>
 </div>
</template>

<script>
export default {
 inheritAttrs: false,
 props: {
   options: {
     type: Array,
     required: true
   }
 },
 mounted() {
   console.log('Attributes passed to the select element:', this.$attrs);
 }
};
</script>

在这个例子中，inheritAttrs: false 确保了传递给 MyCustomSelect 的任何属性（比如 class, id, name）都会被绑定到 select 元素上。同时，你仍然可以通过 this.$attrs 访问这些属性，进行额外的处理或记录。

`inheritAttrs` 和 `props` 的区别

特性	`props`	`attrs` (通过 `inheritAttrs: false` 和 `$attrs` 使用)
声明方式	在组件的 `props` 选项中显式声明	没有显式声明
数据类型	可以指定数据类型、默认值和验证规则	无法指定数据类型和验证规则
用途	用于定义组件的公共接口，接收来自父组件的数据	用于传递非 `props` 属性，例如 HTML 属性、事件监听器等
访问方式	通过 `this.propName` 访问	通过 `this.$attrs.attrName` 访问
影响组件更新	当 `props` 发生变化时，会触发组件的重新渲染	当 `attrs` 发生变化时，也会触发组件的重新渲染

总结

inheritAttrs: false 阻止了非 props 属性自动应用到组件的根元素上。
通过 $attrs 属性，组件可以手动处理这些未继承的属性。
合理使用 inheritAttrs: false 可以更好地控制组件的结构和行为，提高代码的可读性和可维护性。

希望通过今天的讲解，大家能够更好地理解 inheritAttrs: false 的底层实现原理和使用场景，并在实际项目中灵活运用。

属性继承控制，灵活组件设计

inheritAttrs: false 允许我们更精细地控制属性的传递，实现更灵活、可控的组件设计。

VNode 属性管理，掌握组件渲染

理解 VNode 的属性处理机制，有助于我们更深入地掌握 Vue 的组件渲染过程。

`$attrs` 的妙用，定制组件行为

通过 $attrs 访问未继承的属性，我们可以根据实际需求定制组件的行为。

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

Vue 组件 inheritAttrs: false 的底层实现：属性传递与 VNode 属性挂载的控制

什么是 inheritAttrs 以及它的作用

为什么要使用 inheritAttrs: false