面试题：如何在Vue Composition API中实现响应式数据跨多个setup函数共享

Question

假设你正在开发一个复杂的Vue应用，有多个组件使用Composition API，需要在不同组件的setup函数之间共享一些响应式数据。描述你会使用什么方法来实现这种共享，并详细说明该方法的原理、优势及可能存在的问题。

Answer 1

方法

1. 使用Vuex：
   • 实现方式：在Vuex中定义状态（state）来存储共享的响应式数据。各个组件通过useStore钩子函数获取store实例，从而访问和修改共享数据。例如：

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

const store = createStore({
  state () {
    return {
      sharedData: 'default value'
    }
  },
  mutations: {
    updateSharedData (state, newData) {
      state.sharedData = newData
    }
  }
})

export default store

// ComponentA.vue
<template>
  <div>
    <p>{{ sharedData }}</p>
    <button @click="updateData">Update Data</button>
  </div>
</template>

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

const store = useStore()
const sharedData = computed(() => store.state.sharedData)
const updateData = () => {
  store.commit('updateSharedData', 'new value')
}
</script>

• 原理：Vuex采用集中式存储管理应用的所有组件的状态。它通过Vue的响应式系统来追踪状态的变化，当状态改变时，依赖它的组件会自动重新渲染。
• 优势：
  • 状态管理集中：便于维护和调试，所有共享状态都集中在store中，开发者可以清晰地看到数据的流向和变化。
  • 可预测性：通过mutations来修改状态，使得状态变化可追踪和回滚，提高了应用的可维护性。
  • 适合大型应用：随着应用规模的扩大，Vuex能很好地管理复杂的状态关系。
• 可能存在的问题：
  • 学习成本：对于简单应用，引入Vuex可能增加项目的复杂性，开发者需要学习Vuex的概念和使用方法。
  • 过度使用：如果滥用Vuex，将一些本不需要共享的状态也放入Vuex中，会增加代码的冗余和维护成本。

2. 使用Provide/Inject：
   • 实现方式：在祖先组件的setup函数中使用provide提供共享数据，后代组件使用inject注入该数据。例如：

// ParentComponent.vue
<template>
  <ChildComponent />
</template>

<script setup>
import { provide, ref } from 'vue'

const sharedData = ref('default value')
provide('sharedData', sharedData)
</script>

// ChildComponent.vue
<template>
  <div>
    <p>{{ sharedData }}</p>
  </div>
</template>

<script setup>
import { inject } from 'vue'

const sharedData = inject('sharedData')
</script>

• 原理：provide和inject是一对绑定，provide会将数据提供给其所有后代组件，inject用于在后代组件中获取这些数据。它基于组件树的层级关系来传递数据，通过依赖注入的方式实现数据共享。
• 优势：
  • 简单易用：对于小型应用或组件树内有限层级的共享数据，这种方式简单直接，不需要引入额外的库。
  • 组件解耦：可以在不改变组件API的情况下实现跨组件数据共享，使组件之间的耦合度降低。
• 可能存在的问题：
  • 数据流向不清晰：由于数据是沿着组件树传递的，在复杂组件树中，数据的来源和流向可能不直观，不利于调试。
  • 缺少响应式更新机制：如果直接使用inject返回的普通数据，可能无法自动响应数据变化，需要手动处理响应式（例如使用ref包装共享数据）。