面试题：Vue中Provide/Inject与Vuex在数据传递场景上的主要区别

区别

数据范围与使用场景：
- Provide/Inject：适用于组件树中隔代组件间的数据传递，不适合用于大规模的、需要全局状态管理的场景。它主要解决组件间深度嵌套时传递数据的繁琐问题，是一种较为轻量级的局部状态传递方式。
- Vuex：用于管理Vue应用的全局状态，适用于整个应用中多个组件共享和交互频繁的状态数据。比如用户登录状态、购物车信息等在多个页面和组件中都可能用到的数据。
数据响应式：
- Provide/Inject：默认情况下，provide的数据不是响应式的。如果要使其响应式，需要传递一个响应式对象（如ref或reactive创建的对象）。
- Vuex：数据是响应式的，任何组件对Vuex状态的修改都会触发依赖该状态的组件重新渲染。
数据修改方式：
- Provide/Inject：数据传递后，子组件可以直接修改注入的数据，但这种修改不会自动通知其他使用该数据的组件，除非手动处理。
- Vuex：通过提交mutation来修改状态，这种方式使得状态变化可追踪、可调试，并且所有依赖该状态的组件会自动更新。

适合Provide/Inject的场景举例

在一个多层嵌套的组件结构中，例如一个后台管理系统的导航菜单组件，顶级App组件下有Sidebar组件，Sidebar组件又有多层子菜单组件。假设App组件有一个主题颜色配置（如深色模式或浅色模式），需要传递给深层的子菜单组件用于设置菜单样式。这种情况下使用Provide/Inject比较合适，因为只是局部组件树内的数据传递，且不需要复杂的状态管理。

// App.vue
<template>
  <div id="app">
    <Sidebar />
  </div>
</template>

<script setup>
import Sidebar from './components/Sidebar.vue';
import { ref } from 'vue';

const themeColor = ref('light');

provide('themeColor', themeColor);
</script>

// Sidebar.vue
<template>
  <div>
    <SubMenu />
  </div>
</template>

<script setup>
import SubMenu from './SubMenu.vue';
</script>

// SubMenu.vue
<template>
  <div :style="{ color: themeColor === 'light'? 'black' : 'white' }">
    Menu item
  </div>
</template>

<script setup>
const themeColor = inject('themeColor');
</script>

适合Vuex的场景举例

在一个电商应用中，购物车功能需要在多个页面（如商品列表页、商品详情页、结算页等）展示和操作购物车数据。这种情况下使用Vuex比较合适，因为购物车数据是全局共享且交互频繁的状态。

// store.js
import { createStore } from 'vuex';

export default createStore({
  state: {
    cart: []
  },
  mutations: {
    addToCart(state, product) {
      state.cart.push(product);
    }
  },
  actions: {
    addProductToCart({ commit }, product) {
      commit('addToCart', product);
    }
  }
});

// Product.vue
<template>
  <button @click="addToCart">Add to Cart</button>
</template>

<script setup>
import { useStore } from 'vuex';

const store = useStore();

const addToCart = () => {
  const product = { name: 'Sample Product', price: 10 };
  store.dispatch('addProductToCart', product);
};
</script>

// Cart.vue
<template>
  <div>
    <ul>
      <li v - for="item in cart" :key="item.name">{{ item.name }} - {{ item.price }}</li>
    </ul>
  </div>
</template>

<script setup>
import { useStore } from 'vuex';

const store = useStore();
const cart = store.state.cart;
</script>

星途面试题库

面试题：Vue中Provide/Inject与Vuex在数据传递场景上的主要区别

知识考点

面试题答案

区别

适合Provide/Inject的场景举例

适合Vuex的场景举例