**阅读提示：** 本文适合`1-2`年工作经验，熟悉vue框架的开发者阅读。如果你没用vue写过实战项目，阅读本文的内容会有些吃力，建议先补足实战经验再来看。文章里关于vue的一些api，我会讲的比较底层，这样你才能理解vue是怎么处理数据流的。 # 数据流是什么？简单来讲，就是组件之间数据的流向。为什么搞清楚这一点很重要？如果你搞不清楚数据的流向，开发中就很难找到问题所在，我就在调bug的时候，因为找不到是哪个地方修改了数据，耗费了我大量的时间和精力，猛扣头皮！！要不然就是动了一个地方的数据以后，其他的数据就突然出现异常，但我却不知道为什么。 ![](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/c277771f687a48efa2e08856e35c2f62~tplv-k3u1fbpfcp-zoom-1.image) 所以说，了解和设计出一个好的数据流，有利于后期的开发维护。 # 数据流类型由于笔者用vue比较多，所以主要讲一下单向数据流和全局数据流，这是vue开发主流的两种数据流类型。 ## 单向数据流实际上 vue这个框架，是典型的**单向数据流**。 **单向数据流**，指的是数据只能从父组件向子组件传递，子组件无法改变父组件的`props`。如果想要修改只能通过`emit`事件触发的方式，在父组件中修改。一言以蔽之，**所有数据的更改都是从父组件传递到子组件，都是自上而下的。** ### 单向数据绑定：props 在父传子的前提下，父组件的数据发生改变，会通过[props](https://cn.vuejs.org/v2/guide/components-props.html#ad)来通知子组件自动更新。子组件内部，不能直接修改父组件传递过来的`props`——`props`是只读的。这样做的好处是，**防止多个子组件都尝试修改父组件状态时，让这一行为变得难以追溯。** 如果子组件改了`props`的值会怎么样呢？这里分情况讨论： 1. 如果子组件修改的`props`数据类型，是引用数据类型，那么绑定的其实是引用地址，子组件修这个引用类型的值，vue不会报警告，但是建议别这样做。 2. 如果绑定的`props`是基础类型值，子组件直接修改父组件传递的`props`，vue会抛出警告。 ![](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/d48ae12d9a3c41848d5864feb6aaef2f~tplv-k3u1fbpfcp-zoom-1.image) 所以，尽量使用单向数据流，这样做的优点是： 1. 单向数据流会使所有状态的改变可记录、可跟踪，源头易追溯； 2. 所有数据只有一份，组件数据只有唯一的入口和出口，使得程序更直观更容易理解，有利于应用的可维护性。 ### 双向数据绑定父组件可以通过`props`改变子组件的数据，子组件也可以用[emit](https://cn.vuejs.org/v2/guide/components-custom-events.html)事件通知父组件的改变数据。双方数据可以互相更新，这就是双向数据绑定。 #### 实现方式：**props加emit** 以下代码示例，父组件代码： ```JavaScript ``` 子组件代码： ```JavaScript ``` **分析数据流向分析** （1）我们在父组件中定义了数据：一个叫`info`的字符串；（2）调用组件的时候，通过`:info="info"`的方式，将父组件的数据以 `prop` 的方式传递到子组件中；（3）子组件读取到`info`，并将其展示在模板中；（4）用户点击按钮，`info`被修改；（5）子组件监听到这个事件，但它并不直接修改info，而是通过 `this.$emit('change')`; 以自定义事件的形式，将需要增加的这一个事件报告给父组件；（6）父组件中，由于通过执行过`@click="fn"` ，能够监听到子组件报告过来的事件，并在自己的方法中，实现`info`数据的更新；（7）父组件里的数据更新了，通过`props`的机制，子组件里的数据也将自动更新，同时也将更新界面内容，这一过程由框架自动完成。整体过程如下图所示： ![](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/6b7c7f76431b45f7bf419edd934c8108~tplv-k3u1fbpfcp-zoom-1.image) #### 双向数据绑定语法糖：v-model 在vue中，提供了[v-model](https://cn.vuejs.org/v2/guide/forms.html)这个语法糖，相信大家都不陌生下面这段代码。： ```html ``` 在这里，我们在输入框内输入值，父组件的值也会直接改变。 ![](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/fad5915d63064fcb9d19ca53d2ac5854~tplv-k3u1fbpfcp-zoom-1.image) 看上去好像视图的操作直接修改了父组件的值，所以很多人以为这是一种双向数据流，即子组件可以直接修改父组件的值。但其实不是这样，因为v-model的本质相当于： ```html ``` 我们仔细观察这段代码，可以得出一个结论：在给``元素添加 v-model 属性时，默认会把 value作为元素的属性，然后把input事件作为实时传递 value 的触发事件。你发现没有，其实这个和上面那个`props`加`emit`的案例，是一个套模式，都是子组件通过自定义事件通信父组件改值。这里vue自己处理了input原生的`input` 事件，这是 HTML5 新增加的，类似 `onchange` ，每当输入框内容发生变化，就会触发 input 事件，把最新的value值传给传递给val,完成双向数据绑定的效果。相当于vue把input这个组件重写为下面的代码： ```JavaScript ``` 注意: 在HTML5中，不是所有能进行双向绑定的元素都是 value property 和input事件。 1.` text` 和 `textarea` 元素使用 `value` 作为 `prop` 和 `input` 事件； 2. `checkbox` 和 `radio` 使用 `checked` 作为 `prop` 和 `change` 事件； 3. `select` 字段将 `value` 作为 `prop` 并将 `change` 作为事件。它们都有一个共通点：依赖一个value作为`prop`，以及`emit`事件传递新值。所以，如果我们要在自定义组件中使用 `v-model` 进行双向绑定，必须满足以下两个条件： 1. 将其 `value` attribute 绑定到一个名叫 `value` 的 `prop` 上 2. 在数据发生变化时一个带新值的 input 事件，将新的值通过`$emit`把 input 事件抛出如果我想改值的名字怎么办？我不想用value和input这些名字怎么办？ vue也提供了model这个api，让我们可以更改value和input的名字，我们把第一段案例的代码用自定义model重写一下： ```JavaScript ``` 子组件代码： ```JavaScript ``` 可以看到，和第一个案例不同，使用v-model后，父组件不必处理子组件的@change事件，也能实现数据的更新。之所以用v-model后能简写父组件的`@change`事件，是因为vue默认帮我们处理了事件的赋值。相当于vue自动加上去了这句代码：`@change="val=>info = val"` 看到这里你是不是就明白了，`v-model`虽然是叫双向数据绑定，但它不是双向数据流（这是很多人的误区，以为子组件的操作不经过任何处理，就直接能修改父组件的值）。其实`v-model`本质上还是单向数据流，属于第一种`props`加`emit`的处理流程的简写。 `v-model`只是帮我们减少了父组件控制数据流向的代码，让用户的操作可以通过单向的数据流向，更新到绑定值中，绑定值再通过props的渲染更新到页面上。 **让我们用户用起来的感觉，是我们操作视图的变化而改变了数据。** **但其实它的数据流依然和第一个案例一样，子组件无法直接改值，数据依然是从父传给子。** 流程如下图所示： ![](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/f77afe6e2b6a46dd9134ea7af0a830ba~tplv-k3u1fbpfcp-zoom-1.image) ##### `v-model`优点优点：双向数据绑定的优点是无需进行和单向数据绑定的那些CRUD（Create，Retrieve，Update，Delete）操作。双向数据绑定最经常的应用场景就是表单了，这样当用户在前端页面完成输入后，不用任何操作，我们就已经拿到了用户的数据存放到数据模型中了，在表单交互较多的场景下，会简化大量业务无关的代码。 ##### `v-model`缺点虽然`v-model`很方便，但它也是有缺点的： 1. `v-model`有数量的限制，一个组件只能有一个v-model。 2. 双向绑定会带来维护上的问题，因为子组件可以变更父组件，且在父组件和子组件两侧都没有明显的变更来源（这点在使用别人组件库时尤为明显），无法追踪局部状态的变化，潜在的行为增加了debug的难度。由于组件数据变化来源入口变得可能不止一个，数据流转方向易紊乱。为了解决这个问题，我推荐你使用sync指令修饰符。 3. 做组件库的时候，如果封装了v-model，就一定要在文档里讲清楚是哪个自定义事件修改的值。否则父组件改值不可控，子组件说改就改，因为不知道覆盖哪一个自定义事件。 vant2弹出框案例其实做了v-model，也支持父组件覆盖默认的@change事件 ```html ``` 但是你不告诉别人是哪个自定义事件改的值，非要人家看你的源码才知道答案，这就很不友好。 #### 双向数据绑定的修饰符：.sync [.sync](https://cn.vuejs.org/v2/guide/components-custom-events.html#sync-%E4%BF%AE%E9%A5%B0%E7%AC%A6)修饰符可以实现`和v-model`同样的功能，而且它比`v-model`更加灵活 1. 因为`.sync`修饰符是可选的，父组件想加就加，不加就没有双向绑定。 2. 不像`v-model`那样有数量上的限制，想用几个就用几个。 **.sync修饰符的本质** ``` // 正常父传子： // 加上sync之后父传子（.sync没有数量限制）： // 它等价于 // 相当于多了一个事件监听，事件名是update:info，回调函数中，会把接收到的值赋值给属性绑定的数据项中。 ``` 这里面的传值与接收与正常的父向子传值没有区别,唯一的区别在于往回传值的时候`$emit`所调用的事件名必须是`update:属性名`,如下所示： ```JavaScript ``` **事件名写错不会报错,但是也不会有任何的改变,这点需要多注意。** 注意事项： 1.注意带有 `.sync` 修饰符的 `v-bind` 不能和表达式一起使用，例如： ``` v-bind:title.sync=”doc.title + ‘!’” ``` 这是无效的。取而代之的是，你只能提供你想要绑定的 property 名，类似 `v-model`。 2.不要将 `v-bind.sync` 用在一个字面量的对象上，例如： ``` v-bind.sync=”{ title: doc.title }” ``` 这是无法正常工作的，官网给出的理由是：因为在解析一个像这样的复杂表达式的时候，有很多边缘情况需要考虑。总之，如果你封装组件，除非这个值是`input`或者`checkbox`这种，不需要校验就能直接改值的组件，可以直接封装成v-model，否则我都建议你用`sync`来处理双向绑定，这样更加灵活。下期我们会讲讲在多个组件中如何维护同一个数据。参考文章： https://juejin.cn/post/6844904143522529287 https://juejin.cn/post/7106466969847201799

我是父组件

我是子组件

我是父组件

我是子组件