vue 组件封装单向数据流

vue 组件封装单向数据流

vue 组件封装想要杜绝双休数据流，不然离代码shi山越来越近

在 Vue 中，双向绑定是通过将数据流向子组件并在子组件中使用 v-model 实现的。如果在子组件中直接修改了父组件中的数据，就会打破单向数据流的规则，从而导致一些问题。

具体来说，如果在子组件中直接修改了父组件中的数据，那么这个修改会立即反映在父组件中，但是父组件并不会触发更新，也就是说父组件的视图不会更新。这会导致父组件和子组件之间的数据不一致，进而导致一些难以排查的 bug。

本文将介绍 vue 组件中封装单向数据流的方法。

在 vue 组件中，为了保证数据的单向流动，我们通常会将数据定义在父组件中，通过 props 传递给子组件。子组件通过事件向父组件发送数据，保证数据的单向流动。

下面是封装的一个简单的不考虑单项数据流的组件：

• 具体实现方法：
  1. 在父组件通过 v-model 将数据传递给子组件
  2. 子组件通过props接受参数
  3. 子组件直接使用v-model 使用传递过来的值

父组件：

子组件：

数据变化视图：

这样会产生的问题是：

如果在子组件中直接修改了父组件中的数据，那么这个修改会立即反映在父组件中，但是父组件并不会触发更新，也就是说父组件的视图不会更新。这会导致父组件和子组件之间的数据不一致，进而导致一些难以排查的 bug。

所以需要杜绝类似的问题，就不能打破单项数据流。

初步解决办法：

通过model-value 和**@update:modelValue 解决**

具体实现方法如下：

1. 在父组件中定义数据并将数据通过 props 传递给子组件。
2. 在子组件中定义一个名为 emit 的方法，用于向父组件发送数据。
3. 在子组件中使用 $emit 方法调用 emit 方法，并传递需要发送的数据。

示例代码如下：

但是数据多的话这样和麻烦。真的很麻烦

进阶解决办法：

通过computed 和**get set 解决**

具体实现方法如下：(官方建议的)

1. 子组件将父组件传递的值通过***computed*** 处理。
2. 在子组件的***computed*** 属性中设置 get() {} 和 set(val) {} 方法。
3. 父子组件直接使用 v-model。

示例代码如下：

但是数据多和数据结构是复杂数据类型的时候，要么一个一个设置get和set。不然会导致改复杂数据类型的时候，set 不会触发。

更好的解决办法：

通过***computed和***get set 和***Proxy* 解决

具体实现方法如下：

1. 子组件将父组件传递的值通过***computed*** 处理。
2. 在子组件的***computed*** 属性中设置 get() {} get方法获取的值是通过*Proxy 代理过的*。
3. 父子组件直接使用 v-model。

示例代码如下：

通过以上方法，我们可以很容易地实现 vue 组件中的单向数据流封装，保证了数据的单向流动，降低了组件之间数据流动的耦合度，提高了组件的可维护性。