单向数据流

本节目标：理解“单向数据流”的核心思路，并能把它用于实际开发或面试表达。父级 prop 的更新会向下流动到子组件中，但是反过来则不行。这样会防止从子组件意外变更父级组件的状态，从而导致你的应用的数据流向难以理解。

此外，每次父级组件发生变更时，子组件中所有的 prop 都将会刷新为最新的值。

不应该在一个子组件内部改变 prop 如果你这样做了，Vue 会在浏览器的控制台中发出警告。

这里有两种常见的试图变更一个 prop 的情形：

prop 作初始值；这个子组件接下来希望将其作为一个本地的 prop 数据来使用。在这种情况下，最好定义一个本地的 data property 并将这个 prop 用作其初始值：
```
props: ['initialCounter'],data: function () {  return {    counter: this.initialCounter  }}
```
这个 prop 以一种原始的值传入且需要进行转换。在这种情况下，最好使用这个 prop 的值来定义一个计算属性：
```
props: ['size'],computed: {  normalizedSize: function () {    return this.size.trim().toLowerCase()  }}
```

注意：在 JavaScript 中对象和数组是通过引用传入的，所以对于一个数组或对象类型的 prop 来说，在子组件中改变变更这个对象或数组本身将会影响到父组件的状态。

单向数据流 ​