Vue 关于单向数据流的简单理解

单向绑定和双向绑定

单双向绑定，指的是 view层和 model 层之间的映射关系。vue 在数据操作上支持单向绑定和双向绑定：

单向绑定：例如 Mustache 插值语法， v-bind 等；

双向绑定：即表单的 v-model 。它实际上是一个语法糖，背后包括两步操作：v-bind:value，v-on:input

单向数据流

数据流，指的是组件之间的数据流动

虽然 v-model 是双向绑定，但 Vue 实际上是单向数据流。我们看一个例子：

假设现在想要用子组件的 prop 做一个双向绑定，那么我们的代码可能会这么写：

<div id="app">
  <cpn v-bind:value2="value"></cpn>
</div>
<template id="cpn">
    <input type="text" v-model="value2">
    <h2>{{value2}}</h2>    
</template>

const cpn = {
  template:"#cpn",
  props:["value2"]
}
const app  = new Vue({
  el:'#app',
  data:{
    value:0
  },
  components:{
    cpn
  }
})

我们会发现 model 层的确随着 view 层同步改变了，但是控制台里会报错：

实际上， prop 就应该是父组件传过来的原始数据，但是我们试图通过子组件的 v-model 去改变这个 prop ，也就是试图通过子组件直接去改变父组件的数据（而不是通过发送事件的方式），这是不允许的，因为 Vue 是单向数据流 —— 也就是说， 数据总是从父组件传到子组件 ，子组件没有权利修改父组件传过来的数据， 只能请求 父组件对原始数据进行修改。

这实际上是为了更好的解耦。在开发中可能有多个子组件依赖于父组件的某个数据，万一子组件真的可以直接修改父组件数据，那么一个子组件变化将会引发所有依赖这个数据的子组件发生变化，所以 Vue 不推荐子组件修改父组件的数据，直接修改 prop 会抛出警告。

官方文档也有针对这个问题的解释：

所有的 prop 都使得其父子 prop 之间形成了一个单向下行绑定：父级 prop 的更新会向下流动到子组件中，但是反过来则不行。这样会防止从子组件意外改变父级组件的状态，从而导致你的应用的数据流向难以理解。

但是，很多时候我们又确实要操作这个数据，那么应该怎么办呢？

有两种方法：

定义一个局部变量，并用 prop 的值初始化它：

props: ['initialCounter'],
data: function () {
  return {
    counter: this.initialCounter
  }
}

定义一个计算属性，处理 prop 的值并返回：

props: ['size'],
computed: {
  normalizedSize: function () {
    return this.size.trim().toLowerCase()
  }
}

第一个方法相当于创建了原始 prop 的副本了，之后怎么操作数据都是操作的子组件数据，不会影响到父组件数据；第二个方法，注意 trim() 会返回一个处理完成后的新字符串，同样不会影响到父组件数据（原字符串）。之后如果父组件确实要用到这个处理后的值，就通过 $emit 的方式传给父组件即可。

拿前面的例子来说，我们想要利用 prop 这个数据实现双向绑定，可以这么写：

<div id="app">
  <cpn v-bind:value2="value"></cpn>
</div>
<template id="cpn">
    <input type="text" v-model="value3">
    <h2>{{value3}}</h2>    
</template>

const cpn = {
  template:"#cpn",
  props:["value2"],
  data:{
    value3:this.value2
  }
}
const app  = new Vue({
  el:'#app',
  data:{
    value:0
  },
  components:{
    cpn
  }
})

这样子就不会报错了，因为现在我们操作的是子组件自己的数据，和 prop 无关。

还要注意一个问题：

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

比如下面这段代码：

<div id="app">
  <h2>父组件数据：{{parent}}</h2>
  <cpn v-bind:obj1="parent"></cpn>
</div>
<template id="cpn">
  <div>
    <h2>子组件数据：{{son}}</h2>
    <input type="text" v-model="son.age">
  </div>
</template>

const cpn = {
  template:"#cpn",
  props:["obj1"],
  data(){
    return {
      son:this.obj1
    }
  }
}
const app  = new Vue({
  el:'#app',
  data:{
    parent:{age:20}
  },
  components:{
    cpn
  }
})

这里的 this.obj1 是引用，赋值给了 son ，所以 son 实际上还是指向了父组件的数据，对 son.age 的修改依然会影响到父组件，如图：

所以，我们实际上需要的是一个对象副本。因为对象属性都是基本类型，这里只用浅拷贝即可（如果对象属性还是对象，就得用深拷贝）：

const cpn = {
  template:"#cpn",
  props:["obj1"],
  data(){
    return {
      // son:this.obj1
      son:Object.assign({},this.obj1)
    }
  }
}

之后会发现，子组件的数据操作不再影响到父组件：

链接: https://fly63.com/article/detial/5645