单项数据流
vue 中父子组件通信最常用的方式是 props 和 $emit，所有的 prop 都使得其父子 prop 之间形成了一个单向下行绑定：父级 prop 的更新会向下流动到子组件中，但是反过来则不行。这样会防止从子组件意外变更父级组件的状态，从而导致你的应用的数据流向难以理解。
额外的，每次父级组件发生变更时，子组件中所有的 prop 都将会刷新为最新的值。这意味着你不应该在一个子组件内部改变 prop。如果你这样做了，Vue 会在浏览器的控制台中发出警告。
这里有两种常见的试图变更一个 prop 的情形：
1、这个 prop 用来传递一个初始值；这个子组件接下来希望将其作为一个本地的 prop 数据来使用。在这种情况下，最好定义一个本地的 data property 并将这个 prop 作为其初始值：
props: ['initialCounter'],
data() {
return {
counter: this.initialCounter
}
}
2、这个 prop 以一种原始的值传入且需要进行转换。在这种情况下，最好使用这个 prop 的值来定义一个计算属性：
props: ['size'],
computed: {
normalizedSize() {
return this.size.trim().toLowerCase()
}
}
重点：
在 JavaScript 中对象和数组是通过引用传入的，所以对于一个数组或对象类型的 prop 来说，当父组件的传值是对象或者数组时，在子组件中改变这个对象或数组本身将会影响到父组件的状态，且 Vue 无法为此向你发出警告或者报错，
作为一个通用规则，应该避免修改任何 prop，包括对象和数组，因为这种做法无视了单向数据绑定，且可能会导致意料之外的结果。
接下来分析下出现这种情况的原因：
一、JavaScript 数据类型
基本数据类型：字符串（String）、数字(Number)、布尔(Boolean)、空（Null）、未定义（Undefined）、Symbol
引用数据类型：对象(Object)、数组(Array)、函数(Function)
二、内存空间
要理解 JavaScript 在运行过程中数据是如何存储的，就得先搞清楚其存储空间的种类
在 JavaScript 的执行过程中， 主要有三种类型内存空间，分别是代码内存空间、栈内存空间 和 堆内存空间，其中的代码内存空间主要是存储可执行代码的，栈内存空间就是调用栈，是用来存储执行上下文的，堆内存空间是用来储存引用数据类型的，简单来说就是 JS 执行的时候，会把基本类型的数据保存在 栈内存空间 中，引用类型的数据保存在 堆内存空间 中
// 基本数据类型-栈内存
let a1 = 0;
// 基本数据类型-栈内存
let a2 = 'this is string';
// 基本数据类型-栈内存
let a3 = null;
// 对象的指针存放在栈内存中，指针指向的对象存放在堆内存中
let b = { m: 20 };
// 数组的指针存放在栈内存中，指针指向的数组存放在堆内存中
let c = [1, 2, 3];
image.png
从上图可以看到，对象类型是存放在堆空间的，在栈空间中只是保留了对象的引用地址，当 JavaScript 需要访问该数据的时候，是通过栈中的引用地址来访问的，所以，父组件传递给子组件的，实际上只是一个引用地址，当子组件修改这个对象时，是真的修改了在堆空间中保存的数值，当然父组件中的值也会发生变化，但是引用地址没有进行修改，所以并没有报错。
上面简要分析了一下 vue 组件通信中，父组件传一个对象给子组件，子组件可以直接修改这个数据，并且可以影响父组件的问题，里面涉及到堆空间、栈空间等 JavaScript 数据类型以及浏览器底层原理的东西，感兴趣的话可以阅读一下相关知识点。
网友评论