MK
摩柯社区 - 一个极简的技术知识社区
AI 面试

Vue Provide/Inject 如何处理复杂数据结构的传递

2023-11-256.6k 阅读

Vue Provide/Inject 基础回顾

在 Vue 组件系统中，provide 和 inject 是一对用于实现跨层级组件数据传递的选项。它们主要解决了非父子组件之间的数据共享问题，即所谓的 “祖孙” 关系组件的数据传递。

provide 选项允许一个组件向其所有子孙组件提供数据或方法，无论组件嵌套有多深。而 inject 选项则用于在子孙组件中接收由祖先组件 provide 提供的数据。

下面是一个简单的基础示例：

<!-- 祖先组件 -->
<template>
  <div>
    <child-one></child-one>
  </div>
</template>

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

export default {
  components: {
    ChildOne
  },
  provide() {
    return {
      message: 'Hello from ancestor'
    };
  }
};
</script>


<!-- 子孙组件 ChildOne -->
<template>
  <div>
    <p>{{ injectedMessage }}</p>
  </div>
</template>

<script>
export default {
  inject: ['message'],
  data() {
    return {
      injectedMessage: this.message
    };
  }
};
</script>

在上述示例中，祖先组件通过 provide 提供了一个 message 字符串，而子孙组件 ChildOne 通过 inject 接收并使用了这个数据。

传递简单数据结构的局限性

虽然上述示例展示了 provide 和 inject 传递简单数据（如字符串）的用法，但在实际应用中，我们往往需要传递更复杂的数据结构，如对象、数组等，并且可能需要对这些数据进行响应式处理、更新等操作。简单的数据传递方式在面对这些复杂需求时会暴露出一些局限性。

例如，当我们传递一个简单的对象作为 provide 的数据，如果在子孙组件中直接修改这个对象的属性，并不会触发 Vue 的响应式更新。

<!-- 祖先组件 -->
<template>
  <div>
    <child-one></child-one>
  </div>
</template>

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

export default {
  components: {
    ChildOne
  },
  provide() {
    return {
      user: {
        name: 'John',
        age: 30
      }
    };
  }
};
</script>


<!-- 子孙组件 ChildOne -->
<template>
  <div>
    <button @click="updateUserAge">Update Age</button>
    <p>Name: {{ user.name }}, Age: {{ user.age }}</p>
  </div>
</template>

<script>
export default {
  inject: ['user'],
  methods: {
    updateUserAge() {
      this.user.age++;
    }
  }
};
</script>

在上述代码中，点击按钮更新 user 对象的 age 属性，页面并不会重新渲染以显示更新后的值，因为直接修改对象属性没有触发 Vue 的响应式机制。

传递复杂数据结构之对象

1. 使用 reactive 创建响应式对象

为了让传递的复杂对象具有响应式，我们可以使用 Vue 的 reactive 函数。reactive 函数会将一个普通对象转换为响应式对象，Vue 会追踪对该对象属性的访问和修改，并触发相应的视图更新。

<!-- 祖先组件 -->
<template>
  <div>
    <child-one></child-one>
  </div>
</template>

<script>
import { reactive } from 'vue';
import ChildOne from './ChildOne.vue';

export default {
  components: {
    ChildOne
  },
  setup() {
    const user = reactive({
      name: 'John',
      age: 30
    });

    return {
      provide() {
        return {
          user
        };
      }
    };
  }
};
</script>


<!-- 子孙组件 ChildOne -->
<template>
  <div>
    <button @click="updateUserAge">Update Age</button>
    <p>Name: {{ user.name }}, Age: {{ user.age }}</p>
  </div>
</template>

<script>
export default {
  inject: ['user'],
  methods: {
    updateUserAge() {
      this.user.age++;
    }
  }
};
</script>

在上述代码中，祖先组件使用 reactive 创建了一个响应式的 user 对象，并通过 provide 传递。子孙组件在修改 user 对象的 age 属性时，视图会自动更新，因为 reactive 使得对象具有了响应式。

2. 对传递对象的属性进行深度监听

有时候，我们可能需要对传递对象中的某个属性进行深度监听，以执行特定的逻辑。例如，当 user 对象的 name 属性发生变化时，我们可能希望记录一条日志。

<!-- 子孙组件 ChildOne -->
<template>
  <div>
    <input v-model="user.name" placeholder="Enter name">
    <p>Name: {{ user.name }}, Age: {{ user.age }}</p>
  </div>
</template>

<script>
export default {
  inject: ['user'],
  created() {
    this.$watch(() => this.user.name, (newValue, oldValue) => {
      console.log(`Name changed from ${oldValue} to ${newValue}`);
    }, { deep: true });
  }
};
</script>

在上述代码中，通过 $watch 对 user.name 进行监听，并设置 deep: true 以确保对嵌套属性的变化也能监听到。当 name 属性变化时，会在控制台打印出相应的日志。

3. 处理对象的嵌套结构

实际应用中，传递的对象可能具有复杂的嵌套结构。例如，user 对象可能包含一个 address 对象，而 address 对象又包含多个属性。

<!-- 祖先组件 -->
<template>
  <div>
    <child-one></child-one>
  </div>
</template>

<script>
import { reactive } from 'vue';
import ChildOne from './ChildOne.vue';

export default {
  components: {
    ChildOne
  },
  setup() {
    const user = reactive({
      name: 'John',
      age: 30,
      address: {
        street: '123 Main St',
        city: 'Anytown',
        zip: '12345'
      }
    });

    return {
      provide() {
        return {
          user
        };
      }
    };
  }
};
</script>


<!-- 子孙组件 ChildOne -->
<template>
  <div>
    <p>Name: {{ user.name }}, Age: {{ user.age }}</p>
    <p>Address: {{ user.address.street }}, {{ user.address.city }}, {{ user.address.zip }}</p>
    <input v-model="user.address.city" placeholder="Enter city">
  </div>
</template>

<script>
export default {
  inject: ['user']
};
</script>

在这个示例中，祖先组件传递了一个具有嵌套 address 对象的 user 对象。子孙组件可以直接访问和修改嵌套属性，并且由于 reactive 的作用，视图会自动更新。

传递复杂数据结构之数组

1. 使用 reactive 创建响应式数组

与对象类似，我们可以使用 reactive 函数将普通数组转换为响应式数组，以便在子孙组件中对数组的操作能够触发视图更新。

<!-- 祖先组件 -->
<template>
  <div>
    <child-one></child-one>
  </div>
</template>

<script>
import { reactive } from 'vue';
import ChildOne from './ChildOne.vue';

export default {
  components: {
    ChildOne
  },
  setup() {
    const items = reactive([
      { id: 1, name: 'Item 1' },
      { id: 2, name: 'Item 2' },
      { id: 3, name: 'Item 3' }
    ]);

    return {
      provide() {
        return {
          items
        };
      }
    };
  }
};
</script>


<!-- 子孙组件 ChildOne -->
<template>
  <div>
    <ul>
      <li v-for="item in items" :key="item.id">{{ item.name }}</li>
    </ul>
    <button @click="addItem">Add Item</button>
  </div>
</template>

<script>
export default {
  inject: ['items'],
  methods: {
    addItem() {
      this.items.push({ id: this.items.length + 1, name: `New Item ${this.items.length + 1}` });
    }
  }
};
</script>

在上述代码中，祖先组件通过 reactive 创建了一个响应式的 items 数组，并传递给子孙组件。子孙组件在点击按钮添加新项时，视图会自动更新，因为 reactive 使得数组具有响应式。

2. 对数组进行过滤和映射操作

在子孙组件中，我们可能需要对传递的数组进行过滤和映射等操作。例如，我们只想显示名称包含特定字符串的项目，并将项目名称转换为大写。

<!-- 子孙组件 ChildOne -->
<template>
  <div>
    <input v-model="filterText" placeholder="Filter items">
    <ul>
      <li v-for="item in filteredItems" :key="item.id">{{ item.name }}</li>
    </ul>
  </div>
</template>

<script>
export default {
  inject: ['items'],
  data() {
    return {
      filterText: ''
    };
  },
  computed: {
    filteredItems() {
      return this.items.filter(item => item.name.includes(this.filterText)).map(item => ({...item, name: item.name.toUpperCase() }));
    }
  }
};
</script>

在上述代码中，通过 computed 属性 filteredItems 对传递的 items 数组进行过滤和映射操作。用户在输入框中输入过滤文本时，会实时显示符合条件且名称转换为大写的项目。

3. 处理数组的嵌套结构

传递的数组也可能包含嵌套结构，例如数组中的每个元素又是一个包含数组的对象。

<!-- 祖先组件 -->
<template>
  <div>
    <child-one></child-one>
  </div>
</template>

<script>
import { reactive } from 'vue';
import ChildOne from './ChildOne.vue';

export default {
  components: {
    ChildOne
  },
  setup() {
    const data = reactive([
      {
        id: 1,
        name: 'Group 1',
        subItems: [
          { subId: 11, subName: 'Sub Item 11' },
          { subId: 12, subName: 'Sub Item 12' }
        ]
      },
      {
        id: 2,
        name: 'Group 2',
        subItems: [
          { subId: 21, subName: 'Sub Item 21' },
          { subId: 22, subName: 'Sub Item 22' }
        ]
      }
    ]);

    return {
      provide() {
        return {
          data
        };
      }
    };
  }
};
</script>


<!-- 子孙组件 ChildOne -->
<template>
  <div>
    <ul>
      <li v-for="group in data" :key="group.id">
        {{ group.name }}
        <ul>
          <li v-for="subItem in group.subItems" :key="subItem.subId">{{ subItem.subName }}</li>
        </ul>
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  inject: ['data']
};
</script>

在这个示例中，祖先组件传递了一个包含嵌套数组结构的 data 数组。子孙组件可以通过多层 v - for 指令来遍历并显示嵌套的数据，并且由于 reactive 的作用，对数据的修改会触发视图更新。

传递函数和方法

除了传递数据结构，我们还可以通过 provide 传递函数和方法，以便子孙组件能够调用这些函数来执行特定的操作。

1. 传递简单函数

<!-- 祖先组件 -->
<template>
  <div>
    <child-one></child-one>
  </div>
</template>

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

export default {
  components: {
    ChildOne
  },
  provide() {
    return {
      greet: () => {
        console.log('Hello from ancestor function');
      }
    };
  }
};
</script>


<!-- 子孙组件 ChildOne -->
<template>
  <div>
    <button @click="greet">Greet</button>
  </div>
</template>

<script>
export default {
  inject: ['greet']
};
</script>

在上述代码中，祖先组件通过 provide 传递了一个简单的 greet 函数，子孙组件通过 inject 接收并在按钮点击时调用该函数，会在控制台打印出相应的信息。

2. 传递处理复杂数据结构的函数

当传递的是复杂数据结构时，传递处理这些数据结构的函数尤为重要。例如，对于前面传递的 user 对象，我们可以在祖先组件中提供一个更新 user 年龄的函数。

<!-- 祖先组件 -->
<template>
  <div>
    <child-one></child-one>
  </div>
</template>

<script>
import { reactive } from 'vue';
import ChildOne from './ChildOne.vue';

export default {
  components: {
    ChildOne
  },
  setup() {
    const user = reactive({
      name: 'John',
      age: 30
    });

    const updateUserAge = () => {
      user.age++;
    };

    return {
      provide() {
        return {
          user,
          updateUserAge
        };
      }
    };
  }
};
</script>


<!-- 子孙组件 ChildOne -->
<template>
  <div>
    <button @click="updateUserAge">Update Age</button>
    <p>Name: {{ user.name }}, Age: {{ user.age }}</p>
  </div>
</template>

<script>
export default {
  inject: ['user', 'updateUserAge']
};
</script>

在这个示例中，祖先组件不仅传递了 user 对象，还传递了 updateUserAge 函数。子孙组件通过 inject 接收并调用该函数来更新 user 对象的年龄，同时由于 user 对象是响应式的，视图会自动更新。

处理 Provide/Inject 中的响应式更新问题

虽然使用 reactive 等方法可以让传递的复杂数据结构具有响应式，但在某些情况下，仍然可能会遇到响应式更新的问题。

1. 直接替换 Provide 的数据

如果在祖先组件中直接替换 provide 的数据，例如重新赋值一个新的对象或数组，可能会导致子孙组件失去响应式连接。

<!-- 祖先组件 -->
<template>
  <div>
    <button @click="replaceUser">Replace User</button>
    <child-one></child-one>
  </div>
</template>

<script>
import { reactive } from 'vue';
import ChildOne from './ChildOne.vue';

export default {
  components: {
    ChildOne
  },
  setup() {
    const user = reactive({
      name: 'John',
      age: 30
    });

    const replaceUser = () => {
      user = reactive({
        name: 'Jane',
        age: 25
      });
    };

    return {
      provide() {
        return {
          user
        };
      },
      replaceUser
    };
  }
};
</script>


<!-- 子孙组件 ChildOne -->
<template>
  <div>
    <p>Name: {{ user.name }}, Age: {{ user.age }}</p>
  </div>
</template>

<script>
export default {
  inject: ['user']
};
</script>

在上述代码中，点击按钮 replaceUser 重新赋值 user 对象，会发现子孙组件并不会更新视图。这是因为重新赋值改变了 user 的引用，导致子孙组件的响应式连接失效。

2. 正确的更新方式

为了避免上述问题，我们应该通过修改现有响应式对象或数组的属性来实现更新，而不是直接替换它们。

<!-- 祖先组件 -->
<template>
  <div>
    <button @click="updateUser">Update User</button>
    <child-one></child-one>
  </div>
</template>

<script>
import { reactive } from 'vue';
import ChildOne from './ChildOne.vue';

export default {
  components: {
    ChildOne
  },
  setup() {
    const user = reactive({
      name: 'John',
      age: 30
    });

    const updateUser = () => {
      user.name = 'Jane';
      user.age = 25;
    };

    return {
      provide() {
        return {
          user
        };
      },
      updateUser
    };
  }
};
</script>


<!-- 子孙组件 ChildOne -->
<template>
  <div>
    <p>Name: {{ user.name }}, Age: {{ user.age }}</p>
  </div>
</template>

<script>
export default {
  inject: ['user']
};
</script>

在这个示例中，通过修改现有 user 对象的属性来更新数据，这样子孙组件能够正确接收到响应式更新并更新视图。

Provide/Inject 与 Vuex 的对比

在处理复杂数据结构传递时，Vuex 也是一个常用的解决方案。与 provide/inject 相比，它们各有优缺点。

1. 作用范围

  • Provide/Inject：主要用于解决组件树中跨层级的数据传递，作用范围是组件树内特定的祖先 - 子孙关系。
  • Vuex：是一个全局状态管理模式，适用于整个应用程序的状态共享，所有组件都可以访问和修改 Vuex 中的状态。

2. 数据响应式和更新机制

  • Provide/Inject：通过 reactive 等方式使传递的数据具有响应式，但在更新数据时需要注意避免直接替换引用导致响应式失效的问题。
  • Vuex：Vuex 本身基于 Vue 的响应式系统，通过 mutations 和 actions 来更新状态，状态的变化会自动触发依赖该状态的组件重新渲染。

3. 适用场景

  • Provide/Inject：适用于组件树内局部的、特定层级间的数据共享，例如某个组件及其子孙组件之间需要共享一些数据，且这些数据不需要在整个应用中全局使用。
  • Vuex：适用于管理应用的全局状态，如用户登录状态、购物车数据等，这些数据在多个组件中都可能需要访问和修改。

例如，在一个电商应用中，购物车数据可能适合放在 Vuex 中管理，因为多个不同层级的组件都可能需要操作购物车。而某个特定页面组件及其子孙组件之间共享的一些临时配置数据，则可以使用 provide/inject 来传递。

总结

通过 provide 和 inject 传递复杂数据结构时，我们需要根据数据类型（对象、数组等）的特点，合理使用 Vue 的响应式系统（如 reactive 函数），确保数据的正确传递和响应式更新。同时，要注意避免因数据引用变化等问题导致的响应式失效。在选择 provide/inject 还是 Vuex 时，需要根据数据的作用范围和应用场景来决定。掌握这些要点，能够帮助我们在前端开发中更高效地处理复杂数据结构的传递，提升应用的性能和用户体验。

在实际项目中，我们还需要结合具体业务需求，灵活运用 provide/inject，并与其他 Vue 特性（如组件通信、计算属性、侦听器等）相结合，构建出健壮且易于维护的前端应用。例如，在一个大型单页应用中，可能既有通过 provide/inject 实现的局部组件间数据共享，又有 Vuex 管理的全局状态，两者相互配合，共同支撑应用的业务逻辑。

同时，在开发过程中要注意代码的可维护性和可读性。对于通过 provide/inject 传递的数据和方法，要进行清晰的命名和注释，以便其他开发人员能够快速理解数据的来源和用途。在处理复杂数据结构时，合理地进行数据封装和逻辑拆分，避免将过多的复杂操作集中在一个组件中，使代码结构更加清晰。

此外，随着应用的不断发展和需求的变化，可能需要对 provide/inject 传递的数据结构和逻辑进行调整和优化。例如，当发现某个原本通过 provide/inject 传递的数据在多个不相关的组件中也需要使用时，可能就需要考虑将其迁移到 Vuex 中进行全局管理。因此，在开发过程中要保持对代码架构的敏感度，及时做出合理的调整。

总之，深入理解和熟练运用 provide/inject 处理复杂数据结构的传递，是前端开发人员提升技术能力和开发高质量 Vue 应用的重要一环。通过不断实践和总结经验，我们能够更好地应对各种复杂的业务场景，为用户带来更流畅、更高效的应用体验。