面试题：Angular与Vue在组件通信方面的差异

Angular

父子组件通信
- 输入属性（@Input()）：
  - 方式：父组件在模板中通过属性绑定将数据传递给子组件，子组件使用@Input()装饰器来接收数据。例如，父组件模板<app - child [inputData]="parentData"></app - child>，子组件类中@Input() inputData: any;。
  - 优点：简单直观，符合单向数据流原则，易于理解和维护。
  - 缺点：只能从父到子传递数据，子组件不能直接修改父组件传递的数据（需要通过事件机制通知父组件修改）。
- 输出属性（@Output() + EventEmitter）：
  - 方式：子组件使用@Output()装饰器和EventEmitter类来发射事件，父组件在模板中通过事件绑定来监听事件并处理。如子组件@Output() childEvent = new EventEmitter();，然后在某个方法中this.childEvent.emit(data);，父组件<app - child (childEvent)="handleChildEvent($event)"></app - child>。
  - 优点：实现了子组件向父组件的通信，同样遵循单向数据流，清晰明了。
  - 缺点：如果事件处理逻辑复杂，可能导致父组件模板中事件绑定的代码冗长。
兄弟组件通信
- 通过服务（Service）：
  - 方式：创建一个共享服务，兄弟组件通过注入这个服务来进行通信。在共享服务中定义数据和方法，一个兄弟组件调用服务的方法修改数据，另一个兄弟组件监听数据变化。例如，服务中private sharedData = new BehaviorSubject<any>(null);，一个组件this.sharedService.sharedData.next(newData);，另一个组件this.sharedService.sharedData.subscribe(data => console.log(data));。
  - 优点：解耦了兄弟组件，代码可维护性较好，适用于复杂的通信场景。
  - 缺点：增加了服务的复杂度，如果服务管理不当，可能导致数据混乱。
跨层级组件通信
- 依赖注入（Dependency Injection）和祖先注入（Ancestor Injection）：
  - 方式：通过在祖先组件注入服务，后代组件可以通过依赖注入获取该服务实例从而实现通信。例如，在祖先组件providers: [SharedService]，后代组件constructor(private sharedService: SharedService) {}。
  - 优点：适合在组件树中进行数据共享，不需要层层传递数据。
  - 缺点：如果组件树结构复杂，可能难以确定数据的流向和来源，增加调试难度。
- @Input() 和 @Output() 层层传递：
  - 方式：从顶层组件开始，通过@Input()和@Output()沿着组件树一层一层传递数据和事件，直到目标组件。
  - 优点：遵循单向数据流，原理简单。
  - 缺点：如果层级较深，代码冗余度高，维护成本大。

Vue

父子组件通信
- props：
  - 方式：父组件在模板中通过属性绑定传递数据给子组件，子组件在props选项中声明接收。如父组件<child - component :prop - data="parentData"></child - component>，子组件props: ['propData']。
  - 优点：清晰的单向数据流，易于理解和调试。
  - 缺点：子组件不能直接修改props数据，需要通过$emit通知父组件修改。
- $emit 与自定义事件：
  - 方式：子组件使用$emit方法触发自定义事件，父组件在模板中通过v - on监听。例如子组件this.$emit('child - event', data);，父组件<child - component @child - event="handleChildEvent"></child - component>。
  - 优点：实现子到父通信，简单灵活。
  - 缺点：对于复杂逻辑，父组件的事件处理代码可能变得冗长。
兄弟组件通信
- 通过事件总线（Event Bus）：
  - 方式：创建一个空的Vue实例作为事件总线，兄弟组件都引用这个实例。一个组件通过$emit触发事件，另一个组件通过$on监听事件。如const eventBus = new Vue();，组件AeventBus.$emit('brother - event', data);，组件BeventBus.$on('brother - event', data => console.log(data));。
  - 优点：简单直接，适用于小型项目快速实现兄弟组件通信。
  - 缺点：在大型项目中，事件总线可能导致代码难以维护和追踪，因为事件可能在多个地方触发和监听。
- Vuex（状态管理）：
  - 方式：将共享数据存储在Vuex的状态中，兄弟组件通过mapState辅助函数获取数据，通过提交mutation来修改数据。例如，在Vuex的state中定义sharedData，组件中computed: { ...mapState(['sharedData']) }，修改数据时this.$store.commit('updateSharedData', newData);。
  - 优点：集中式管理状态，便于维护和调试，适合大型项目。
  - 缺点：引入了额外的复杂度，配置和使用相对复杂，对于小型项目可能过度设计。
跨层级组件通信
- provide 和 inject：
  - 方式：祖先组件使用provide选项提供数据，后代组件使用inject选项注入数据。如祖先组件provide: { sharedData: this.data }，后代组件inject: ['sharedData']。
  - 优点：可以在不改变组件树结构的情况下实现跨层级通信，方便快捷。
  - 缺点：数据流向不够清晰，不利于追踪数据变化，且inject的数据在后代组件中不能直接修改，需要通过其他方式通知祖先组件修改。
- Vuex（状态管理）：同兄弟组件通信中Vuex的方式，通过Vuex存储跨层级共享的数据，组件通过Vuex的机制获取和修改数据。

对比总结

父子组件通信：Angular和Vue都采用了类似的单向数据流方式（Angular的@Input()和Vue的props）以及子到父通信方式（Angular的@Output() + EventEmitter和Vue的$emit）。两者原理相似，Angular的语法基于装饰器，Vue基于选项式API，在使用体验上各有特点，但总体上差异不大。
兄弟组件通信：Angular通过服务实现解耦，Vue可以选择轻量级的事件总线或功能强大的Vuex。事件总线简单但大型项目难维护，Vuex功能强但复杂度高，而Angular的服务方式在大型项目中有较好的可维护性，但如果服务设计不当也会有问题。
跨层级组件通信：Angular的依赖注入和Vue的provide/inject都提供了一种相对便捷的跨层级通信方式，但都存在数据流向不清晰的问题。Vuex作为状态管理工具在跨层级通信方面提供了更规范的解决方案，而Angular在跨层级通信上也可以借助服务来实现类似的功能，但两者在具体实现和使用场景上略有不同，Vuex更侧重于状态管理，而Angular的服务功能更通用。

面试题：Angular与Vue在组件通信方面的差异

知识考点

面试题答案

Angular

Vue

对比总结