从单向数据流聊vue中的数据管理

# 什么是单向数据流？

单向数据流是指数据的流动方向是单向的，只能从父组件流向子组件，不能从子组件流向父组件。从而保证了数据的单向性，避免了数据的混乱。换句话说就是数据的修改者只能是数据的拥有者。

# vue 中组件间的数据传递

常用的组件间的数据传递方式有以下几种：

• props 和 $emit (单向数据流)
• $emit 和 $on (事件总线) (单向数据流) 事件总线一般用于兄弟组件间的数据传递，因为兄弟组件间的数据传递是比较麻烦的，需要通过父组件来传递数据，而事件总线可以让兄弟组件间的数据传递变得简单。但是事件总线也有缺点，就是事件的命名容易冲突，所以在使用事件总线时，最好使用命名空间来避免事件的命名冲突。所以在建设 10 个以上组件的项目时（经验之谈），最好使用状态管理来进行数据的传递。
• $attrs 和 $listeners (不推荐使用) 子组件中的 $attrs 和 $listeners 可以访问到父组件中的所有属性 (class 和 style 除外)和事件，但是不推荐使用，因为这样会导致子组件和父组件耦合度过高，不利于组件的复用。 小知识：如果子组件中有孙组件，可以设置 inheritAttrs: false，这样就可以阻止子组件中用 props 接收的数据，在使用 $attrs 和 $listeners 向孙组件传递时一并传递。
• provide 和 inject (不推荐使用)
• $parent 和 $children (不推荐使用)
• $refs (不推荐使用)
• vuex/pinia (状态管理) !(Vue 组件间通信六种方式（完整版）)[https://juejin.cn/post/6844903845642911752#heading-11]

那么在 vue 中，我们应该如何选择合适的数据传递方式呢？ 在一般的业务开发中我们应该尽量使用 props 和 $emit 的方式进行数据传递，因为这种方式是 vue 中的单向数据流，可以保证数据的单向性，避免数据的混乱。但是这种方式在组件比较多的情况下非常的繁琐，经验上讲一般数据在 3 个以上的组件中共享就可以考虑使用状态管理和事件总线来处理数据传递。

# 什么是状态管理

状态管理是指将数据集中存放在一个地方，然后通过一些方法来修改数据，从而达到数据的共享。相对于事件总线来说，状态管理的优势在于可以将数据的修改者和数据的拥有者分离，从而保证数据的单向性，避免数据的混乱。同时也可以让数据的修改者和数据的拥有者分离，从而提高代码的可维护性。

# vue 中数据管理的最佳实践

• 一般情况下，我们应该尽量使用 props 和 $emit 的方式进行数据传递，因为这种方式是 vue 中的单向数据流，可以保证数据的单向性，避免数据的混乱。
• 在项目组件不超过 10 个时推荐用事件总线处理需要多处复用的数据。
• 在组件更多时建议引入状态管理，比如 vuex 或者 pinia。因为组件越多，使用事件总线的缺点就越明显，比如事件的命名容易冲突，拥有者和使用者混乱。