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)
}
}
}
之后会发现，子组件的数据操作不再影响到父组件：
本文内容仅供个人学习、研究或参考使用，不构成任何形式的决策建议、专业指导或法律依据。未经授权，禁止任何单位或个人以商业售卖、虚假宣传、侵权传播等非学习研究目的使用本文内容。如需分享或转载，请保留原文来源信息，不得篡改、删减内容或侵犯相关权益。感谢您的理解与支持！
